CODEWITHSUNDEEP
javascriptphpjquery
TechAUmNu
TechAUmNu

Reputation: 152

jquery $.post not working unless debugging

I have simple form for updating the stock of products, it uses datatables to generate rows for all the items in the database. I can update the stock correctly using the form when I set a break point in the function, but if I remove the break point it stops working.

HTML form:

<form id="updateStock">
  <input id="Penguincard" type="text" value="200">
  <input type="submit" onclick="updateStock("Penguincard", "Penguin card");" value="Update">                            
</form>

Javascript:

function updateStock(id, item){
    var idS = "#" + id;
    var newStock = $(idS).val();
    $.post("URL",{item: item, stock: newStock},  
        function(result){           
            alert(result);
        });
    return false;
}

PHP:

<?php
ini_set('display_errors', 1);

// Adds a new item to the database
require('common.php');



if ($_SERVER["REQUEST_METHOD"] == "POST"){  
    if (empty($_POST["item"])){
        echo 'item is blank';
        exit();
    }else
    {
        $item = test_input($_POST["item"]);
        // check if item only contains letters and whitespace
        if (!preg_match("/^[a-zA-Z0-9 ]*$/",$item))
        {
            echo 'item reg';
            exit();
        }
    }
    if (empty($_POST["stock"])) {
        echo 'stock is blank';
        exit();
    }else
    {
        $stock = test_input($_POST["stock"]);
        // check if stock only contains letters and whitespace
        if (!preg_match("/^[0-9]*$/",$stock))
        {
            echo 'stock reg';
            exit();
        }
    }   

}else{
    //don't run unless post
    echo 'Not post';
    exit();
}

$stmt = $db->prepare('UPDATE `stock` SET `stock`=:stock WHERE `item`=:item');

// bind the parameters to the insert after sanitizing them
$stmt->bindParam(':item', $item);
$stmt->bindParam(':stock', $stock);




//execute the insert
$status = $stmt->execute();

if( $status ){
    echo 'Item added successfully!';
    exit();     
}


//sanitizing function
function test_input($data)
{
     $data = trim($data);
     $data = stripslashes($data);
     $data = htmlspecialchars($data);
     return $data;
}


?>

EDIT: by not working I mean it seems to run the onClick function but doesn't submit the post.

From the answers it seems that debugging was allowing the post to be submitted before the default form action occurred, therefore making it working.

Upvotes: 0

Views: 786

Answers (2)

Anthony Grist
Anthony Grist

Reputation: 38345

You're never actually suppressing the click functionality of the submit button; you return false; from the updateStock function, but that doesn't actually do anything (the onclick attributes code itself needs to be returning false. As a result the form is being submitted and the AJAX request is cancelled.

The simplest fix would be this:

<input type="submit" onclick="return updateStock('Penguincard', 'Penguin card');" value="Update">

However, it would probably be better to use jQuery to bind the event handler:

$(':submit').on('click', function(e) {
    e.preventDefault();
    updateStock('Penguincard', 'Penguin card');
});

Upvotes: 4

Jerod Venema
Jerod Venema

Reputation: 44632

This line is the issue:

onclick="updateStock("Penguincard", "Penguin card");"

The double quotes inside the attribute are the problem. Convert them to single quotes. This is one reason why people like to use the jQuery delegates to add click events.

Upvotes: 2

Related Questions