AJAX not posting dropdown list items to PHP script

S

SilverNodashi

Expert Member
Joined
Oct 12, 2007
Messages
3,340
Reaction score
48
Location
Johannesburg, South Africa
Hi,

I hope someone can help me. I am trying to post drop down selection code to a PHP scrip using AJAX, but it's not being sent to the PHP script.

Here's the AJAX code:

JavaScript: 
<script>
    function createNew() {
    $("#add-more").hide();
    var data =
        `<tr class="table-row" id="new_row_ajax">
            <td contenteditable="true" id="username" onBlur="addToHiddenField(this,\'username\')" onClick="editRow(this);"></td>
            <td contenteditable="true" id="password" onBlur="addToHiddenField(this,\'password\')"onClick="editRow(this);"></td>
            <td contenteditable="true" id="email" onBlur="addToHiddenField(this,\'email\')" onClick="editRow(this);"></td>
            <td contenteditable="true" id="status" onBlur="addToHiddenField(this,\'status\')" onClick="editRow(this);"><select name="status"><option>Active</option><option>Inactive</option></select></td>
            <td contenteditable="true" id="branch" onBlur="addToHiddenField(this,\'branch\')" onClick="editRow(this);"></td>
            <td contenteditable="true" id="own_apps" onBlur="addToHiddenField(this,\'own_apps\')" onClick="editRow(this);"><select name="own_apps"><option value="No">No</option><option value="Yes">Yes</option></select></td>
            <td contenteditable="true" id="branch_apps" onBlur="addToHiddenField(this,\'branch_apps\')" onClick="editRow(this);"><select name="branch_apps"><option value="No">No</option><option value="Yes">Yes</option></select></td>
            <td contenteditable="true" id="all_apps" onBlur="addToHiddenField(this,\'all_apps\')" onClick="editRow(this);"><select name="all_apps"><option value="No">No</option><option value="Yes">Yes</option></select></td>
            <td>
                <input type="hidden" id="username" />
                <input type="hidden" id="password" />
                <span id="confirmAdd">
                    <a onClick="addToDatabase()" class="ajax-action-links">Save</a> /
                    <a onclick="cancelAdd();" class="ajax-action-links">Cancel</a>
                </span>
            </td>
        </tr>`;
    $("#table-body").append(data);
}
    function cancelAdd() {
        $("#add-more").show();
        $("#new_row_ajax").remove();
    }
    
    function editRow(editableObj) {
  $(editableObj).css("background","#FFF");
}
    function addToDatabase() {
      var username = $("#username").val();
      var password = $("#password").val();
      var email = $("#email").val();
      var status = $("#status").val();
      var branch = $("#branch").val();
      var own_apps = $("#own_apps").val();
      var branch_apps = $("#branch_apps").val();
      var all_apps = $("#all_apps").val();
      
      
          $("#confirmAdd").html('<img src="loaderIcon.gif" />');
          $.ajax({
            url: "users_add.php",
            type: "POST",
            data:'username='+username+'&password='+password+'&email='+email+'&status='+status+'&branch='+branch+'&own_apps='+own_apps+'&branch_apps='+branch_apps+'&all_apps='+all_apps,
            success: function(data){
              $("#new_row_ajax").remove();
              $("#add-more").show();         
              $("#table-body").append(data);
            }
          });
    }
    function addToHiddenField(addColumn,hiddenField) {
        var columnValue = $(addColumn).text();
        $("#"+hiddenField).val(columnValue);
    }
</script>


The users_add.php script has the following debug code:

PHP: 
$DEBUG = 'Off'; // On or Off
if ($DEBUG =='On'){
  echo '<table>';
  echo "<pre>";
print_r($_POST);
echo "</pre>";
echo "</table>";
}


And this is the output when submitting the form data:

Code: 
Array
(
    [username] => John
    [password] => Doe
    [email] => [email protected]
    [status] => ActiveInactive
    [branch] => HeadOffice
    [own_apps] =>
    [branch_apps] =>
    [all_apps] =>
)


I also added a debut routine to see what the SQL command would like like, and somehow the two select options get concatenated but I can't see how / where?


Rich (BB code): 
INSERT INTO users (username,password,email,status,branch,own_apps,branch_apps,all_apps) VALUES ('John','Doe','[email protected]','ActiveInactive','HeadOffice','','','')



Does anyone know what would cause this?
 
you are referencing the selects by id e.g. `var own_apps = $("#own_apps").val();` , but those selects dont have id's, only names
 
_kabal_ said:
you are referencing the selects by id e.g. `var own_apps = $("#own_apps").val();` , but those selects dont have id's, only names
Click to expand...
Are you referring to this?

HTML: 
<select name="status"><option>Active</option><option>Inactive</option></select>

I did try it with an id tag before as well, but then then ActiveInactive part doesn't even get posted to the PHP script.

This is what I had before:

HTML: 
<select name="status" id="status"><option>Active</option><option>Inactive</option></select>

OR should I do it differently?
 
if you want to use # selector eg $("#own_apps").val();, then the input/select must have a corresponding ID

if you do:
HTML: 
<select name="status" id="status"><option>Active</option><option>Inactive</option></select>

$("#status").val();

then this also won't work, because your <option> have no values


this will work:

HTML: 
<select name="status" id="status"><option value="on">Active</option><option value="off" selected>Inactive</option></select>

var status = $("#status").val(); //value will be "off"
 
_kabal_ said:
if you want to use # selector eg $("#own_apps").val();, then the input/select must have a corresponding ID

if you do:
HTML: 
<select name="status" id="status"><option>Active</option><option>Inactive</option></select>

$("#status").val();

then this also won't work, because your <option> have no values


this will work:

HTML: 
<select name="status" id="status"><option value="on">Active</option><option value="off" selected>Inactive</option></select>

var status = $("#status").val(); //value will be "off"
Click to expand...


Thanx

I am using some code I found on the web. Ajax / Java isn't my strong point, as you might have guessed ;)

What would be the right way to do this, so that I can have a drop down with multiple options? I understand what you're saying with the "on" / "off" options, but that obviously won't work for the say 5 options.


EDIT:

Ok, so I guess .val() does an evaluation, instead of getting the value of the field?
 
_kabal_ said:
this will work:

HTML: 
<select name="status" id="status"><option value="on">Active</option><option value="off" selected>Inactive</option></select>

var status = $("#status").val(); //value will be "off"
Click to expand...
I used this code, but it still concatenated the Active and Inactive options, when I don't select anything (i.e. I accept that the drop down, on Inactive is fine)

Rich (BB code): 
Array
(
    [username] => Joe
    [password] => Soap
     => [email protected]
    [status] => ActiveInactive
    [branch] => Home
    [own_apps] =>
    [branch_apps] =>
    [all_apps] =>
)
1 INSERT INTO users (username,password,email,status,branch,own_apps,branch_apps,all_apps) VALUES ('Joe','Soap','[email protected]','ActiveInactive','Home','','','')[/CODE]


BUT, when I selected the drop down and selected Active, it selected neither:

[CODE]Array
(
    [username] => John
    [password] => Deer
    [email] => [email protected]
    [status] =>
    [branch] =>
    [own_apps] =>
    [branch_apps] =>
    [all_apps] =>
)
1 INSERT INTO users (username,password,email,status,branch,own_apps,branch_apps,all_apps) VALUES ('John','Deer','[email protected]','','','','','')[/CODE]
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X