將值從javascript傳遞給php

Question

HTML代碼

<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代碼

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);
    });

你能給我一些關於如何在點擊提交按鈕后將qty1，qty2和totalqty發送到我的php文件的提示。 在我將它發送到php文件之前，我需要先檢查按鈕是否已被點擊。 如果沒有，則不會將任何數量發送到phpfile。 我需要根據您點擊按鈕的次數發送確切的數量。

Answer 1

最簡單的解決辦法是添加qty為<input type="hidden" id="qty1" name="qty1" />到表單中。 它們將作為變量隱藏，並將作為表單字段發送到服務器。 要從Javascript訪問它們的值，請使用$("#qty1").value()

Answer 2

你正在尋找一種叫做AJAX的東西。

這很容易使用jQuery庫實現，但它也可以使用常規JavaScript。

如果您選擇使用jQuery實現，那么您可以查看文檔 。

這是一個基本的例子：

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

然后使用后端來處理響應，例如假設您發送一個參數對象，其中一個鍵名為foo，值為10，那么您可以像這樣獲取它（如果代碼是PHP）：

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

使用三元運算符

Answer 3

嘗試使用jquery $ .ajax或$ .post函數：

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
        }
    );
}

並在您的PHP中將收到值，只需使用$ _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'] : "";

對不起，我無法測試它，但它應該工作

有關更詳細的信息，您可以查看jQuery學習中心 - Ajax ，您可以在其中找到使用ajax和表單的有用示例。