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

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

Wait, so is that the working or the non-working code? And can you show the HTML? — Konerak
– 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
– 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
– Roman, Commented May 21, 2010 at 22:31

mVChr · Accepted Answer · 2010-05-21 22:53:08Z

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

edited May 21, 2010 at 22:53

answered May 21, 2010 at 22:17

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Abs Over a year ago

That's a good idea. But I think there is something wrong here. I tried the above (it should work and submit form) but it hasn't. Only the loader shows, and my firefox browser shows no indication of submitting the form. wtf is going on...Without any of these events the form submits normally.

jpabluz Over a year ago

mmm your code is not behaving as properly, are you sure the form id is exactly "action_form" ???

mVChr Over a year ago

Well, that's what its id is in the example HTML. I've implemented exactly this behavior on a commercial site that's currently live, so I'm not sure why this isn't working for you. Perhaps the problem is something different?

Konerak · Accepted Answer · 2010-05-21 22:25:56Z

2

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

answered May 21, 2010 at 22:25

Konerak

39.8k13 gold badges102 silver badges121 bronze badges

1 Comment

Abs Over a year ago

thank you very much for highlighting that :). It's a behaviour of the firefox browser that I have never come across. Just to add, it works without the submit.

jpabluz · Accepted Answer · 2010-05-21 22:08:34Z

1

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

answered May 21, 2010 at 22:08

jpabluz

1,3127 silver badges16 bronze badges

3 Comments

Abs Over a year ago

Yes, I have - that didn't seem to do anything.

Abs Over a year ago

Same thing with that too! I thought the click event was a separate thing to the submit event why are they even effecting each other?!

Roman Over a year ago

@Abs: they aren't entirely separate, return false would cancel the submit.

Biff MaGriff · Accepted Answer · 2010-05-21 22:12:28Z

0

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

answered May 21, 2010 at 22:12

Biff MaGriff

8,2619 gold badges65 silver badges100 bronze badges

Comments

Sijin · Accepted Answer · 2010-05-21 22:37:18Z

0

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

answered May 21, 2010 at 22:37

Sijin

4,54024 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

3 Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related