Adding a Click event to a submit button and then submitting the form

Question

Hello all,

I have a form with a submit button. I have attached a click event to that submit button using JQuery. Once I did this my form wasn't submitting, I thought this was because of the event I added- if I remove that click event it submits the form successfully.

I have tried giving my form an id and calling the submit function but this was not successful either. What can I do?

$('#submit_gen').click(function() {

  $('#genbtn').html('<img src="images/ajax-loader.gif" alt="loading" />');

  $('#action_form').submit(); 

});

The HTML:

<form id="action_form" action="generate.php" method="post" enctype="multipart/form-data"> 

<input id="file_upload" type="file" name="upload" onchange="file_select();"/>

<input type="text" id="overlay_input">

<div id="genbtn" class="genbtn">
<input id="submit_gen" type="submit" value="Upload">
</div>

</form>

Thanks all

Answer 1

Have you tried return true; at the end of that anonymous function?

Answer 2

When stuff like this happen to me I make a 2nd invisible button that does the submitting. Something like this.

<input id="butInvis" style="display:none;" />

Then in my javascript function on the first button click I call butInvis.Click();

Answer 3

I think a better way to do this would be to bind your custom code to the form submit itself, simply replace your code with:

$('#action_form').submit(function() {
  $('#genbtn').html('<img src="images/ajax-loader.gif" alt="loading" />');
});

Answer 4

It works in Opera, but Firefox indeed seems to refuse.

The problem appears to be the submitbutton in the genbtn div. If you hide the button, and insert the ajax-loader.gif AFTER the button, it does work. It does not work if you remove the submitbutton (replace the html), firefox appears to not submit the form anymore :)

$('#submit_gen').click(function() {
  $('#submit_gen').append('<img src="images/ajax-loader.gif" alt="loading" />');
  $('#submit_gen').hide();
  $('#action_form').submit(); 
});

Answer 5

<form id="action_form" action="generate.php" method="post" enctype="multipart/form-data"> 

<input id="file_upload" type="file" name="upload" onchange="file_select();"/>

<input type="text" id="overlay_input">

<div id="genbtn" class="genbtn">
</div>

</form>

<input id="submit_gen" type="submit" value="Upload">

Does changing the html to above work?