How to get the value of drop down list in ajax in php?

PHP code:

<select name="Department" id="Department" class="DropDown">
 <?php

     $sql = "select * from department_details";
     $exec = mysql_query($sql);

     echo "<option  value='0'>Select</option>";                                            

     while($row = mysql_fetch_array($exec))
     {  
 ?>

   <?php echo "<option value=\"".$row['DepartmentId']."\">".$row['DepartmentName']."</option> \n  "; ?> 

<?php } ?>

     <option value="other">Other</option>
   </select>

JavaScript Code:

<script>

  $("#form").submit(function(event) {

  event.preventDefault();

  var $form = $( this ),
  value1 = $form.find( 'input[name="ProfessorName"]' ).val(),
  value2 = $form.find( 'input[name="Department"]' ).val(),

  url = $form.attr( 'action' );

  var posting = $.post( url, { ProfessorName: value1, Department: value2 } );

  posting.done(function( data ) {

  $( "#result" ).empty().append( data );
  });
  });
  </script>

How to get the value of department from the drop down list using ajax without page refresh.

How to get the value of drop down list in ajax in php?

PHP code:

<select name="Department" id="Department" class="DropDown">
 <?php

     $sql = "select * from department_details";
     $exec = mysql_query($sql);

     echo "<option  value='0'>Select</option>";                                            

     while($row = mysql_fetch_array($exec))
     {  
 ?>

   <?php echo "<option value=\"".$row['DepartmentId']."\">".$row['DepartmentName']."</option> \n  "; ?> 

<?php } ?>

     <option value="other">Other</option>
   </select>

JavaScript Code:

<script>

  $("#form").submit(function(event) {

  event.preventDefault();

  var $form = $( this ),
  value1 = $form.find( 'input[name="ProfessorName"]' ).val(),
  value2 = $form.find( 'input[name="Department"]' ).val(),

  url = $form.attr( 'action' );

  var posting = $.post( url, { ProfessorName: value1, Department: value2 } );

  posting.done(function( data ) {

  $( "#result" ).empty().append( data );
  });
  });
  </script>

How to get the value of department from the drop down list using ajax without page refresh.

• javascript
• php
• jquery
• ajax

3 Answers 3

Using jquery you can try this

value2 = $("#Department").val();

To get the select value, change :

value2 = $form.find( 'input[name="Department"]' ).val(),

To

value2 = $form.find( 'select[name="Department"]' ).val(),

And because you have an id on it, you can directly make

value2 = $form.find( '#Department' ).val(),

You used input selector, but Department is a select element.

Don't forget to make your function return false;, in order to prevent the form from being submitted.

As you are using ajax, Use Jquery's Serialize

With this, you can create a text string (out of form field values) in standard URL-encoded notation, handy enough to make ajax calls.