Posting an array of form values from JS

Question

I have an ecommerce site where I can add a product to multiple categories.

I had originally created a form something like this:

<form action='parse.php' method='post'>
//other form fields
<input type='checkbox' value='category1' class='product_category' name='product_category[]'>
<input type='checkbox' value='category2' class='product_category' name='product_category[]'>
<input type='checkbox' value='category3' class='product_category' name='product_category[]'>
//other form fields
<input type="submit" value="Go Live" name="submit" id="submit">
</form>

And then when they were submitted I could get them in PHP like so:

$categories = $_POST['product_category'];
foreach ($categories as $category){//do stuff here}

However, now that the website is becoming bigger and products have more data associated with them this is taking too long to parse everything, so was going to try put a return false on my submit and post the stuff to my parse file via AJAX so that I don't have to wait for it to parse everything to reload the page and add more.

So my new form and JS looks like this:

<form action='parse' method='post'>
//other form fields
<input type='checkbox' value='category1' class='product_category' name='product_category[]'>
<input type='checkbox' value='category2' class='product_category' name='product_category[]'>
<input type='checkbox' value='category3' class='product_category' name='product_category[]'>
//other form fields
<input type="submit" value="Go Live" name="submit" id="submit" onclick="return false;">
</form>

$("#submit").on("click", function(){
    //get other variables
    var product_category = $('#product_category').val();
    var formData = new FormData();
    //append other values to formdata
    formData.append("product_category", product_category);
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
            console.log(this.responseText);
        }
    };
    xmlhttp.open("POST", "parse.php", true);
    xmlhttp.send(formData);
}

Basically my issue is I was getting an array as my posted variable and now I'm just getting a single value.

How do I get an array of all of the product categories instead of doing var product_category = $('#product_category').val(); like I'm doing for the rest of my inputs?

Sorry I know there is probably an easy way of doing this but JS is not my best language.

1. You are using the ID (#) selector for your product_category checkboxes. Even if previously "product_category" was their ID and not the class as in your current snippet jQuery returns only one element if queried by ID as it is expecting IDs to be unique. 2. As Laphaze mentioned in his answer check values of checked boxes and put them into array. — Michael
– Michael, Commented Nov 14, 2019 at 15:05

Laphaze · Accepted Answer · 2019-11-14 15:07:59Z

1

Use this for every checked checkboxes :

$("input:checkbox:checked").each(function(){
    yourArray.push($(this).val());
});

or this if you want every checkbox values :

$("input:checkbox").each(function(){
    yourArray.push($(this).val());
});

edited Nov 14, 2019 at 15:07

answered Nov 14, 2019 at 14:59

Laphaze

3861 silver badge6 bronze badges

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

Comments

Andrew · Accepted Answer · 2019-11-14 15:08:45Z

Try to use jQuery.serialize(): https://api.jquery.com/serialize/

And IMHO your markup should be as follow:

<form action='parse.php' method='POST' name="parseForm">
//other form fields
<input type='checkbox' value='category1' class='product_category' name='product_category[]'>
<input type='checkbox' value='category2' class='product_category' name='product_category[]'>
<input type='checkbox' value='category3' class='product_category' name='product_category[]'>
//other form fields
<input type="submit" value="Go Live" name="submit" id="submit">
</form>

<script>
$("form").on("submit", function(event) {
    event.preventDefault();
    let formData = ($(this).serialize());
    let xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log(this.responseText);
        }
    };
    xmlhttp.open("POST", "parse.php", true);
    xmlhttp.send(formData);
});
</script>

D C · Accepted Answer · 2019-11-14 15:23:32Z

1

Hope this would help you

   $("#submit").on("click", function(){
        var formData = [];
        $(':checkbox:checked').each(function(i){
          formData[i] = $(this).val();
        });
        console.log(formData);
       //get other variables

      /* var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
            console.log(this.responseText);
        }
      };
      xmlhttp.open("POST", "parse.php", true);
      xmlhttp.send(formData);  */
     })

Also included jsfidde link https://jsfiddle.net/divyachandana/8jgowxb9/3/

answered Nov 14, 2019 at 15:23

D C

7461 gold badge7 silver badges18 bronze badges

Collectives™ on Stack Overflow

Posting an array of form values from JS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related