Send values from one PHP file to another with JavaScript/AJAX

Question

I have this form in a PHP file:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
    function sendPushNotification(id){
        var data = $('form#'+id).serialize();
        // $('form#'+id).unbind('submit');                
        $.ajax({                
            url: "table_ready.php",
            type: 'GET',
            data: data,
            beforeSend: function() {
            },
            success: function(data, textStatus, xhr) {
                //$('.txt_message').val("");    
            },
            error: function(xhr, textStatus, errorThrown) {
            }
        });
        return false;
    }
    </script>

    <style type="text/css">
    .bigcontainer{
        width: auto;
        margin: 0 auto;
        padding: 0;
    }
    h1{
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 24px;
        color: #777;
    }
    div.clear{
        clear: both;
    }
    ul.devices{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .smallcontainer {
        border: 2px solid #ccc;
        width: 300px;
        height: 100px;
        overflow-y: scroll; 
    }
    ul.devices li{
        float: left;
        display: inline;
        padding: 10px;
        margin: 0 15px 25px 0;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        color: #555;
    }
    ul.devices li label, ul.devices li span{
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 12px;
        font-style: normal;
        font-variant: normal;
        font-weight: bold;
        color: #393939;
        display: block;
        float: left;
    }
    ul.devices li label{
        height: 25px;
        width: 150px;                
    }
    ul.devices li .send_btn{
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0096FF), to(#005DFF));
        background: -webkit-linear-gradient(0% 0%, 0% 100%, from(#0096FF), to(#005DFF));
        background: -moz-linear-gradient(center top, #0096FF, #005DFF);
        background: linear-gradient(#0096FF, #005DFF);
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
        border-radius: 3px;
        color: #fff;
    }
    </style>
</head>

<body>

<div class="bigcontainer">
    <?php
    include_once 'include/DB_Functions.php';
    $db = new DB_Functions();

    $state = $db->checkTableState();

    if ($state != false)
        $no_of_state = mysql_num_rows($state);
    else
        $no_of_state = 0;

    if ($no_of_state > 0) {
        ?>
        <ul class="devices">
            <?php
            while ($staterow = mysql_fetch_array($state)) {
                $items = $db -> displayTable($staterow["state"]);
                ?>
                <li>
                    <form id="<?php echo $staterow["state"] ?>" name="" method="post" onsubmit="return sendPushNotification('<?php echo $staterow["state"] ?>')">
                        <h1>Τραπέζι: <?php echo $staterow["state"]; ?></h1>
                        <div class="smallcontainer">
                            <ul>
                                <?php
                                // $num_of_items = mysql_fetch_array($items);
                                while($row = mysql_fetch_array($items)){
                                    $food = Array();
                                    $quan = Array();
                                    $food[] = $row['food'];
                                    $quan[] = $row['uquantity'];

                                    foreach( $food as $index => $f){
                                        ?>
                                        <li>  
                                            <label>
                                                <?php echo $f; ?> <?php echo $quan[$index]; }?>
                                            </label> 
                                        </li>
                                        <div class="clear"></div>
                        </form>
                    </li>
                    <?php
                }
                ?>
                </ul>
            </div>
            <div class="send_container">
                <input type="hidden" name="table" value="<?php echo $staterow["state"] ?>"/>
                <input type="submit" class="send_btn" value="Send" onclick=""/>
            </div>
            <?php
        }
    } else {
        ?> 
        <li>No Users Registered Yet!</li>
        <?php
    }
    ?>
    </ul>   
</div>

</body>

</html>

I am using this function to send the value with name table, to my table_ready.php file:

<script type="text/javascript">
function sendPushNotification(id){
    var data = $('form#'+id).serialize();
    // $('form#'+id).unbind('submit');                
    $.ajax({                
        url: "table_ready.php",
        type: 'GET',
        data: data,
        beforeSend: function() {
        },
        success: function(data, textStatus, xhr) {
            //$('.txt_message').val("");    
        },
        error: function(xhr, textStatus, errorThrown) {
        }
    });
    return false;
}
</script>

For some reason it doesn't work. My knowledge of JavaScript is very bad, and I can not figure out what I am doing wrong. The table_ready.php works fine but it doesn't accept the value and so it doesn't work. Any hint on what I am doing wrong?

It would be much more clear if you write the html code result of the php. The way it prints the form it is not clear. — kilkadg
– kilkadg, Commented Aug 16, 2013 at 19:59

guiligan · Accepted Answer · 2013-08-16 20:00:59Z

1

I'm supposing you omitted part of the script (connection and query itself) and that is working correctly.

The second thing is the usage of jQuery serialize() (http://api.jquery.com/serialize/) it will convert form elements (input, textarea, select) to be sent, and your data is just inside <label>, try using some hidden fields so serialize will find and encode it to be sent to the other script.

answered Aug 16, 2013 at 20:00

guiligan

3474 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1732457 Over a year ago

The only element I am trying to sent is the value $staterow["state"], with name "table", which is a hidden input type, the whole code i am using on this file, is now posted. If i undestand correctly what yousay, then the data inside the label, are onle to be shown to the user, and not to be retrieved

guiligan Over a year ago

Ok @user1732457, now I see the problem clearly. the submit and the hidden field table are outside the form. The form is closed inside the while loop. change the </form> to include the hidden field and it should work

user1732457 Over a year ago

Thank you so very much it worked fine, I was stuck for hours.I thought it a js problem.Thnx again!

Collectives™ on Stack Overflow

Send values from one PHP file to another with JavaScript/AJAX

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related