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

问题描述：

I am having a form like this

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

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

I need a click event for download button. Eg. If i click download it should submit as action.php and run $('#button').click(function(){ also. How can I do it.

答

Perform the operation on 'download' button click then trigger the form submit using 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>

</div>

答

Firstly note that <form> elements are not self closing, so your current HTML is invalid; the input elements need to be within the form itself.

Once that is fixed you can trigger() a submit event on the parent form to the #button element, like this:

$('#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>

</div>

答

You can simply submit your form by javascript, after clicking download button:

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

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

相关推荐