jQuery/js submit form on click

Question

I can't submit the form after disable the submit button. I make a jquery code to prevent multiple submit it's work but the form doesn't send the POST request.

jQuery:

$(document).ready(function() { 
var enblereg = function(e) {
    $(e).removeAttr("disabled");
}

$("#goRegister").click(function() {
$(this.form).submit();
    var reg = this;
    $('#reg').submit();
    $(this).attr("disabled", true);
    setTimeout(function() { enblereg(reg) }, 2000);
});
});

php:

<?php if (isset($_POST['goRegister'])) { echo "send";} ?>
    <form action="?" method="POST" id="reg">
        <h6>Full Name: <?php echo $fnamerr; ?></h6>
        <input type="text" name="fname" value="<?php echo $fullname;?>">
        <h6>Email: <?php echo $emailerr; ?></h6>
        <input type="text" name="email" value="<?php echo $email;?>">
        <h6>Re-enter Email: <?php echo $aemailerr; ?></h6>
        <input type="text" name="aemail" value="<?php echo $aemail;?>">
        <h6>password: <?php echo $passworderr; ?></h6>      
        <input type="password" name="password">
        <h6>Re-enter password: <?php echo $apassworderr; ?></h6>        
        <input type="password" name="apassword">
        <h6>Birthday: <?php echo $bdayerr;?></h6>   
        <?php include ("/incs/birthdayinc.php");?>
        <h6>Gender: <?php echo $gendererr; ?></h6>
        <input type="radio" name="gender" value="female"><font size="1"><b>Female</b></font>
        <input type="radio" name="gender" value="male"><font size="1"><b>Male</b></font><br>
        <input type="submit" name="goRegister" id="goRegister" value="Register">
      </form>

without the jQuery the post work, I tried to solve it with "ONCLICK":

this.form.submit() - doesn't work

what should I need to add in jQuery to submit the form before disable the submit button ?

Your problem is that you are trying not to use the jQuery features, and you are trying to use plain Vanilla JavaScript. You'll find that it won't always work the way you thought it would. I suggest not using jQuery at all if you are interested in JavaScript. — Ryan
– Ryan, Commented Jun 24, 2014 at 21:12
@RPM, jQuery is nothing but JavaScript... that's not really his problem. — Sparky
– Sparky, Commented Jun 24, 2014 at 21:15
Vanilla Javascript (library/framework free javascript.) is different than the abstraction jQuery provides in it's framework. — Ryan
– Ryan, Commented Jun 24, 2014 at 21:16
@RPM, lol... if you say so. JavaScript is JavaScript. jQuery is a JavaScript Framework. — Sparky
– Sparky, Commented Jun 24, 2014 at 21:17
Do you not understand what I am trying to express with the words I've typed? It is a fact that writing JavaScript without a framework is different than using jQuery. — Ryan
– Ryan, Commented Jun 24, 2014 at 21:18

Afzaal Ahmad Zeeshan · Accepted Answer · 2014-06-24 20:46:57Z

1

I think the jQuery code for the process would be like this

$(this.form).submit();

This would submit the form for you. If it doesn't actually trigger the event. Then you can capture the form and submit it directly using the id of it.

id="reg"

So, it would be

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

answered Jun 24, 2014 at 20:46

Afzaal Ahmad Zeeshan

15.9k14 gold badges61 silver badges106 bronze badges

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

3 Comments

Afzaal Ahmad Zeeshan Over a year ago

Then trigger the submit for the form, using its own ID.

user3746250 Over a year ago

I tried this $('#reg').submit(); and its not work the php doesnt sho the err msg when I post the form emty if I remove the jQuery the php code work .

Afzaal Ahmad Zeeshan Over a year ago

You need to check the value too, something like this if($('somefield').val() == '') { alert('sorry, input the value first'); } . This is a conditional field, used to check for the values of the inputs.

Kylie · Accepted Answer · 2014-06-24 21:08:22Z

0

Do this... The form has id of #reg. So simply use $('#reg').submit();

$("#goRegister").click(function() {
  var reg = this;
  $('#reg').submit();
  $(this).attr("disabled", true);
  setTimeout(function() { enblereg(reg) }, 2000);
 });

EDIT

Updated for ajax submit

 $("#goRegister").click(function() {
  var reg = $(this);
  var form = $('#reg').serialize();
  var url = "Whereveryouareposting.php";
  //Submit ajax form
  $.post(url,form,function(data){
     //This is where you could send back error messages or success from the server
     // To dictate wether to hide the button, or display errors.
     // Ie On success....do this...

     $(this).attr("disabled", true);
     setTimeout(function() { enblereg(reg) }, 2000);

     // On error, send a message packet with the errors, and loop through it to attach error 
     //messages to fields
  });

 });

edited Jun 24, 2014 at 21:08

answered Jun 24, 2014 at 20:49

Kylie

11.8k11 gold badges51 silver badges81 bronze badges

8 Comments

Sterling Archer Over a year ago

Do what? Are you going to explain why this should work?

Kylie Over a year ago

Isnt it kinda self explanatory. The form, named #reg, is now being submitted

Sterling Archer Over a year ago

If it was self explanatory the OP wouldn't have asked the question ;)

user3746250 Over a year ago

It's is not working .. when I post the form without filing the fields the php code doesn't show me the err msg i created if the form post empty ..

Kylie Over a year ago

@RUJordan I meant, the answer I posted is kinda self exlanatory. Meaning it kinda speaks for itself. First the code had no submit(), now it does

|

Collectives™ on Stack Overflow

jQuery/js submit form on click

2 Answers 2

3 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related