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

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

• javascript
• jquery

• Wait, so is that the working or the non-working code? And can you show the HTML? – Konerak Commented May 21, 2010 at 22:07
• I have added the HTML, the above does not work. Only the loading icon appears and nothing is submitted as the page just stays as it is. – Abs Commented May 21, 2010 at 22:09
• Wouldn't your page go blank while the submit is in progress (as this is not an async submit? – Roman Commented May 21, 2010 at 22:31

5 Answers 5

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" />');
});

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(); 
});

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

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();

<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?