How to do a Ajax Form Post with same Name elements?

Question

So I have a part of my form has the same 'Name' values that is going to be stored as an Array.

What I'm trying to do is to send the values into an AJAX and then to PHP to update my database.

The problem here is that I'm not sure on how to send the same input name values into the AJAX and allow my PHP to access these values.

Code is shown below.

EDIT: Note, I'm building a phonegap application so I cannot directly send the form to my php script.

EDIT 2: Added my php script explaining how the information is going to be handled.

HTML:

<form method="post">

    .
    . Other Input Forms
    .

    Subject: <br>
    <select id="pref_subject[]" name="pref_subject[]">
    <option value="0">Choose a Subject </option>
    <option value="1">English</option>
    <option value="2">A Math</option>
    <option value="3">E Math</option>
    <option value="4">Combined Science</option>
    </select>

    Subject: <br>
    <select id="pref_subject[]" name="pref_subject[]">
    <option value="0">Choose a Subject</option>
    <option value="1">English</option>
    <option value="2">A Math</option>
    <option value="3">E Math</option>
    <option value="4">Combined Science</option>
    </select>

    Subject: <br>
    <select id="pref_subject[]" name="pref_subject[]">
    <option value="0">Choose a Subject </option>
    <option value="1">English</option>
    <option value="2">A Math</option>
    <option value="3">E Math</option>
    <option value="4">Combined Science</option>
    </select>

    .
    . Other Input Forms
    .

    <button id="submit">Submit</button>
</form>

JQuery/Javascript:

$(document).ready(function(){

  $("#submit").on("click", function(e){
    e.preventDefault();

    $.ajax({
            url: serverURL + "/php/sendRequestProcess.php", 
            type:"POST", 
            data:{
                sd_given_name : $("#sd_given_name").val(),
                sd_family_name : $("#sd_family_name").val(),
                sd_email : $("#sd_email").val(),
                gender : $("#gender").val(),
                pref_edu_level : $("#pref_edu_level").val(),
                pref_subject :  $("#pref_subject[]").val(),
                pref_area : $("#pref_area").val(),
                estate : $("#estate").val(),
                requestPrice : $("#requestPrice").val(),
                lesson_hrs : $("#lesson_hrs").val(),
                lesson_amt : $("#lesson_amt").val()
            }
          })

  });

});

PHP:

Before the posting the values of 'pref_subject' I will be posting the other values in the Request table in order to the 'last_id'.

After getting the last id, I will then post the 'pref_subjects' into a second table.

    $connection = mysqli_connect($servername, $username, $password, $dbname);

  // Check connection
  if ($connection->connect_error) {
    die("Connection failed: " . $connection->connect_error);
  }

  $sd_given_name = addslashes($_POST["sd_given_name"]);
  $sd_family_name = addslashes($_POST["sd_family_name"]);
  $sd_email = $_POST["sd_email"];
  $gender = $_POST["gender"];
  $pref_edu_level = $_POST["pref_edu_level"];
  $pref_area = $_POST["pref_area"];
  $estate = $_POST["estate"];
  $requestPrice = $_POST["requestPrice"];
  $lesson_hrs = $_POST["lesson_hrs"];
  $lesson_amt = $_POST["lesson_amt"];

  $request_id;
  $pref_subject = $_POST["pref_subject"];

  $newRequest = "INSERT INTO Request (SD_Given_Name, SD_Family_Name, SD_Email, Gender, 
                               Pref_Edu_Level_ID, Pref_Area_ID, Estate, 
                               Request_Price, Lesson_Hrs, Lesson_Amt) 
          VALUES ('$sd_given_name', '$sd_family_name', '$sd_email', '$gender', 
                   $pref_edu_level, $pref_area, '$estate',
                   $requestPrice, $lesson_hrs, $lesson_amt)";



  if ($connection->query($newRequest) === TRUE) {
    $request_id = $connection->insert_id;
    //echo "New record created successfully. Last inserted ID is: " + $last_id;
  } 

  else {
    echo "Error: " . $newRequest . "<br>" . $connection->error;
  }

  for ($i = 0; $i < count($pref_subject); $i++) {
    if ($pref_subject[$i] > 0) {
      $addSubject = "INSERT INTO Request_Subject (Request_ID, Subject_ID)
      VALUES ($request_id, $pref_subject[$i])";

      $sendSubject = ($connection->query($addSubject));

      if ($sendSubject === FALSE) {
        echo "Error: " . $addSubject . "<br>" . $connection->error;
      }
    }
  }

  $connection->close();

Answer 1

You can send the same input name values into the AJAX

$("#submit").on("click", function(e){

    var form_data = $('#frm_id').serialize();
    $.ajax({
        type: "POST",
        url: serverURL + "/php/sendRequestProcess.php",
        data: form_data,
        dataType: "json",
        success: function(response){
            //data - response from server
        error: function (jqXHR, textStatus, errorThrown)
        {

        }
    });

});

form_data : can be an array or name value pairs.

success : callback function is called when the AJAX POST is successful

error : callback function is called when the AJAX POST is failed

To handle JSON data, set dataType=”json”