Как симулировать нажатие пользователем кнопки «Отправить» в javascript при изменении элемента «Выбрать»? - PullRequest
Новая
       1

Как симулировать нажатие пользователем кнопки «Отправить» в javascript при изменении элемента «Выбрать»?

0 голосов
/ 20 мая 2018

У меня есть простая форма HTML.Я хотел бы имитировать нажатие пользователем кнопки «Отправить» в javascript при изменении элемента «select».Итак, я попытался сделать это с помощью функции замены выбора.Я не знаю, как написать функцию, которая будет отправлять форму.Я искал через этот сайт, но я не нашел ничего, что будет работать для меня.Он просто ничего не делал.Он не отправил форму.Может быть, мне нужно было только включить что-то, но я этого не сделал, так что, возможно, если бы я это сделал, это сработало бы.Я действительно не знаю.Я новичок в JavaScript.Я был бы очень благодарен за фрагмент кода java-скрипта (функции) и, возможно, CDN или файл, который мне нужен, если я это сделаю. 

<!DOCTYPE html>
<html>
<head>

//probably I need to include something here (if so, could you please send me the CDN?)

</head>
<body>


<form method="post" id="theForm" enctype="multipart/form-data">

<select id="year_start"  name="year_start" onchange="myFunction()"> 
    <option>2009</option>       
    <option>2010</option>       
    <option>2011</option>       
    <option>2012</option>       
    <option>2013</option>       
    <option>2014</option>       
    <option>2015</option>       
    <option>2016</option>       
    <option>2017</option>       
    <option>2018</option>       
  </select> 
<select id="month_start"  name="month_start" onchange="myFunction()"> 
    <option>January</option>       
    <option>February</option>       
    .
    .      
    <option>December</option>       
</select> 
 <select id="day_start" name="day_start" onchange="myFunction()" >
    <option>1</option>       
    <option>2</option>       
    .
    .
    .
    <option>30</option>       
    <option>31</option>       
  </select> 

  <input type="submit" id="submit" value="submit">

</form>

<script>
function myFunction(){
//what should I do there? - I want to simulate user's click on the "submit" button
}
</script>

<?php

//I want to do some stuff there after some of the selects was changed
echo $POST['year_start'];
echo $POST['month_start'];
echo $POST['day_start'];

?>

</body>

Ответы [ 2 ]

0 голосов
/ 20 мая 2018

Вы можете использовать функцию .click(), чтобы щелкнуть функцию отправки из JavaScript. 

function myFunction(){
  document.getElementById('submit').click();
}

И избегайте использования встроенных функций в html.

0 голосов
/ 20 мая 2018

Вместо того, чтобы вручную запускать событие click на кнопке отправки, почему бы не вызвать вместо этого метод submit() в форме? 

function myFunction(){
    document.getElementById('theForm').submit();
}

Поскольку вы используете просто vanilla JS,вам не нужно включать какую-либо библиотеку: в этом и заключается прелесть написания vanilla JS.

Pro-tip: вы можете не использовать встроенную привязку JS и использовать addEventListener для проверки changeсобытие вызывается из элементов <select> (при условии, что вы хотите связать все элементы <select>): 

var formEl = document.getElementById('theForm');
var selectEls = formEl.querySelectorAll('select');

[].prototype.slice.call(selectEls).forEach(function(selectElement) {
    // Bind event listener to each select element
    selectElement.addEventListener('change', function() {
        formEl.submit();
    });
});

В противном случае вы также можете использовать разделенные запятыми селекторы идентификаторов в вашем методе querySelectorAll(),Например: 

var selectEls = formEl.querySelectorAll('#year_start, #month_start, #day_start');

Важное примечание

Исходя из ваших комментариев, я чувствую, что вы хотите, чтобы JS выполнял какие-то действия в коде PHP.Помните, что PHP - это серверный язык , поэтому, если вы хотите использовать JS для запуска какой-либо мутации состояния сервера через PHP, вам нужно будет использовать AJAX.

Вот пример подтверждения концепции: 

var formEl = document.getElementById('theForm');
var selectEls = formEl.querySelectorAll('select');

Array.prototype.slice.call(selectEls).forEach(function(selectElement) {
  // Bind event listener to each select element
  selectElement.addEventListener('change', function() {
    // Here is just dummy code to show you how binding works
    console.log('Will submit form');
  
    // Uncommt this line to perform actual form submission
    //formEl.submit();
  });
});
<form method="post" id="theForm" enctype="multipart/form-data">

  <select id="year_start" name="year_start">
    <option>2009</option>
    <option>2010</option>
    <option>2011</option>
    <option>2012</option>
    <option>2013</option>
    <option>2014</option>
    <option>2015</option>
    <option>2016</option>
    <option>2017</option>
    <option>2018</option>
  </select>
  <select id="month_start" name="month_start">
    <option>January</option>
    <option>February</option>
    <option>December</option>
  </select>
  <select id="day_start" name="day_start">
    <option>1</option>
    <option>2</option>
    <option>30</option>
    <option>31</option>
  </select>

  <input type="submit" id="submit_button">Submit</button>

</form>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...