[SOLVED] Cannot submit form which was retrieved via ajax

[Niccaman]

I have a div. Within the div i ajax retrieve a form + table. Then i have another ajax submit method to $_GET the form values to another php page dynamically. The values (in the form) that javascript sends to this php are "undefined". Why is this?

 

 

Also, When i click page source. I cannot find the html for the table i am seeing within the div. However, when i view selected text, i CAN see this html data.

[dpacmittal]

The information is not quite enough to solve your problem.

What syntax are you using to open the php page dynamically? it must be like

xmlhttp.open("GET","abc.php?id=1&topic=5",true)

 

I want to see your coding of the javascript file as well as the php file to help you further.

[willrockformilk]

make sure the javascript is set to recieve responseTEXT not responseXML. i ran into a similar problem a while back. also make sure your back end is formatting and printing the forms properly by putting in variable values in the address bar to view to results that will are going to go back to the display page.

 

also firefox has some issues with ajax and html forms that i still havent figured out.

 

http://www.phpfreaks.com/forums/index.php/topic,244976.0.html

 

if anyone knows the answer to that question.

[Niccaman]

This is my javascript. When i started using dynamic solutions i was using code straight from w3schools. Since then ive simply been reusing the same code. However i feel i have come top understand the most part of it and adjust accordingly:

 

<script type="application/javascript" language="javascript">

var xmlHttp;

 

function manageFlights(str)

{

xmlHttp=GetXmlHttpObject();

if (xmlHttp==null)

{

alert ("Browser does not support HTTP Request");

return;

}

var url="business/airline.php";

url=url+"?b="+str+"&i=<?php echo $_SESSION['id']; ?>";

url=url+"&sid="+Math.random();

xmlHttp.onreadystatechange=stateChanged;

xmlHttp.open("GET",url,true);

xmlHttp.send(null);

}

 

function stateChanged()

{

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

{

document.getElementById("manage").innerHTML=xmlHttp.responseText;

}

}

function GetXmlHttpObject()

{

var xmlHttp=null;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

//Internet Explorer

try

  {

  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

  }

catch (e)

  {

  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

}

return xmlHttp;

}

</script>

 

 

I dont have the php right now as ive been editing it forcing a non dynamic solution. However i much prefer if u can fix this.

 

Php would have returned a form + table so result would be:

 

<div id="manage">

<form>

<table>

<tr.....

..../tr>

</table>

</form>

</div>

[dpacmittal]

What is your form method? What is the "action" in the form?

 

Why are you using sid=Math.random();? I don't think its required.

[Niccaman]

W3 schools says that math.random thing prevents something about a cache lol. Not sure mate.

 

And, the truth is i had everything i just told u, but ALSO i had an extra javascript function to send the data in exactly the same way as previously (dynamically again). Form was most likely set to POST or nothing at all.(i thought it was irrelevant if you werent even submitting form).

[dpacmittal]

I am just not getting what you are trying to achieve.

This is what I understood:

 

You have a page, and you are loading a form in it using ajax. But when you submit the form, the variables are undefined in the target php page. Is this what you were conveying?

[Niccaman]

Sorry buddy, let me clarify.

 

"You have a page, and you are loading a form in it using ajax. But when you submit the form, the variables are undefined in the target php page ... " ... and in the javascript when it requests the form data which i retrieved initially via ajax. I am using javascript to httprequest it to a php page, but its always undefined.

 

I hope your not getting impatient, and i appreciate your help.

[dpacmittal]

Sorry buddy, let me clarify.

 

"You have a page, and you are loading a form in it using ajax. But when you submit the form, the variables are undefined in the target php page ... " ... and in the javascript when it requests the form data which i retrieved initially via ajax. I am using javascript to httprequest it to a php page, but its always undefined.

 

I hope your not getting impatient, and i appreciate your help.

 

I am not quite getting you. What is undefined?

No, I'm not getting impatient.

[Niccaman]

Well this should be whats happening:

 

<script>

function getSomething()

{

    var = document.form.something.value;

    alert(var);

    // then do an ajax manouvre with this value.

}

</script>

 

 

<div id="xxx">

// ** following information was retrieved previously via ajax **

 

<form name="form">

<input type="text" name="something">

<a href="#" onclick="getSomething()">Submit</a>

</form>

 

</div>

 

The alert box pops up with 'undefined' as the value. As if i didn't set it.

Perhaps i may try getting innerhtml. Still Undefined.

[dpacmittal]

sry, disregard this post.

See below. I double posted.

[dpacmittal]

I got it this time. lol

 

Try this:

 

<script>
function getSomething()
{
    var a= document.getElementById("abc").value
    alert(a);
    // then do an ajax manouvre with this value.
}
</script>


<div id="xxx">
// ** following information was retrieved previously via ajax **

<form name="form">
<input type="text" name="something" id="abc">
<a href="#" onclick="getSomething()">Submit</a>
</form>

</div>

 

 

UPDATE: I tried the same thing on my computer and got it working. If the above code doesn't work, tell me. I'll post all the code here.

 

[Niccaman]

I have to re-write the php page. I am sure i tried this briefly, perhaps i did something wrong.

 

I should have my next answer within a couple of days. Thanks.

[dpacmittal]

I have to re-write the php page. I am sure i tried this briefly, perhaps i did something wrong.

 

I should have my next answer within a couple of days. Thanks.

 

I'll post my files here, which worked. You can integrate them in your files by copying-pasting and editing them as necessary.

 

abc.html:

<script src=xmlobject.js>
</script>
<script>
function aaa()
{var xhr=new httprequest();
xhr.open("GET","abc.php",true);
xhr.onreadystatechange= function() {
if(xhr.readyState==4 && xhr.status==200)
{
document.getElementById("xxx").innerHTML=xhr.responseText;
}
}
xhr.send(null);
}

function getSomething()
{
    var a= document.getElementById("abc").value
    alert(a);
    // then do an ajax manouvre with this value.
}
</script>

<body onload=aaa()>
<div id="xxx">


</div>
</body>

 

xmlobject.js:

function httprequest() {
var XHR= false;
//Check if we are using IE.
try {
//If the javascript version is greater than 5.
XHR = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
//If not, then use the older active x object.
try {
//If we are using IE.
XHR = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
//Else we must be using a non-IE browser.
XHR = false;
}
}
//If we are using a non-IE browser, create a JavaScript instance of the object.
if (!XHR && typeof XMLHttpRequest != 'undefined') {
XHR = new XMLHttpRequest();
}
return XHR;
}

 

abc.php:

<?
echo "<form name='form'>
<input type='text' name='something' id='abc'>
<a href='#' onclick='getSomething()'>Submit</a>
</form>";
?>

 

Hope I helped.

[Niccaman]

Though, when you tested yours, did you retrieve the form via ajax first? and then try and use the data? It doesn't look like you did

[Niccaman]

I just tested it, scanning my long code to match everything. The main difference was i was using a radio button. Also i was using .innerHTML in the javascript instead of .value. But surely the innerHTML == value????? Anyway ive now got it working. Thanks for all your help dude.

 

Also, if you know the answer. Why is it (like i said in first post) that after using ajax, and clicking view source, it doesnt include the new data within the div, UNLESS you select it and go view selection source?????

 

Doesn't matter if you dont know, just curious, thanks for your help.

[dpacmittal]

Because the source code is retrieved on when you first load the page. When you change contents in it dynamically, the source code doesn't change (because javascript is client side and whole javascript code is shown in source).

 

And yes, in my test code, which is posted in my last post, I did use ajax to retrieve the form.