1

I am working with a web app that whenever the user clicks the Create Purchase Order button, a form will show up, the purchase order button will be disabled when clicked and execute an insert query to the database. I've used ajax to prevent the browser from reloading whenever the button is clicked. However, my problem is that when I click the button, it didn't insert any data into the database. Is there something wrong with my code?

index.php

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>this is a test</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="bootstrap/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
    function disableCreatePoButton(form){
        form.btnCreatePo.disabled="true";
    }

    $(function(){
        $('#createPo').on('submit','', function(event){
            event.preventDefault();
            $.ajax({
                data: $('#createPo').serialize(),
                type: 'post',
                url: 'createPurchaseOrderId.php',
                //dataType: 'json',
                success: function(){
                    alert('success!');
                }
            });
        });
    });
</script>
</head>
<body>
<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>" id="createPo" onSubmit="return disableCreatePoButton(this);">
    <input type="submit" name="btnCreatePo" class="btn btn-primary" value="Create Purchase Order" id="btnCreatePo" data-toggle="collapse" data-target="#collapsePurchaseForm" aria-expanded="false" aria-controls="collapsePurchaseForm">
</form>
<div class="collapse" id="collapsePurchaseForm">
<div id="purchase_form" class="well well-default">
    <?php
        require('connect.php');
        $getMaxPOID = "SELECT max(`po_id`) AS `max_po_id` FROM `tbl_poid`";
        $getMaxPOIDResult = mysql_query($getMaxPOID);
        $maxPOIDRow = mysql_fetch_array($getMaxPOIDResult);
        $maxPOID = $maxPOIDRow['max_po_id'] + 1;
        echo '<h4>Purchase Order ID: '.$maxPOID.'</h4>';
        mysql_close($connection);
    ?>
    <h2>Add a Product</h2>
    <input type="text" placeholder="Product Name" class="form-control"><br>
    <input type="text" placeholder="Quantity" class="form-control"><br>
    <input type="text" placeholder="Description" class="form-control"><br><br>
    <button id="btnAddProduct" class="btn btn-success">Add Product</button>
</div>
</div>
<table class="table table-bordered">
<thead>
    <th>Purchase Order ID</th>
    <th>Product ID</th>
    <th>Product Name</th>
    <th>Quantity</th>
    <th>Description</th>
</thead>
<tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
</tr>
</table> 
</body>
</html>

createPurchaseOrderId.php

<?php
if(isset($_REQUEST)){
    require('connect.php');
    date_default_timezone_get('Asia/Manila');
    $date = mysql_real_escape_string(date("M d, Y h:i:s a"));
    $enc_date = md5($date);
    if(isset($_POST['btnCreatePo'])){
        $insertPOIDQuery = "INSERT INTO tbl_poid (`po_key`) VALUES ('$enc_date')";
        $insertPOIDResult = mysql_query($insertPOIDQuery);
    }
    mysql_close($connection);
}
?>
breekoy
  • 129
  • 13
  • Any error in `console`? – Tushar Jul 05 '15 at 06:09
  • I got warnings and I think that this is coming from jquery.min.js ... Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead Use of getPreventDefault() is deprecated. Use defaultPrevented instead. – breekoy Jul 05 '15 at 06:15
  • Read this - http://stackoverflow.com/questions/9866459/ajax-post-serialize-does-not-include-button-name-and-value – Roamer-1888 Jul 05 '15 at 06:17
  • Or this - http://stackoverflow.com/questions/4007942/jquery-serializearray-doesnt-include-the-submit-button-that-was-clicked – Roamer-1888 Jul 05 '15 at 06:19

0 Answers0