получить значение нажатой кнопки отправки

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

я пытаюсь получить значение одной из двух кнопок отправки из моего формуляра, но мне не удавалось в каждом случае, когда я пытался это сделать.

Надеюсь, кто-нибудь сможет мне помочь и показать, как я могу это сделать.

Это html-форма

 <form id="new_contact" class="save_form" action="kontaktdetails.php?art='.$_POST['art'].'" method="post" > 
   <button class="btn" id="submit1" type="submit" name="save_close">Save and close<i class="fa fa-save-right"></i></button>
   <button class="btn" id="submit2" type="submit" name="save_next">Save and next one<i class="fa fa-save-right"></i></button>
</form>
  

Это код JS, здесь мне нужно имя или идентификатор нажатой кнопки

 $(document).on('submit', '.save_form', function (event) {
  event.preventDefault();      
//    var submitbutton = !????
  var formID = $(this).attr('id');
  var formDetails = $('#' formID);   
  var fileurl = $(this).attr('action');
  ...
  

Комментарии:

1. Почему бы не сделать $(document).on('click', 'button[type="submit"]', function() { // 'this' is button and form information is still available.. });

2. похоже $(document) , должен быть селектор идентификаторов для формы

3. @robbmj Почему вы это предлагаете?

Ответ №1:

Попробуйте привязать событие к кнопкам отправки следующим образом:

 $('.save_form').on('click', '[type=submit]', function(event) {
  event.preventDefault();
  var submitbutton = $(this).attr('id');
  var formDetails = $(this).closest('form');
  var formID = formDetails.attr('id');
  var fileurl = formDetails.attr('action');
  console.log(submitbutton);
});  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="new_contact" class="save_form" action="kontaktdetails.php?art='.$_POST['art'].'" method="post">
  <button class="btn" id="submit1" type="submit" name="save_close">Save and close<i class="fa fa-save-right"></i>
  </button>
  <button class="btn" id="submit2" type="submit" name="save_next">Save and next one<i class="fa fa-save-right"></i>
  </button>
</form>  

Комментарии:

1. Привет, способ может быть правильным, но если я использую только событие отправки, все формы будут перехватываться из этой функции !? Как я могу сделать так, чтобы в этой функции выполнялась только форма id =»new_contact» class =»save_form»?

Ответ №2:

Есть много способов сделать это, один из них — добавить обработчик событий к кнопкам, поскольку щелчок происходит перед отправкой, а затем использовать класс или что-то еще, чтобы определить, какая кнопка была нажата внутри обработчика отправки.
Таким образом, вы все равно будете перехватывать и предотвращать отправку, которая не была инициирована с помощью кнопок.

Если вам не нужно специально перехватывать отправку, вы можете просто использовать обработчик событий для кнопок вместо отправки формы

 $(document).on('click', '.save_form button', function() {
    $('.save_form button').removeClass('clicked');
    $(this).addClass('clicked');
});

$(document).on('submit', '.save_form', function(event) {
    event.preventDefault();
    var formID = $(this).attr('id');
    var formDetails = $('#'   formID);
    var fileurl = $(this).attr('action');

    var id = $(this).find('button.clicked').prop('id');
    alert(id)
});  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="new_contact" class="save_form" action="kontaktdetails.php?art='.$_POST['art'].'" method="post">
  <button class="btn" id="submit1" type="submit" name="save_close">Save and close<i class="fa fa-save-right"></i>
  </button>
  <button class="btn" id="submit2" type="submit" name="save_next">Save and next one<i class="fa fa-save-right"></i>
  </button>
</form>  

Комментарии:

1. я думаю, что в случае перезагрузки формы (например, из-за ошибок) этот способ не будет работать второй или несколько раз снова !?

2. Нет причин, по которым это не должно работать при перезагрузке формы, обработчики событий прикреплены к документу

Ответ №3:

допустим, у вас есть форма ниже,

 <form id="sForm">
      <input type="text" name="toSearch" id="toSearch" />
      <input type="submit" id="mysubmit"/>
 </form>
  

и вы хотите получить значение при отправке формы.В моем примере идентификатор ввода называется «toSearch». Просто сделайте следующее.

 $('#sForm').on("submit",function(e){
var myvar = $('#toSearch').val();
//Now you can do anything you wish with the variable myvar
//  Put more code here.

  e.preventDefault();

});
  

Значение будет получено при отправке, но вы можете изменить его на Onclick или любое другое действие.

Надеюсь, это поможет