Php – Post SELECT element value

jqueryMySQLPHP

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.

Best Answer

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.

Related Topic