Блог

Главная - Вопросы по программированию - Как отправить форму при нажатии другой кнопки

Как отправить форму при нажатии другой кнопки

#javascript #html

Вопрос:

У меня есть Save кнопка, которая по умолчанию отправляет форму. Однако мне нужно (в некоторых обстоятельствах, которые опущены в этом вопросе) вместо этого открыть диалоговое окно при нажатии этой Save кнопки. Внутри этого диалогового окна Yes кнопка вкл. отправит форму. Проблема, с которой я борюсь в настоящее время, заключается в применении функции «отправить» формы к кнопке.

 form = document.getElementsByClassName('form_submit')[0];
formSubmitFunc = form.onSubmit;

// prevent the form from submitting normally, this will be done by the dialog
form.addEventListener('submit', function(event) {
  event.preventDefault();
});

confirmDlgConfirmBtn.on('click', function() {
  console.log('yes');
  formSubmitFunc();
});

confirmDlgCancelBtn.on('click', function() {
  console.log('no');
  confirmDlg.hide();
})

saveButton.on('click', function() {
  saveButton.disabled = false;
  console.log('save');
  confirmDlg.show();
});

Всякий раз , когда я нажимаю на confirmDlgConfirmBtn , вместо отправки формы, как ожидалось, я получаю сообщение об ошибке, которое гласит:

Неперехваченная ошибка типа: o не является функцией at …

Я также попытался настроить formSubmitFunc = form.submit; среди многих других, но, похоже, не могу выполнить функцию отправки формы по умолчанию при confirmDlgConfirmBtn нажатии. Есть какие-нибудь идеи?

Ответ №1:

Я в основном предполагаю здесь, но я думаю, что ваша проблема заключается в

 // prevent the form from submitting normally, this will be done by the dialog
form.addEventListener('submit', function(event) {
  event.preventDefault();
});

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

Вместо этого попробуйте предотвратить событие по умолчанию в прослушивателе нажатия кнопки. Я также не совсем уверен в том, как вы отправляете форму. Попробуйте отправить его напрямую с submit() помощью метода

 form = document.getElementsByClassName('form_submit')[0];


confirmDlgConfirmBtn.on('click', function() {
  console.log('yes');
  form.submit(); // using submit function
  confirmDlg.hide(); // you probably also want to hide the dialog when the form is submitted
});

confirmDlgCancelBtn.on('click', function() {
  console.log('no');
  confirmDlg.hide();
})

saveButton.on('click', function(e) {
  e.preventDefault(); // preventing the form submit here should work
  saveButton.disabled = false;
  console.log('save');
  confirmDlg.show();
});

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

1. Да, это был ответ, который мне был нужен, чтобы решить мою проблему. Спасибо!

Ответ №2:

Вы должны быть в состоянии сделать это только с помощью HTML, например:

 <form id='myForm'>
  ...
</form>

<input type='submit' form='myForm'>

Ответ №3:

Вы можете сделать это с помощью jquery

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Submit Form</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("#saveBtn").click(function(){        
        $("#myForm").submit(); // Submit the form
    });
});
</script>
</head>
<body>
    <form action="/examples/html/action.php" method="post" id="myForm">
        <label>First Name:</label>
        <input type="text" name="first-name">
        <button type="button" id="submitBtn">Submit Form</button>
    </form>
  <button type="button" id="saveBtn">Save</button>
</body>
</html>

Ознакомьтесь с документом для получения дополнительных указаний
кликните сюда

Метки: