AJAX SHARK NEEDED: Select list returned from ajax = undef index in $_POST

[klemme]

Hi all,

I am having this problem, which I cant seem to find out why is happening.

I have an onchange function on one select list, which returns another select list just under, with values to choose from. But when the form is submitted, PHP gives me an error: Undefined index: placering ( I get the data as always: $pos = $_POST['placering']; )

 echo '<select name="side_type" class="tab_form_select_wide" style="display:inline;" 
 onChange="hent_position_til_pdf(\'hoved\',this.selectedIndex);">';

 echo '<option value="nej"> - Vælg en hovedside - </option>';

while (mysqli_stmt_fetch($STMT)) {
echo '<option value="'.$id.'">'.$hoved_link.'</option>';
}
echo '</select>';

The onchange function which handles the ajax call, and sends back a select list with relevant information:

function hent_position_til_pdf(side_type,id) {

var qstring = "side_type="+side_type+"&id="+id;
//alert(qstring);
// OPRET HTTP REQUEST:
if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); }
else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } 

xmlhttp.onreadystatechange = function() 
{   
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
 {
     setTimeout(function(){ document.getElementById("placeringer").innerHTML = 
    "<img src=\"styles/loader.gif\" width=\"26\" height=\"26\" style=\"display:inline;\" />" +
    "<p style=\"display:inline; margin-left:15px; font-size:17px;\">" + 
    "<b>Henter placeringer...</b></p>"; },100); 

    setTimeout(function(){ document.getElementById("placeringer").innerHTML = xmlhttp.responseText },800 );         
 }
}
xmlhttp.open("GET", "ajaxPHP/moduler/pdf_position.php?"+qstring, true)
xmlhttp.send()
return false;   
}

The file: pdf_position.php, where the new select list is being built and returned:

if (isset($_GET['side_type']) && isset($_GET['id'])) {

// print_r($_GET); exit();  // GIVES ME: Array ( [side_type] => hoved [id] => 3 )

// DATA:
$side_type  = $_GET['side_type'];
$id         = $_GET['id'];

$sql    = "SELECT id, pos FROM modul_pdf WHERE side_id = ? AND side_type = ?";
$prep   = mysqli_prepare($connection, $sql);
mysqli_stmt_bind_param($prep, "is", $id, $side_type);
mysqli_stmt_execute($prep);
mysqli_stmt_store_result($prep);
mysqli_stmt_bind_result($prep, $id, $pos);

$rows = mysqli_stmt_num_rows($prep);

if (is_numeric($id)) // Then return a list to the page
{
    echo '<select name="placering" id="placering" class="tab_form_select_wide">';
    for ( $i = 1; $i <= $rows + 1; $i++ ) 
    {
        echo '<option value="'.$i.'">'.$i.'</option>'; 
    }
    echo '</select>';
}
else // Return an empty list, stating to make a choise above..
    {
        echo '
        <select name="placering" id="placering" class="tab_form_select_wide">
            <option value="nej"> - Vælg først en side - </option>
        </select>';      
    }
}

After these scripts has run, and I hit submit, I get an error from PHP, saying that there is an undefined index in the $_POST result. Which is the result I am trying to retrieve from the select list returned above..

Any ideas?

If I try to alert the xmlHTTP.responsetext, I can see the code to create the returned select list inside the alert box looks all fine.

So how come I get this error when I hit submit, and cant get acces to the options which the user has chosen??

/ Klemme

@klemme

I get an error from PHP, saying that there is an undefined index in the $_POST result.

You need to used a <form> that will solve the $_POST issue.

Right now, I notice you are using a drop down menu to select the data. You need a form to $_POST the data right after you submit the data.

For example like this:

<form id="form1" name="form1" method="post" action="view.php" >
echo '<select name="placering" id="placering" class="tab_form_select_wide">';
for ( $i = 1; $i <= $rows + 1; $i++ )
{
echo '<option value="'.$i.'">'.$i.'</option>';
}
echo '</select>';
</form>

I hope you get the picture

[klemme]

Yeah, I have that actually..Its a looooong snippet i posted here :-)

I do have a form - the select list, is being pulled via AJAX, and inserted INTO the form. My problem is that I cant grap the $_POST value of the new select list that has been put into the form via AJAX.

Maybe i should have posted the entire form, but for sake of keeping it as short as possible i left the form tags and other codes out.

When I recieve the select list from the XHR call, and try to alert the recieved data, I can see that the code for the select list looks just fine. Then I simply use document.getelementbyID("blah").innerHTML = xml.HTTPreguest;

