CODEWITHSUNDEEP
javascriptarrayspost
Paddy Hallihan
Paddy Hallihan

Reputation: 1686

Posting an array of form values from JS

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.

Upvotes: 0

Views: 61

Answers (3)

D C
D C

Reputation: 728

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/

Upvotes: 1

Andrew
Andrew

Reputation: 383

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>

Upvotes: 1

Laphaze
Laphaze

Reputation: 386

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

Upvotes: 1

Related Questions