Question

我有这样的表格

<form name="test" action="action.php" method="get">
<input type="text" />

<input type="button" value="download"/></form>

我需要点击事件来下载按钮。例如。如果单击下载，则应将其提交为action.php并同时运行$('#button').click(function(){。我该怎么办。

Answer 1

首先请注意，<form>元素不是自动关闭的，因此您当前的HTML无效； input元素必须在表单本身的内。

一旦修复，就可以将父表单上的trigger()事件submit元素#button {}

$('#button').click(function() {
  console.log('Custom logic here...');
  $(this).closest('form').trigger('submit');
});

$('form').on('submit', function(e) {
  e.preventDefault();
  console.log('Submitting form...');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="test" action="action.php" method="get">
  <input type="text" />
  <input type="submit" value="search" />
  <input type="button" value="download" id="button" />
</form>

Answer 2

点击“下载”按钮上的操作，然后使用trigger

触发表单提交

$('.download').click(function(e){
alert('downloading!')             //Your Download Logic HERE
$(this).parent().trigger('submit')//Trigger Form SUBMIT ONCE THE OPERATION IS DONE

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="test" action="action.php" method="get">
<input type="text" />
<input type="button" value="download" class="download"></form>

Answer 3

点击download按钮后，您可以通过javascript提交表单：

$('#button').click(function(){
...
    document.forms["myform"].submit();

如何在单击按钮时同时运行表单操作和单击事件

3 个答案: