CODEWITHSUNDEEP
jquerypost
dan5ermou5
dan5ermou5

Reputation: 113

JQuery .post function not executing properly

I'm trying to post some variables to a PHP script based whatever item the user selects, then load the selection into the current page without redirecting the user. However, when I click a button to submit data, return false doesn't fire, and I get redirected to the action specified in the form. Can someone tell me where the problem in my code is? 

 <!DOCTYPE html>
    <html>
    <head>
    <title> Today's Clients</title>

    <link href="../_css/jquery-ui.min.css">
    <script src="../_js/jquery.min.js"></script>
    <script src="../_js/jquery-ui.min.js"></script>

    <script>
    $(document).ready(function(){
        $("#clientSubmit").submit(function(event) {
            var clientInformation = $(this).serialize();
            $.post('IRCpopulatecheckin.php',clientinformation,clientForm);
            function clientForm(data) {
                if (data!='') {
                    $('#clientform').load("IRCpopulatecheckin.php");
                } else {
                    alert("your data returned nothing!!! rewrite the code...");
                }
            } // end clientForm
         return false;
        }); // end .submit
    }); // end ready

    </script>

    <style>

    /* css to style and remove everything but text */
        #hiddenInput {
                    position    :relative;
                    width       :0px;
                    height      :8px;
                    top         :-40px;
                    left        :-230px;260
                    }
        input[name="dailyClient"] {
                    background-color: white;
                    border: none;
                    font-weight :bold;
                    font-family :sans-serif;
                    font-size: 15px;  
                    color: black;
                    cursor: default;
                    line-height: normal;
                    padding: 6px;
                    text-align: center;
                    text-shadow: none;
                    white-space: pre;
                    }

        input[name="dailyClient"]:hover {
                    color: blue;
                    }
    </style>                
    <body>
    <div id="clientform"></div>

    <?php 

    ini_set('display_errors',1);  error_reporting(E_ALL);

    if(isset($_POST['DATE'])) {
        $DATE = $_POST['DATE'];
        }else{
            $DATE = date('Y-m-d');
             }

    require_once 'IRCconfig.php';

    $connection = new mysqli($db_hostname, $db_username, $db_password, $db_database);
        if ($connection->connect_error) die($connection->connect_error);

    $query  = "SELECT * FROM CLIENT_CHECKIN WHERE DATE>='$DATE' ORDER BY F_NAME ASC";
        $result = $connection->query($query);

    if (!$result) die ("Database access failed: " . $connection->error);

    $rows = $result->num_rows;

    for ($j = 0 ; $j < $rows ; ++$j)
        {
            $result->data_seek($j);
            $row = $result->fetch_array(MYSQLI_NUM);

            echo <<<_END
            <pre>
                <div id="hiddenInput"><div style="display:none">
                <form id="clientSubmit" action="IRCpopulatecheckin.php" method="post"><input id="date" type="hidden" name="DATE" value="$row[0]"><input id="first" type="hidden" name="F_NAME" value="$row[1]"><input id="middle" type="hidden" name="M_NAME" value="$row[2]"><input id="last" type="hidden" name="L_NAME" value="$row[3]"></div>
                <input type="submit" name="dailyClient" value="$row[1] $row[2] $row[3]"></form>
                </pre>
    _END;
        }

    ?>
    </body>
    </html>

Upvotes: 1

Views: 35

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195962

The problem seems to be with the fact that you create multiple forms with the same clientSubmit id. (so it most likely works correct for the first form in your page)

Id's must be unique in the page.

You should use a class if you want to apply the same functionality to multiple elements.

So change your forms to <form class="clientSubmit" action=...

and your script to

$(document).ready(function(){
    $(".clientSubmit").submit(function(event) {
        var self = $(this),
            clientInformation = self.serialize();
        $.post('IRCpopulatecheckin.php',clientinformation,clientForm);
        function clientForm(data) {
            if (data!='') {
                self.load("IRCpopulatecheckin.php");
            } else {
                alert("your data returned nothing!!! rewrite the code...");
            }
        } // end clientForm
     return false;
    }); // end .submit
}); // end ready

Upvotes: 0

Verhaeren
Verhaeren

Reputation: 1661

Rather than return false use event.preventDefault. Notice how you already have the parameter in the onsubmit:

$(document).ready(function(){
    $("#clientSubmit").submit(function(event) {
        event.preventDefault();
        var clientInformation = $(this).serialize();
        $.post('IRCpopulatecheckin.php',clientinformation,clientForm);
        function clientForm(data) {
            if (data!='') {
                $('#clientform').load("IRCpopulatecheckin.php");
            } else {
                alert("your data returned nothing!!! rewrite the code...");
            }
        } // end clientForm
    }); // end .submit
});

Upvotes: 1

Related Questions