Отправить форму с помощью определенной кнопки

Question

У меня есть страница со многими формами, и у каждой формы может быть более одной кнопки отправки, и каждая кнопка имеет некоторые действия «onclick», который указан html.

Я создал обработчик onclick через jquery для кнопок отправки, которые предотвращают действие по умолчанию и выполняют некоторую работу, но затем мне нужно отправить эту форму. Если я просто имитирую клик на кнопке - все действия, вызванные onclick, снова работают.

Любые идеи об этом?

Аннотация Пример кода:

<form> 
    <input type='submit' name='first_button' onclick='doSomething()'> 
    <input type='submit' name='second_button' onclick='doSomethingElse()'> 
<form> 

Answer 1

Почему эти представления формы? Вы можете сделать Ajax-вызов и отправить все данные на сервер, а затем перезагрузить страницу (или делать с ней все, что хотите);

$.ajax({ 
     url: "your url", 
     type: "POST/GET", 
     data: your data, 
    }).done(function() { 
     location.reload(); 
    }).fail(function (err) { 
     location.reload(); 
     alert(err.statusText); 
    }); 

Или просто попробуйте это:

function OnSubmit(e){ 
    e.preventDefault(); 
    some code here... 

    $(this).off('submit', on_submit_function); 
    $(this).submit(); 
} 

$('form').on('submit', OnSubmit); 

Answer 2

Просто позвоните referenceToFormElement.submit().

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

document.querySelector("[name=first_button]").addEventListener('click', doSomething); 
 
document.querySelector("[name=second_button]").addEventListener('click', doSomethingElse); 
 

 
function doSomething(e) { 
 
    var button = this; 
 
    e.preventDefault(); 
 
    setTimeout(function() { 
 
    alert("Submitting A!"); 
 
    button.form.submit(); 
 
    }, 1000); 
 
} 
 

 
function doSomethingElse(e) { 
 
    var button = this; 
 
    e.preventDefault(); 
 
    setTimeout(function() { 
 
    alert("Submitting B!"); 
 
    button.form.submit(); 
 
    }, 1000); 
 
}

<form> 
 
    <input type='submit' name='first_button'> 
 
    <input type='submit' name='second_button'> 
 
</form> 
 

 
<p>(NB: This won't actually submit because it is on Stackoverflow: Blocked form submission to 'http://stacksnippets.net/js' because the form's frame is sandboxed and the 'allow-forms' permission is not set.)