Dynamically send javascript value via form

Question

I don't know if it's possible, but I need to send some information across a form ou inside url come from checkbox value.

This code below is inside a products loop and create a checkbox on every products (product comparison approach).

In my case, it's impossible to make this code below across a form.

 <?php
  echo '<div><input type="checkbox" value="' . $products_id .'" id="productsCompare" title="Compare" onclick="showProductsCompare()" /> Compare</div>';
 ?>

To resolve this point, I started to use an ajax approach and put the result inside a $_SESSION

My script to for the checbox value

$(function() {
    $('input[type=checkbox]').change(function() {
        var chkArray = [];
        $('#container').html('');

        //put the selected checkboxes values in chkArray[]
        $('input[type=checkbox]:checked').each(function() {
            chkArray.push($(this).val());
        });

        //If chkArray is not empty create the list via ajax
        if (chkArray.length !== 0) {
            $.ajax({
                method: 'POST',
                url: 'http://localhost/ext/ajax/products_compare/compare.php',
                data: { product_id: chkArray }
            });
        }
    });
});

And at the end to send information on another page by this code. Like you can see there is no form in this case.

<div class="col-md-12" id="compare" style="display:none;">
    <div class="separator"></div>
    <div class="alert alert-info text-md-center">
        <span class="text-md-center">
            <button class="btn"><a href="compare.php">Compare</a></button>
        </span>
    </div>
</div>

No problem, everything works fine except in my compare.php file, I have not the value of my ajax. I inserted a session_start in ajax file But not value is inserted inside compare.php. I tried different way, include session_start() inside compare.php not work.

My only solution is to include in my products file a hidden_field and include the value of ajax across an array dynamically, if it's possible. In this case, values of hidden_fields must be under array and sent by a form.

This script must be rewritten to include under an array the chechbox value without to use the ajax. How to insert the good code?

$(function() {
    $('input[type=checkbox]').change(function() {
        var chkArray = [];
        $('#container').html('');

        //put the selected checkboxes values in chkArray[]
        $('input[type=checkbox]:checked').each(function() {
            chkArray.push($(this).val());
        });

        //If chkArray is not empty show the <div> and create the list
        if (chkArray.length !== 0) {
            // Remove ajax
            // some code here I suppose to create an array with the checkbox value when it is on true
        }
    });
});

and this code with a form

<?php
    echo HTML::form('product_compare', $this->link(null, 'Compare&ProductsCompare'), 'post');

    // Add all the js values  inside an array dynamically

    echo HTML::hidddenField('product_compare', $value_of_javascript);
?>
<div class="col-md-12" id="compare" style="display:none;">
    <div class="separator"></div>
        <div class="alert alert-info text-md-center">
            <span class="text-md-center">
                <button class="btn"><a href="compare.php">Compare</a></button>
            </span>
        </div>
    </div>
</form>

Note : this code below is not included inside the form (no change on that).

 <?php
  echo '<div><input type="checkbox" value="' . $products_id .'" id="productsCompare" title="Compare" onclick="showProductsCompare()" /> Compare</div>';
 ?>

My question is : How to populate $value_of_javascript in function of the checkbox is set on true to send the information correctly inside compare.php

If my question has not enought information, I will edit this post and update in consequence.

Thank you.

Brian Peacock · Answer 1 · 2019-04-15T14:48:16.657

0

You cannot pass JavaScript Objects to a server process. You need to pass your AJAX data as a String. You can use the JavaScript JSON.stringify() method for this...

$.ajax({
    method: 'POST',
    url : 'http://localhost/ext/ajax/products_compare/compare.php',
    data : JSON.stringify({product_id: chkArray})
});

Once that has arrived at your PHP process you can turn it back into PHP-friendly data with PHP JSON methods...

<?
    $myArray = json_decode($dataString, true);
    // ... etc ... //
?>

See:

JSON @ MDN
JSON @ PHP Manual
Example: Form Submission Using Ajax, PHP and Javascript

edited Apr 15 '19 at 14:48

answered Apr 13 '19 at 01:25

Brian Peacock

1,801
16
24

Ok, tk. But How to send the information in compare.php ? I am little lost. I saw the difference inside the ajax, but after ? – Chris Apr 13 '19 at 02:22
For that you can simply `return` the data you need, again as a String, and then parse that back into a JS Object. Search for SO question regarding send-and-return with JS Fetch API. – Brian Peacock Apr 13 '19 at 04:53
@Chris Ignore the comment above: Looking at it again I think you may be confusing the domains of PHP and JavaScript here - JavaScript is client-side, PHP is server-side. See [this SO question](https://stackoverflow.com/q/406316/4746328) about how you can send data to and from a php process. – Brian Peacock Apr 13 '19 at 05:02
Preacock. I think it's possible to display the value on th products_id when we click on the checkbox. In this case, it's not possible to put this element inside a array and send this array ? But how to make that ? – Chris Apr 13 '19 at 13:00
@Chris As I said. You need to turn your JS data Object, the array `chkArray`, into a String. Then send that data to your server-side PHP process, and then turn it back into useful data which PHP can use. I'll edit an example into my answer. – Brian Peacock Apr 15 '19 at 14:32

Dynamically send javascript value via form

1 Answers1