Getting value of select element using jquery - php

Question

I have the following HTML
<div class="question-set">
<div class="row question">
<div class="col-md-2">
<select class="form-control" name="type[]">
<option value="Teacher feedback">Teacher feedback</option>
<option value="Genral Question">Genral Question</option>
<option value="Informative Question">Informative Question</option>
</select>
</div>
<div class="col-md-8">
<input type="text" class="form-control" name="questions[]" placeholder="Enter the question here" />
</div>
</div>
<div class="row question">
<div class="col-md-2">
<select class="form-control" name="type[]">
<option value="Teacher feedback">Teacher feedback</option>
<option value="Genral Question">Genral Question</option>
<option value="Informative Question">Informative Question</option>
</select>
</div>
<div class="col-md-8">
<input type="text" class="form-control" name="questions[]" placeholder="Enter the question here" />
</div>
</div>
</div>
In short there is a select tag with name type[] and a text input field names questions[]. I need to pass the values to a php page as an ajax call to insert into the database. I have the following AJAX code..
$.ajax({
method: "POST",
url: "feedback_create_form_process.php",
data: {"questions": $("input[name='questions[]']").val(), "type": $("select option:selected").val()},
success: function(data){
alert(data);
}
});
Here is my PHP code
<?php
include 'con.php';
if (isset($_POST) && sizeof($_POST)) {
$question = $_POST['questions'];
$type = $_POST['type'];
echo count($question);
foreach( $question as $key => $n ) {
$result = $con->query("insert into form question(null, ".$question[$key].", ".$n.")");
}
}
?>
The count is returned as 1. It sends only the first question and not the array. I want the values in an array so i can do an insert in a loop.

Answer 1

As Documented in JQuery .Val()
Description: Get the current value of the first element in the set of matched elements.
You can use
var values = $("input[name='questions[]']").map(function(){return $(this).val();}).get();
or
var values = [];
$("input[name='questions[]']").each(function() {
values.push($(this).val());
});

Answer 2

You can make use of jQuery's map() function to return the values as an array, like so:
var questions = $("input[name='questions[]']").map(function() {return $(this).val()}).get();
var types = $("select[name='type[]']").map(function() {return $(this).val()}).get();
$.ajax({
method: "POST",
url: "feedback_create_form_process.php",
data: {"questions": questions, "type": types},
success: function(data){
alert(data);
}
});
EDIT: Realizing a similar solution was provided by ABDU_GO. I find my script to be a bit more readable, however if you find this to be your solution, I'd suggest accepting his answer.