JavaScript Array not posting to PHP file using Ajax

Question

I have a JavaScript array which is taken from a html form which are Checkboxes. I am using name = "DayChosen[]" to get the data into an array that I can pass into to Ajax. I know the data is going into array as I log it into the console, but it just seems to be lost when at the PHP page. I am trying to gather the selected items and open a new page and post the data to this page.

I have tried to encode it to json and then decode it with PHP, but I keep getting a null value. I have tried using JSON also but still did not work.

I have used var_dump to find that i is returning a null value.

   <form> 
    <input type = "checkbox" class="CourseDay" name = "DayChosen[]"  value = "Legal"><i class="checkbox-pposition DayChosen">Legal Module</i><br>        
    <input type = "checkbox" class="CourseDay" name = "DayChosen[]"  value = "Day 1"/><i class="checkbox-pposition DayChosen">Day 1</i><br>
    <input type = "checkbox" class="CourseDay" name = "DayChosen[]"  value = "Rodent"/><i class="checkbox-pposition DayChosen">Day 2 Rodent</i><br>
    <input type = "checkbox" class="CourseDay" name = "DayChosen[]"  value = "Large animal"><i class="checkbox-pposition DayChosen">Day 2 Large animal </i><br>
    <input type = "checkbox" class="CourseDay" name = "DayChosen[]"  value = "Aquatic"><i class="checkbox-pposition DayChosen">Day 2 Aquatic</i><br>
    <input type = "checkbox" class="CourseDay" name = "DayChosen[]"  value = "Wildlife"><i class="checkbox-pposition DayChosen">Day 2 Wildlife</i><br>

<select class="Register-Multiple form-control">
     <option disabled selected value > -- Select number of Students to Register -- </option>
  <?php 
      for ($x = 1 ; $x <= 10; $x++) {
         echo '<option value = '.$x.'>'.$x.'</option>';
      } 
  ?>
</select>

     <input type="submit" id = "Register" class="col-6 text-center btn btn-primary Register" value="Register">
  </form>



  <script type="text/javascript">




  $('.Register-Multiple').on('change', function (e){



var courses = [];
$("input[type=checkbox]:checked").each ( function() {
      courses.push($(this).val());
      console.log($(this).val());

});


$.ajax({
       type: "POST",
       url:  '../../wp-content/themes/traffica/Multiple- 
registration.php',
       data: {courses:courses}, // serializes the form's elements.
       success: function(data)
       {

          console.log(data);

              window.open('../../wp- 
content/themes/traffica/Multiple-registration.php');
       }

     });

});

Can you share what is shown in the browser network inspector for this request? Just to check if the request body is there and how its being sent. — Guilherme Assemany
– Guilherme Assemany, Commented Apr 19, 2019 at 13:03
You have a typo. Just remove the closing </form> tag after the last input element — Recep Karadas
– Recep Karadas, Commented Apr 19, 2019 at 13:09
The form tag I pasted in by mistake. I will edit this. everything else works I Ajax just does not seem to post the Array. ALso, there is nothing showing in the Network tab — Brian Nowlan
– Brian Nowlan, Commented Apr 19, 2019 at 13:13

Hafiz Adil · Accepted Answer · 2019-04-22 08:48:53Z

1

You missing on change function closing brackets

Please add closing brackets of on change function

And Please add thees code and run it

$('.Register-Multiple').on('change', function (e){
    var courses = [];
    $("input[type=checkbox]:checked").each ( function() {
       courses.push($(this).val());
       console.log($(this).val());

     });

      console.log(courses);

       $.ajax({
           type: "POST",
           url:'sample.php',
           data: {courses:courses}, // serializes the form's elements.
           success: function(data)
           {

                console.log(data);
           }

      });
});

And php file use to get array

print_r($_POST['courses']);

edited Apr 22, 2019 at 8:48

answered Apr 19, 2019 at 13:29

Hafiz Adil

611 silver badge6 bronze badges

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

1 Comment

Brian Nowlan Over a year ago

I had the closing brackets in the original code I stupidly didn't include it in the sample.

Creative87 · Accepted Answer · 2019-04-19 13:26:26Z

0

Array can be passed by two methods

//first is serialize
$result = serialize($array);
//second method 
$result = json_encode($array);

In your case json may fail if the array have non UTF8 string or some other issue then you may use serialize insted If you prefer json so you may check char set as UTF8
Give it try and check error.log for any output

answered Apr 19, 2019 at 13:26

Creative87

1259 bronze badges

3 Comments

Creative87 Over a year ago

What you have in error.log ? Or do you have proxy server like nginx or varnish ?

Brian Nowlan Over a year ago

I can get the array now when log it into the console using console.log(data); in the success function but when it triggers window.open('../../wp-content/themes/traffica/Multiple-registration.php'); it looses the value

Creative87 Over a year ago

I understand but you should know that window.open is sometimes blocked by browser especially Firefox and chrome causes this function used by auto popup ads type to force browser to open additional pages witch is advertising pages so I think it has been blocked by browser

Collectives™ on Stack Overflow

JavaScript Array not posting to PHP file using Ajax

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related