Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

320
Views
submit button is not working on first click

I have a submit button inside a form like-

jQuery(document).ready(function() {
      $("#VEGAS").submit(function() {
        $('#One').click(function() {
          var form_data = $("#VEGAS").serialize();
          var routeUrl = "<?= url('/') ?>/vpage";
          $.ajax({
            url: routeUrl,
            type: "POST",
            data: form_data + '&jegy=' + test,
            success: function(result) {
              $('#alert').html('successfully added!');
              $('#msg-group').delay(1000).hide('slow');
            }
          });
        });
        return false;
      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button id="One" type="submit" name="submit_5" class="submitBTN addnowBtn" value="Light Nightclub">Add Now</button>

Every thing is working fine but above button is not working on first click. How can i get rid of this issue ?

about 4 years ago · Santiago Trujillo
3 answers
Answer question

0

$('#One').click(function(){...})

should be registered in

jQuery(document).ready(function () {...})

as

jQuery(document).ready(function () {
    $('#One').click(function(){...})
});

since, in your code you are registering the $('#One').click() in $("#VEGAS").submit() therefore the $('#One').click() is registered when the $("#VEGAS").submit() gets called for the first time. Hence, in the first attemp this doesn't works but works in the second attempt.

about 4 years ago · Santiago Trujillo Report

0

Try this: you are binding click event handler for one button inside form submit hence it is binding click event handler on first click and on second click it is calling click handler. You can remove click event for button and use below jquery code HTML:

<button id="One" type="submt" name="submit_5" class="submitBTN addnowBtn" value="Light Nightclub">Add Now</button>

jQuery:

jQuery(document).ready(function () {
                $('#VEGAS').on("click",function (event) {
                    event.preventDefault();
                    var form_data = $("#VEGAS").serialize();
                    var routeUrl = "<?= url('/') ?>/vpage";
                    $.ajax({
                        url: routeUrl,
                        type: "POST",
                        data: form_data + '&jegy=' + test,
                        success: function (result) {
                            $('#alert').html('successfully added!');
                            $('#msg-group').delay(1000).hide('slow');
                         }
                    });
            }); 
about 4 years ago · Santiago Trujillo Report

0

Inside submit() the .click() is unnecessary:-

Remove $('#One').click(function () {

Use either one (either .submit() or .click())

So:-

Either

<script>
jQuery(document).ready(function () {
    $("#VEGAS").submit(function (e) {
            e.preventDefault();
            var form_data = $("#VEGAS").serialize();
            var routeUrl = "<?= url('/') ?>/vpage";
            $.ajax({
                url: routeUrl,
                type: "POST",
                data: form_data + '&jegy=' + test,
                success: function (result) {
                    $('#alert').html('successfully added!');
                    $('#msg-group').delay(1000).hide('slow');
                 }
            });
        return false;
    }); 
});//missed in your code
</script>

Or

<script>
jQuery(document).ready(function () {
    $('#One').click(function (e) {
        e.preventDefault();
        var form_data = $("#VEGAS").serialize();
        var routeUrl = "<?= url('/') ?>/vpage";
        $.ajax({
            url: routeUrl,
            type: "POST",
            data: form_data + '&jegy=' + test,
            success: function (result) {
                $('#alert').html('successfully added!');
                $('#msg-group').delay(1000).hide('slow');
             }
        });
    });
    return false;
}); //missed in your code
</script>

Note:-

if you have multiple id which are same then it's completely wrong. either covert them to class or give different id to each-one

Check your browser developer console to see all errors which are raised and rectify all of those

about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!