将值从javascript传递给php

Question

HTML CODE

<form action="phpfile.php" method="post">
    <input type="button" id="id1">
    <input type="button" id="id2">
    <input type="submit">
</form>

<div id="result"></div>

JAVASCRIPT CODE

qty1=0;
qty2=0;
totalqty=0;


    $("#id1").click(function(){

        qty1=qty1+1;
        totalqty=totalqty+1;
        $("#result").html(qty1);
    });

    $("#id2").click(function(){
        qty2=qty2+1;
        totalqty=totalqty+1;
        $("#result").html(qty2);
    });

Can you give me some tips on how I can send the qty1, qty2 and totalqty to my php file, after I click the submit button. Before I send it to the php file, I need to check first if the button is already clicked. If not, no qty will be send to the phpfile. I need to send the exact number of qty based on how many times you clicked the button.

Answer 1

The easiest solution would be to add qty as <input type="hidden" id="qty1" name="qty1" /> to your form. They will be invisible as your variables, and will be sent to the server as form fields. To access their values from Javascript, use $("#qty1").value()

Answer 2

You're looking for something called AJAX .

This is easy to implement using the jQuery library, but it's also available using regular JavaScript.

If you choose to use the jQuery implementation then your can look at the documentation .

Here's a basic example:

$.ajax({
    type : 'post',
    url : 'target.php',
    dataType : 'json',
    data  : {
       'foo' : 10
   }
}).done(function()
{
    $(this).addClass("done");
});

You then use the back-end to handle the response, let's for example assume that you send an object of parameters whera one key is named foo and the value is 10, then you could fetch it like this (if the code is PHP):

$foo = isset($_POST['foo']) ? $_POST['foo'] : "";

Using the ternary operator

Answer 3

try using jquery $.ajax or $.post function:

qty1=0;
qty2=0;
totalqty=0;

$("#id1").click(function(){
    qty1=qty1+1;
    totalqty=totalqty+1;
    $("#result").html(qty1);

    get_values(qty1);
});

$("#id2").click(function(){
    qty2=qty2+1;
    totalqty=totalqty+1;
    $("#result").html(qty2);

    get_values(qty2);
});

function get_values(qty_val) {
    $.post(
        'get_values.php', // url of your php who will receive the values
        { post_variable_name: qty_val }, // your post variables here
        function(data) {
            // call back function
            $("#result").html(data); // see what does your get_value.php echoes via html
            console.log(data); // see it via console in inspect element
        }
    );
}

and in your php that will recieve the values, just retrieve using $_POST:

<?php
$qty_val = '';
if(isset($_POST['post_variable_name'])) {
   $qty_val = $_POST['post_variable_name'];
   echo $qty_val;
}
?>

Answer 4

HTML

<form>
    <input name="id1" type="button" id="id1" />
    <input name="id2" type="button" id="id2" />
    <input type="submit" />
</form>
<div id="status"></div>

JS

qty1=0;
qty2=0;
totalqty=0;

$("#id1").click(function(){
    qty1=qty1+1;
    totalqty=totalqty+1;
    $("#result").html(qty1);
});

$("#id2").click(function(){
    qty2=qty2+1;
    totalqty=totalqty+1;
    $("#result").html(qty2);
});


$( "form" ).submit(function( event ) {
    // prevent the default event
    event.preventDefault();

    // check first if the totalqty. You can add more checks here
    if ( totalqty === 0 ) {

        // usually show some kind of error message here
        alert('No quantity selected!');

        // this prevents the form from submitting
        return false;
    } else {
        $.ajax({
            type: 'post',
            url: 'phpfile.php',
            dataType: 'json',
            data: {
                quantity1: qty1,
                quantity2: qty2,
                totalQuantity: totalqty
            }
        }).done(function(data) {
            console.log(data);

            alert( "success" );

            $('#status').html("Successfully saved!");
        }).fail(function() {
            console.log(data);

            alert( "error" );

            $('#status').html("Successfully saved!");
        });
    }
});

PHP

$qty1 = isset($_POST['quantity1']) ? $_POST['quantity1'] : "";
$qty2 = isset($_POST['quantity2']) ? $_POST['quantity2'] : "";
$total = isset($_POST['totalQuantity']) ? $_POST['totalQuantity'] : "";

Sorry, i can't test it, but it should work

For more detailed you could have a look to the jQuery Learning Center - Ajax where you can find useful examples to work with ajax and forms.