Send the value of a javascript funcion, on a HTML form, into a PHP page

Question

I've got a JavaScript function, that as an array, and a HTML form that sends data to a PHP page to later send it by email. But I would also need to send the result of the JavaScript function on the form to the php page. Is this possible?

I'm currently trying the following way, but with no results:

HTML page and script :

function showcartitems() {
  var showcart = paypal.minicart.cart.items();
}

<form action="teste4.php" method="post" class="creditly-card-form agileinfo_form" onsubmit="showcartitems()">
  <section class="creditly-wrapper wthree, w3_agileits_wrapper">
    <div class="information-wrapper">
      <div class="first-row form-group">
        <div class="controls">
          <label class="control-label">Nome Completo: </label>
          <input class="billing-address-name form-control" type="text" name="name" placeholder="Nome Completo">
          <input type="hidden" name="cart" value="showcart" />
        </div>
        <div class="w3_agileits_card_number_grids">
          <div class="w3_agileits_card_number_grid_left">
            <div class="controls">
              <label class="control-label">Numero de telemóvel:</label>
              <input class="form-control" type="text" name="mobile" placeholder="Numero de telemóvel">
            </div>
          </div>
          <div class="w3_agileits_card_number_grid_left">
            <div class="controls">
              <label class="control-label">Email:</label>
              <input class="form-control" type="text" name="email" placeholder="Email">
            </div>
          </div>
          <div class="w3_agileits_card_number_grid_right">
            <div class="controls">
              <label class="control-label">Rua: </label>
              <input class="form-control" type="text" name="rua" placeholder="Rua">
            </div>
          </div>
          <div class="clear"> </div>
        </div>
        <div class="controls">
          <label class="control-label">Cidade: </label>
          <input class="form-control" type="text" name="cidade" placeholder="Cidade">
        </div>
        <div class="controls">
          <label class="control-label">Método de pagamento: </label>
          <select name="pagamento">
            <option>MBWay</option>
            <option>Transferência Bancária</option>
            <option>Multibanco (apenas para entregas ao domicílio)</option>

          </select>
        </div>
      </div>
      <button class="submit check_out">Verificar disponibilidade!</button>
    </div>
  </section>
</form>

The PHP page is still quite simple, just checking if the variables are coming correctly, they all are, except the value of the javascript function:

echo $_POST['name']; 
echo $_POST['mobile']; 
echo $_POST['email']; 
echo $_POST['rua']; 
echo $_POST['cidade']; 
echo $_POST['pagamento']; 
echo $_POST['showcart']; 
?>

Am I doing something wrong? Is there a better way to do this, or is it just impossible?

EDIT 1: Following @epascarello suggestion, I've managed to get the value into the PHP side, which is returning the following:

[{"_data":{"cmd":"_cart","add":"1","item_name":"FILA 1010302","item_image":"images/1010302-1.png","amount":99,"discount_amount":"50.00","submit":"Adicionar ao carrinho","quantity":2,"href":"http://teste/index.html#5"},"_options":[],"_discount":100,"_amount":99,"_total":98,"_eventCache":{"change":[[null,null]]}},{"_data":{"cmd":"_cart","add":"1","item_name":"FILA 1010575","item_image":"images/1010575-1.png","amount":99,"discount_amount":"50.00","submit":"Adicionar ao carrinho","quantity":1,"href":"http://teste/index.html#5"},"_options":[],"_discount":50,"_amount":99,"_total":49,"_eventCache":{"change":[[null,null]]}},{"_data":{"cmd":"_cart","add":"1","item_name":"FILA 1010707","item_image":"images/1010707-1.png","amount":99,"discount_amount":"50.00","submit":"Adicionar ao carrinho","quantity":1,"href":"http://teste/index.html#5"},"_options":[],"_discount":50,"_amount":99,"_total":49,"_eventCache":{"change":[[null,null]]}},{"_data":{"cmd":"_cart","add":"1","item_name":"FILA SCM00514","item_image":"images/scm00514-1.png","amount":99,"discount_amount":"50.00","submit":"Adicionar ao carrinho","quantity":1,"href":"http://teste/index.html#5"},"_options":[],"_discount":50,"_amount":99,"_total":49,"_eventCache":{"change":[[null,null]]}}]

I've tried several approaches with json_decode, but I'm not getting the result I seek.

I would like to split that array into, for example:

item_name=x;
item_image=x;
quantity=x;

Can someone pin point me into the right direction? Sorry for asking this, I'm new in this languages and despite my research I did not manage to get to a solution on my own.

Thank you in advance.

Check Ajax form submitting: https://stackoverflow.com/questions/1960240/jquery-ajax-submit-form — Justinas, Mar 30 '20 at 13:35
setting a JavaScript variable is not going to be sent as a form field.. — epascarello, Mar 30 '20 at 13:35
… and setting an array as value of a form field won’t work either, so I’d suggest you encode your array as JSON first. Set that JSON string as value of your hidden field, and then decode it again in the PHP script. — CBroe, Mar 30 '20 at 13:36

score 1 · Accepted Answer · answered Mar 30 '20 at 13:40

1

So you have <input type="hidden" name="cart" value="showcart" /> so you need to set the value of the field. That value does not magically reference the JavaScript value you created.

Give the input element an id, so it is easier to reference

<input type="hidden" name="cart" id="cart" />

and set the value of the input in your method that is called on submit

function showcartitems() {
  document.getElementById('cart').value = JSON.stringify(paypal.minicart.cart.items());
}

answered Mar 30 '20 at 13:40

epascarello

204,599
20
195
236

Thats exacly it! Now I do receive the string on the php side. But now how it is a string, I'm not sure how I should take care of the data. Example of the string I'm getting on php side: [{"_data":{"cmd":"_cart","add":"1","item_name":"FILA 1010302","item_image":"images/1010302-1.png","amount":99,"discount_amount":"50.00","submit":"Adicionar ao carrinho","quantity":2,"href":"http://teste/index.html#5"},"_options":[],"_discount":100,"_amount":99,"_total":98,"_eventCache":{"change":[[null,null]]}},{other entries}]. From this I will need just some value, can this be done on PHP side? – Tiago Silva Mar 30 '20 at 13:48
From what I'm reading, mabye json_decode on php side might work? @epascarello – Tiago Silva Mar 30 '20 at 13:51
I'm not been able to decode :(, if its not asking too much, could you show me a example and I will try to do the rest? @epascarello And thank you so much for the help so far! – Tiago Silva Mar 30 '20 at 14:18

score 0 · Answer 2 · answered Mar 31 '20 at 09:39

After @epascarello solution, to be able to decode de JSON string, I've followed @RaymondMutyaba suggestion which works pretty properly:

$item_name = json_decode($_POST['cart'], true)[0]["_data"]["item_name"];
$array_of_items_in_cart = json_decode($_POST['cart'], true);
$first_item_in_cart = array_of_items_in_cart[0];
$name_of_first_item_in_cart = first_item_in_cart["_data"]["item_name"];
$first_item_discount = first_item_in_cart["_discount"];

Send the value of a javascript funcion, on a HTML form, into a PHP page

2 Answers2