passing values from javascript to 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.

on your phpfile.php use $_POST because you used <form action="phpfile.php" method="post"> let php process the logic section which is adding and not javascript — Drixson Oseña
– Drixson Oseña, Commented Oct 22, 2013 at 0:06
@DrixsonOseña, Im familiar <form action="phpfile.php" method="post">, and maybe your right that php should be the one to get for the total. but my main problem here is how can I send the exact number of qty based on how many times you clicked the button. And another scenario is that what if I clicked both. — Ritz de Guzman
– Ritz de Guzman, Commented Oct 22, 2013 at 0:11
As for starting you can always use <input type="hidden" name="qty1"> and append this using jquery, just remember put it in your form. — Drixson Oseña
– Drixson Oseña, Commented Oct 22, 2013 at 0:14

polkovnikov.ph · Accepted Answer · 2013-10-22 00:10:06Z

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()

answered Oct 22, 2013 at 0:10

polkovnikov.ph

6,6526 gold badges47 silver badges83 bronze badges

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

1 Comment

Ritz de Guzman Over a year ago

okei.. But I need to track it from the button id="result". From the id="result, that's where I will track if the buttons where clicked. And what if I had a lot of buttons to be clicked, is it still advisable to use <input type="hidden" id="qty1" name="qty1" />??

Jonast92 · Accepted Answer · 2013-10-22 00:16:16Z

1

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

edited Oct 22, 2013 at 0:16

answered Oct 22, 2013 at 0:11

Jonast92

4,9671 gold badge20 silver badges33 bronze badges

Comments

Vainglory07 · Accepted Answer · 2013-10-22 00:17:29Z

1

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

edited Oct 22, 2013 at 0:17

answered Oct 22, 2013 at 0:11

Vainglory07

5,32310 gold badges46 silver badges79 bronze badges

2 Comments

Ritz de Guzman Over a year ago

let me try it first. :)

Vainglory07 Over a year ago

sure :) in your callback function you can add $("#result").html(data); to confirm the values recieved by your php file.

Lahmizzar · Accepted Answer · 2013-10-22 01:03:39Z

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.

Collectives™ on Stack Overflow

passing values from javascript to php

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related