submit button is not working on first click

Question

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 ?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

  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>