Изменение атрибута Action у HTML формы (jQuery)

Author Автор: Роман Чернышов    Опубликовано: 25 мая 2012

ногда возникает необходимость менять значение атрибута HTML формы action без перезагрузски страницы, приямо на лету, в зависимости от каких либо значений или действий пользователя на странице. Примером может служить поисковая форма на сайте, которая в зависимости от выбора типа поиска с помощью выпадающего «селекта», посылает запросы на разные URL. Часто на сайте используется поиск от Google и внутренний поиск.

Для реализации данной возможности, достаточно написать не больший JS скрипт, который будет обрабатывать данные на странице и в зависимости от них, подставлять нужное значение в атрибут action HTML формы. Приведу два примера, один из которых использует jQuery.

Пример 1, листинг JavaScript и HTML.

<html>
<head>
    <script language="javascript">
        function setNewAction(radioGroupObj)
                {
                    for(var i = 0 ; i < radioGroupObj.length ; i++)
                    {
                        if(radioGroupObj[i].checked)
                        {
                            document.forms[0].action =
radioGroupObj[i].value;
                        }
                    }
                    document.forms[0].submit();
                }
    </script>
</head>
</body>
<form name="form1" id="my_form" method="get" action="test.html">
  <p>
    <label>
    <input type="radio" name="group1" value="page1.php">
  Form Action Page 1</label>
    <br>
    <label>
    <input type="radio" name="group1" value="page2.aspx">
  Form Action Page 2</label>
    <br>
  </p>
  <input type="button" id="butt" value="CLICK ME"
onClick="setNewAction(this.form.group1)">
</form>
</body>
</html>

Пример 2. С использованием jQuery.

<html>
<head>
    <script src="jquery.js"></script>
    <script language="javascript">
        $(document).ready
        (
            function()
            {
                $("input[@name='group1']").click
                (
                    function()
                    {
                        $("#my_form").attr("action",$(this).val());
                    }
                );
            }
        );
    </script>
</head>
</body>
<form name="form1" id="my_form" method="get" action="test.html">
  <p>
    <label>
    <input type="radio" name="group1" value="page1.php">
  Form Action Page 1</label>
    <br>
    <label>
    <input type="radio" name="group1" value="page2.aspx">
  Form Action Page 2</label>
    <br>
  </p>
  <input type="submit" value="Submit">
</form>
</body>
</html>

Пример 3. С jQuery и комментариями, как работает скрипт

<html>
<head>
    <script src="jquery.js"></script>
    <script language="javascript">
   $(document).ready(function(){
	$("#type").change(function(e){ // при выборе значение в поле селект, выполняем код функции
		var id = $("#type option:selected").val(); // получаем значение из поля селект
                if(id==1){ // если значение равно 1, задаем атрибуту action формы #formsearchtop, значение /search/
			$("#formsearchtop").attr("action","/search/");
			 }
                if(id==2)
			{ // если значение равно 2, задаем атрибуту action формы #formsearchtop, значение https://www.google.ru/search
			$("#formsearchtop").attr("action","https://www.google.ru/search"); 
			}
	});
    </script>
</head>
<body>
		    <form method="get" action="/search/" id="formsearchtop">
			<input type="text" name="q" rel="Поиск по сайту" value="" class="placeholder search-input"/>
			<input type="submit" value="найти" class="search-submit"/>
			<select name="type" id="type">
			<option value="1">поиск по сайту</option>
			<option value="1">поиск в гугле</option>
			</select>
		    </form>
</body>
</html>

Все предельно просто. Делайте свои страницы более живыми, дружественными и удобными для конечного пользователя. Подобные динамические решения экономят время и трафик посетителя делая ваш сайт заметно привлекательнее. Впрочем вы и сами прекрасно это понимаете).

Оставить комментарий

Автор блога
Чернышов Роман
Роман Чернышов
Веб-разработчик, Full Stack
Senior, Architector
PHP, JavaScript, Node.JS, Python, HTML 5, CSS 3, MySQL, Bash, Linux Admin
Заказать работу
предложить оффер

Последние вопросы
Список вопросов
Последние комментарии
Меню

Archive

Мои проекты
Insurance CMS Love Crm CMS Совместные покупки Мой PHP Framework Хостинг для моих клиентов Лицензии на мой софт и поддержка