Post SELECT element value

Question

Hi!

I use jquery to post data to mysql.

 **In settings.php i have this short JS code:**

 $("form#submit").submit(function() {
    var fname     = $('#fname').attr('value');
    var lname     = $('#lname').attr('value'); 
 $.ajax({
  type: "POST",
  url: "settings.php",
  data: "fname="+ fname +"& lname="+ lname,
  success: function(){
   $('form#submit').hide();
   $('div.success').fadeIn();
  }
 });
return false;
});


**And this short php:**


 if (isset($_POST['fname'])){
        $fname        = htmlspecialchars(trim($_POST['fname']));
           DO SOMETHING....
 }

This is the code where the FNAME comes from: (after hit ADD image-button then posted the fname value..)

echo "......
      <form id='submit$i' method='post'><input type='hidden' name='fname' id='fname' class='text' value='$fm_linkaz'></div><input name='add'type='image' id='add' value='$fm_linkaz' src='s.png'/></form>..........";

This is work well. But i need a SELECT element, so i changed the code to:

 ......

   echo "<select name=dropdown_list id='**ONAME**'><option value''>test</option>";
   for($i=0; $i < count($myarray); $i++){
   echo "<option value='$myarray[$i]'>$myarray[$i]</option>";}echo "</select>";

   ......</form>";

This is work well, but i dont know how can i modify the JS code, to post the selected value too.
Thank u for your help.

Answer 1

To get a selected value for use

jQuery('#**ONAME**').val();

Although I'm not sure if **ONAME** is valid ID, try removing the **

Answer 2

To get the value use the

$('select[name=dropdown_list]').val();

You could also use and ID, but I think you have some invalid chars in it and I doubt this will work:

$('select#**ONAME**').val();

Anyway .val() is what you are looking for. I also suggest using val() instead of attr('value').

Answer 3

First of all the javascript code needs a few updates:

$('#fname').val() is better than $('#fname').attr('value') -- .val() will work on selects/checkboxes as well - where .attr('value') won't be reliable.

Second: the data parameter to your $.ajax() call can take a json object (which it will convert to the form string)

$.ajax({
  type: "POST",
  url: "settings.php",
  data: {
    'fname': $('#fname').val(),
    'lname': $('#lname').val(),
    'oname': $('#oname').val()
  },
  success: function(){
    $('form#submit').hide();
    $('div.success').fadeIn();
  }
});

There is a plugin that makes this much easier:

$("form").ajaxForm({
   success: function(){
     $('form#submit').hide();
     $('div.success').fadeIn();
   }
});

UPDATED:

Also - the <select> element was named "dropdown_list" - perhaps you wanted it to be submitting data as "oname" instead. Form elements use the "name" property to submit, the id property only makes css/js selectors easier to code.