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=".12.4/jquery.min.js"></script>
<button id="One" type="submit" name="submit_5" class="submitBTN addnowBtn" value="Light Nightclub">Add Now</button>

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

• javascript
• jquery
• ajax

• 1 Where do you call that button click, I cant find anything that match your html and jquery together. You also seem to have a click event inside a submit event – Carsten Løvbo Andersen Commented Mar 6, 2017 at 7:20
• This function should never be called as per to your code – Muhammad Usman Commented Mar 6, 2017 at 7:21
• I have edited the code the button id was incorrect – Muhammad Sipra Commented Mar 6, 2017 at 7:22
• 1 click function is not required inside submit function, submit function is enough to submit the form – Deep 3015 Commented Mar 6, 2017 at 7:22
• 1 You kept click function inside Submit function that's why you needed twice click. Button type is submit that's why first click triggering submit and creating scope for button click when you clicking second time then it triggering. You should keep click function outside of submit function in this scenario. – Hanif Commented Mar 6, 2017 at 7:35

4 Answers 4

$('#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.

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

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

  var routeUrl = "<?= url('/') ?>/vpage";

Here is the error. use static path here.

<script>
        $(document).ready(function () { 
            $("#VEGAS").submit(function () {

                    var form_data = $("#VEGAS").serialize();
                    var routeUrl = "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>