But then when I submit the form, using a normal $_POST, I get this undefined index error, as if the select list pulled in via ajax hasn't become a part of the DOM and cant be found when the form is submitted..

Any idea why??

@klemme

I do have a form - the select list, is being pulled via AJAX, and inserted INTO the form. My problem is that I cant grap the $_POST value of the new select list that has been put into the form via AJAX.

But then when I submit the form, using a normal $_POST, I get this undefined index error, as if the select list pulled in via ajax hasn't become a part of the DOM and cant be found when the form is submitted..

Have you try POST in JQuery AJAX?

I'm not familiar with AJAX instead of GET used POST:

$.ajax({: "POST",}

On your PHP file used $_POST function instead of $_GET function

Instead of this

if (isset($_GET['side_type']) && isset($_GET['id'])) {
// print_r($_GET); exit(); // GIVES ME: Array ( [side_type] => hoved [id] => 3 )
// DATA:
$side_type = $_GET['side_type'];
$id = $_GET['id'];

Change it to this:

if (isset($_POST['side_type']) && isset($_POST['id'])) {
// print_r($_GET); exit(); // GIVES ME: Array ( [side_type] => hoved [id] => 3 )
// DATA:
$side_type = $_POST['side_type'];
$id = $_POST['id'];

and on your <form> in the method used post:

<form id="form1" name="form1" method="post" action="view.php" > </form>

Then run the code. Let me know what you get.

[klemme]

I just tried changing it to post: ( Last bit of the AJAX function ) - And changed the php file that gets called via AJAX to recieve the data via $_POST also. ( Works fine, like $_GET, but end result is the same - It seems like the returned select list isnt a part of the DOM, maybe? But if I alert the XHR returned data, I can see the select list in the alert box looks just fine, with values and the whole lot.. )

xmlhttp.open("POST", "ajaxPHP/moduler/pdf_position.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(qstring);

This is the way I am sending data using AJAX. I am trying to get my hands as dirty as possible in AJAX, Javascript, to learn it well, as I have untill now just programmed in PHP. Im sure we can get it to work though.

All though Im thinking that using either $_POST or $_GET, shouldnt be the issue here? The php file sending back the select list, gets the info via $_GET in the querystring, and is only used to update the form, with a new select list. So I can use both $_POST and $_GET in the AJAX call, both are working. But they also both send back a select list that I cant access the value of, when I submit the form.

The form is submitted "the normal way", via $_POST and a page refresh, so no AJAX magic there..

Grr..Have done this many times before, and could get the data from an updated form just like allways when submitting it.

Do you need more info, more code stuff...

Thanks!

/Klemme

@klemme

All though Im thinking that using either $_POST or $_GET, shouldnt be the issue here? The php file sending back the select list, gets the info via $_GET in the querystring, and is only used to update the form, with a new select list. So I can use both $_POST and $_GET in the AJAX call, both are working. But they also both send back a select list that I cant access the value of, when I submit the form.

I'm not familiar with JQuery. But so far the issue is still the getting the $_POST.

Since you mention that it works.

Let's keep your code the same way and used this

I think having a null may access a valve from the id

if (isset($_GET['side_type']) ? $_GET['id'] : null) {
// print_r($_GET); exit(); // GIVES ME: Array ( [side_type] => hoved [id] => 3 )
// DATA:
$side_type = $_GET['side_type'];
$id = $_GET['id'];

Grr..Have done this many times before, and could get the data from an updated form just like allways when submitting it.

Just post the small section of the <form> that is connected this code with ajax together.

[klemme]

Nul value, doesnt change it, the $_POST still doesnt get found..

The selcect that gets updated/replaced:

<span id="placeringer">   
   <select name="placering" id="placering" class="tab_form_select_wide">
       <option value="nej"> - Vælg først en side - </option>
   </select>
</span>

The PHP script, I call using AJAX, $_GET method looks like this:

if (isset($_GET['side_type']) && isset($_GET['id'])) {
// print_r($_GET); exit();  
// DATA:
$side_type  = $_GET['side_type'];
$side_id    = $_GET['id'];

$sql    = "SELECT pos FROM modul_pdf WHERE side_id = ? AND side_type = ?";
$prep   = mysqli_prepare($connection, $sql);
mysqli_stmt_bind_param($prep, "is", $side_id, $side_type);
mysqli_stmt_execute($prep);
mysqli_stmt_store_result($prep);
mysqli_stmt_bind_result($prep, $pos);

$rows = mysqli_stmt_num_rows($prep);

if (is_numeric($side_id))
{
    echo '<select name="placering" id="placering" class="tab_form_select_wide">';
    for ( $i = 1; $i <= $rows + 1; $i++ ) 
    {
        echo '<option value="'.$i.'">'.$i.'</option>'; 
    }
    echo '</select>';
}
else
    {
        echo '
        <select name="placering" id="placering" class="tab_form_select_wide">
            <option value="nej"> - Vælg først en side - </option>
        </select>';      
    }
}

The JS script, that calls the php just above:

function hent_position_til_pdf(side_type,id) {

var qstring = "side_type="+side_type+"&id="+id;
//alert(qstring);
// OPRET HTTP REQUEST:
if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); }
else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } 

xmlhttp.onreadystatechange = function() 
{   
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
  {
     setTimeout(function(){ document.getElementById("placeringer").innerHTML = 
    "<img src=\"styles/loader.gif\" width=\"26\" height=\"26\" style=\"display:inline;\" />" +
    "<p style=\"display:inline; margin-left:15px; font-size:17px;\">" + 
    "<b>Henter placeringer...</b></p>"; },100); 

    setTimeout(function(){ document.getElementById("placeringer").innerHTML = xmlhttp.responseText },800 );         
 }
}
xmlhttp.open("GET", "ajaxPHP/moduler/pdf_position.php?"+qstring, true)
xmlhttp.send()
return false;   
}

I think this is covering the scripts involved..

If you look at the JS script with the AJAX function:

• If i alert the querystring to check if the data is there, it looks fine.

• If i alert the xml.httpresponseText, I can see the entire HTML code for the select list send back, and the values are there, and things look fine, but if i submit after this, it returns the undefinded index error..

@klemme

I realized you change the id. I'm bit confused which id you are using?

This

$side_id = $_GET['id'];

or this:

$id = $_GET['id'];

You want to keep the id as one not using both like what you did above.

For your $sql

Instead of this:

$sql = "SELECT pos FROM modul_pdf WHERE side_id = ? AND side_type = ?";

Try this:

$sql = "Select side_id, side_type FROM modul_pdf ORDER BY side_type";

On here where your option is:

Instead of this:

echo '<option value="'.$i.'">'.$i.'</option>';

Try this:

echo '<option value=$i[side_id]>$i[side_type]</option>';

So you form should look like this:

<form id="form" name="form" method="post" action="data.php" >
<?php
$sql = "Select side_id, side_type FROM modul_pdf ORDER BY side_type";
$result = mysqli_query ($sql, $connection);
echo "<select name=post value=''>POST NAME</option>";
while($i = mysqli_fetch_array($result, MYSQLI_BOTH)){
    echo "<option value=$i[side_id]>$i[side_type]</option>";
}echo "</select>";
?>
<input type="submit" name="submit" id="submit" value="Submit" />
</form>

Try this example. The only issue is that I don't know which id you are using plus you don't need: if (is_numeric($side_id))

[klemme]

Back again!

I just found out, after testing it in chrome, firefox, opera and IE..That it actually works in Internet Explorer, but not in all the other browsers.

So I guess it must be something with the XHR request.

This is (once again..) the XHR request, which works in IE, but I cant get the returned select list $_POST value in chrome, opera and firefox:

function hent_position_til_pdf(side_type) {

var qstring = "side_type="+side_type;

//alert(qstring); return false;

// OPRET HTTP REQUEST:
var xmlhttp;
if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); }
else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } 

