Getting value of select element using jquery

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.

Abdelrahman Gobarah · Accepted Answer · 2016-10-28 16:10:38Z

2

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

answered Oct 28, 2016 at 16:10

Abdelrahman Gobarah

1,5892 gold badges13 silver badges30 bronze badges

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

1 Comment

Castor C Godinho Over a year ago

Do i do the same thing for select element?

Community · Accepted Answer · 2017-05-23 12:13:33Z

1

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.

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Oct 28, 2016 at 16:17

Tyler Roper

21.7k6 gold badges35 silver badges58 bronze badges

2 Comments

Castor C Godinho Over a year ago

map function is jquery works like a charm, But when i pass it with the data JSON array, the AJAX call does not seem to work.

Castor C Godinho Over a year ago

Use of getPreventDefault() is deprecated. Use defaultPrevented instead.feedback_create_form.php TypeError: 'stepUp' called on an object that does not implement interface HTMLInputElement. r.param/e() jquery.min.js:4 xb() jquery.min.js:4 xb() jquery.min.js:4 xb() jquery.min.js:4 xb() jquery.min.js:4 r.param() jquery.min.js:4 .ajax() jquery.min.js:4 <anonymous> feedback_create_form.php:28 r.event.dispatch() jquery.min.js:3 r.event.add/q.handle()

Collectives™ on Stack Overflow

Getting value of select element using jquery

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related