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

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

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

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

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

Просмотр кода 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

<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

<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>

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