Question

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

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