WordPress как на ладони
Наставник Трепачёв Д.П., phphtml.net wordpress jino

Как запустить обработку формы используя JavaScript

Недавно у меня появился вопрос, - "Как запустить обработку HTML формы используя JavaScript"?.

Обычно обработка формы запускается при нажатии кнопки с типом Submit (type='submit'), но бывают случаи, когда нужно запустить форму не нажимая кнопку.

Например, у нас есть поле Select:

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

В управлении JavaScript, есть объект формы, содержащий submit() метод. Таким образом, мы можем использовать идентификатор формы, чтобы в дальнейшем запустить JS объект submit().

Например, у нас есть форма с id='myform', тогда код JavaScript для запуска обработки будет таким: document.forms["myform"].submit();

Пример кода, для запуска обработки формы при выборе значения поля SELECT:

<script type="text/javascript">
	function sform(){
		document.forms["myform"].submit();
	}
</script>
<form id="myform" method="get" action="#">
	<select name="vibor">
		<option value="value1" onclick='sform();'>значение 1</option>
		<option value="value2" onclick='sform();'>значение 2</option>
		<option value="value3" onclick='sform();'>значение 3</option>
		<option value="value4" onclick='sform();'>значение 4</option>
		<option value="value5" onclick='sform();'>значение 5</option>
	</select>
</form>

Также можно определить форму используя атрибут name:

<form name="myform" action="#">

Тогда обработку формы можно будет запустить так: document.myform.submit();.

Или select можно сабмитить, добавив onchange='this.form.submit()', пример:

<form method="get" action="#">
	<select name="year" onchange='this.form.submit()'>
		<option value="2009">2009</option>
		<option value="2010">2010</option>
		<option value="2011">2011</option>
		<option value="2012">2012</option>
		<option value="2013">2013</option>
	</select>
</form>

Пример кода, для запуска обработки формы при нажатии на ссылку:

<script type="text/javascript">
function submitform(){
  document.myform2.submit();
}
</script>
<form name="myform2" action="#" method='get'>
	Поиск: <input type='text' name='s' value='поисковой запрос' />
	<a href="javascript: submitform()">Search</a>
</form>

В некоторых случаях обработку формы можно запустить, вешая на какое-либо действие такой код: this.form.submit().

Пример кода, для запуска обработки формы при выборе Radio :

<form method="get" action="#" >
 <p><b>Каким браузером в основном пользуетесь?</b><br />
   <input type="radio" name="browser" value="ie" onclick='this.form.submit()'> Internet Explorer<br />
   <input type="radio" name="browser" value="opera" onclick='this.form.submit()'> Opera<br />
   <input type="radio" name="browser" value="firefox" onclick='this.form.submit()'> Firefox<br />
  </p>
</form>

Напоследок, страница с живыми примерами (при сабмите, обращайте внимание на адресную строку).

Продвижение сайтов www.seop.ru

продвижение сайтов www.seop.ru

www.seop.ru

Как запустить обработку формы используя JavaScript 9 комментариев
  • Владимир cайт: cmonet.ru

    Спасибо помогла статья!
    А не подскажите как сделать что бы при выборе значения в первом списке менялся второй список.

    Ответить6.4 лет назад #
    • Kama4477

      Не подскажу, но это не сложно. sorry Google вам в помощь!

      Ответить6.4 лет назад #
  • Сергей cайт: sergeybalashoff.blogspot.com
    @

    Kama, у вас очень хорошие примеры дизайна! good
    Я бы поддержал Владимира, это действительно распространенный пример. pardon
    А форму ответа сложно такую же осуществить?

    Ответить6.3 лет назад #
    • Kama4477

      Спасибо!
      Если пример распространенный, то и решений наверняка не мало уже!

      А форму ответа сложно такую же осуществить?

      При наличии желания и определенных знаний - не сложно!

      Ответить6.3 лет назад #
  • Дмитрий

    Большое спасибо! Статья очень сильно помогла, т.к. в документации много всего не совсем нужного, от чего устаешь, в Google не особо много полезного, а эта статья дельная! smile

    Ответить5.3 лет назад #
  • parmactep cайт: blog.brainf.net

    Со способом обработки Radio почему бы не использовать onChange()?

    1
    Ответить4.5 года назад #
  • Олег cайт: its-good.ru

    Большое спасибо, статья помогла!

    Ответить3.5 года назад #
  • starshekursnica cайт: www.starshekursnica.ru

    Чётко!

    Ответить2.8 года назад #
  • Адениум cайт: proluba.ru

    Ваш Сайт вызывает положительные эммоции ,мне понравилось!!! Успехов в написании статей: толковых и понятных. Буди посещать чаще ваш сайт

    Ответитьгод назад #

Здравствуйте, !

Ваш комментарий