Search code examples
phpjqueryformspopupconfirmation

Jquery Confirmation Does Not Appear


I want to begin by saying I am extremely new to Jquery / client side scripting. I was kinda blind sided when my bosses wanted some way for customers to acknowledge form submission.

This is my jquery / header :

<head>
    <title>Access Point</title>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    <link rel="stylesheet" href="<?php echo base_url();?>css/mainstyle.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo base_url();?>css/secondarystyles.css" type="text/css"/>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $("#signinform").submit( function(e)
        {
            if (!confirm("If you click OK you will be inserted into student queue. Please take a seat and wait."))
            {
                e.preventDefault();
                return;
            }
        });
    </script>
</head>

And this is my form :

<?php echo form_open('staff_controller/agree', 'id="signinform"') ?>
            <input type="checkbox" id="agree" name="options" value="agree"<?php echo form_checkbox('options','agree') ?>I have read and understood the above <br /> <font color="#ff0000" size="3">(Please click on the box)</font></input>
            <br />
            <br />
            <br />
            <?php
                echo form_submit('submit', 'Submit'); 
                echo anchor('staff_controller/studentlogin', 'Cancel'); 
                echo form_close();
            ?>

My php script checks if the checkbox is checked (to agree to our requirements) and also checks if submit is clicked. If it is clicked then submit the values into a database. To my understand I can continue to use this style to handle my data I just want jquery in the middle to allow users to know they are submitting. I found this code out in the internet and I have no idea how to debug this. I also do plan to a jquery confirm to check if you want to "Cancel" form submission

Edit 1 :

looking at source code it "should" work :

form action="https://www.finaidtest.com/index.php/staff_controller/agree" id="signinform" method="post" accept-charset="utf-8"

and then my updated confirmation :

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script>
    $(document).on('submit', "#signinform", function(e)
    {
        if (!confirm("If you click OK you will be inserted into student queue. Please take a seat and wait"))
        {
            e.preventDefault();
            return;
        }
    });
</script>

Edit 2

Thanks to Musa it all works fine now! Thanks!!

Code :

<script src="<?php echo base_url();?>javascript/js/jquery.js" type="text/javascript"></script>
    <script>
        $(document).on('submit', "#signinform", function(e)
        {
            if (!confirm("If you click OK you will be inserted into student queue. Please take a seat and wait"))
            {
                e.preventDefault();
                return;
            }
        });
    </script>

Solution

  • You have to wait for the element to be created before you can bind an event handler to it. Use $(document).ready to ensure your element is created before you set the handler.

    $(document).ready(function(){
        $("#signinform").submit( function(e)
        {
            if (!confirm("If you click OK you will be inserted into student queue. Please take a seat and wait."))
            {
                e.preventDefault();
                return;
            }
        });
    });
    

    You could also use delegation to attach the event so you don't have to wait for the dom to be loaded

        $(document).on('submit', "#signinform", function(e){
            if (!confirm("If you click OK you will be inserted into student queue. Please take a seat and wait."))
            {
                e.preventDefault();
                return;
            }
        });