xmlhttp.onreadystatechange = function() 
{   
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
 {
     alert(xmlhttp.responseText);

     setTimeout(function(){ document.getElementById("position").innerHTML = 
    "<img src=\"styles/loader.gif\" width=\"26\" height=\"26\" style=\"display:inline;\" />" +
    "<p style=\"display:inline; margin-left:15px; font-size:17px;\">" + 
    "<b>Henter placeringer...</b></p>"; },100); 

    setTimeout(function(){ document.getElementById("position").innerHTML = xmlhttp.responseText },500 );            
 }
 }
xmlhttp.open("GET", "ajaxPHP/moduler/pdf_position.php?"+qstring, true)
xmlhttp.send()
return false;   
}

Any new ideas why this is happening? Shouldnt it work..? I can see the new select list appears on the page in all the browsers, but can only acces the $_POST value in IE..

:-/

@klemme

Any new ideas why this is happening? Shouldnt it work..? I can see the new select list appears on the page in all the browsers, but can only acces the $_POST value in IE..

That is very strange. Before you made any changes did the $_POST value work for all browser? It has to be a ID issue.

The xmlhttp.onreadystatechange = function() looks fine

http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp

The XHR request looks fine:

Here is a link of how it looks:

http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

I do feel it has to do with a comma or period that you left out or a white space.