Ajax value's not retrieved when form is submitted

**Canabeez** · Sep 13 '10, 10:58 AM

Hello, can we see a sample page for some more debugging... thanks.

**Canabeez** · Sep 13 '10, 12:38 PM

Here, did some changes, try testing this and check if this works. Sorry for so many code changes.

HTML:
[code="html"]
<html>
<head>
<script type="text/javascript">
function createRequestOb j()
{
var xmlHttp = null;
if (window.XMLHttp Request){
xmlHttp = new XMLHttpRequest( );
if (xmlHttp.overri deMimeType) {
xmlHttp.overrid eMimeType('text/html');
}
}
else
{
if (window.ActiveX Object){
xmlHttp = new ActiveXObject(" Msxml2.XMLHTTP" );
if (xmlHttp.overri deMimeType) {
xmlHttp.overrid eMimeType('text/html');
}
}
}
return xmlHttp;
}

function ajx1(vari1,vari 2)
{
var d = new Date();
var time = d.getTime();

if(vari1=='medi a')
var url = "ajx1.php?Time= "+time;
else if(vari1=='pub_ type')
var url = "ajx2.php?Time= "+time;
url = url + "&data="+va ri2;

var xmlHttp =createRequestO bj();
xmlHttp.open("G ET",url,true) ;
xmlHttp.onready statechange = function()
{
if(xmlHttp.read yState==4)
{
if(vari1=='medi a')
drawMedia( eval(xmlHttp.re sponseText) );
else if(vari1=='pub_ type')
{
drawOthers( eval(xmlHttp.re sponseText) );
}
}
};
xmlHttp.send(nu ll);
}

function drawMedia(_data ){
var sel = document.getEle mentById('pubty pe');
sel.innerHTML = '<option selected="selec ted" value="select">-----select-----</option>';
for(var i in _data){
var opt = document.create Element('option ');
opt.value = _data[i];
op.innerHTML = _data[i];
sel.appendChild (opt);
}

document.getEle mentById('media ').style.displa y = 'inline';
}

function drawOthers(_dat a){
for(var obj in _data){
var sel = document.getEle mentById(obj);
sel.innerHTML = '';
for(var i in _data[obj]){
var opt = document.create Element('option ');
opt.value = _data[obj][i];
opt.innerHTML = _data[obj][i];
sel.appendChild (opt);
}
}
document.getEle mentById('pub_t ype_tr').style. display = 'inline';
}
</script>
</head>
<body>
<table width="100%">
<form action="<?php $_SERVER['PHP_SELF'];?>" method="post" name="form1" id="form1">
<tr>
<td align="right" valign="top"><s trong>Media type</strong></td>
<td align="left" valign="top">&n bsp;</td>
<td align="left" valign="top"><s elect name="mediatype " id="mediatype" onchange="ajx1( 'media',this.va lue)">
<option value="select" selected>-----select-----</option>
<option value="type1">t ype1</option>
<option value="type2">t ype2</option>
</select> </td>
</tr>
<tr id="media" style="display: none;">
<td align="right" height="50px" valign="middle" ><strong>Public ation type</strong></td>
<td align="left" valign="middle" > </td>
<td align="left" valign="middle" >
<select name="pubtype" id="pubtype" onChange="ajx1( 'pub_type',this .value);">
<option selected="selec ted" value="select">-----select-----</option>
</select>
</td>
</tr>
<tr id="pub_type_tr " style="display: none;">
<tr>
<td width="35%" align="right" valign="top"><s trong>Size</strong></td>
<td width="6%" align="left" valign="top">&n bsp;</td>
<td width="59%" align="left" valign="top"><s elect name="size" id="size"></select></td>
</tr>
<tr>
<td align="right" valign="top">&n bsp;</td>
<td align="left" valign="top">&n bsp;</td>
<td align="left" valign="top">&n bsp;</td>
</tr>
<tr>
<td align="right" valign="top"><s trong>Color</strong></td>
<td align="left" valign="top">&n bsp;</td>
<td align="left" valign="top"><s elect name="color" id="color"></select></td>
</tr>
<tr>
<td align="right" valign="top">&n bsp;</td>
<td align="left" valign="top">&n bsp;</td>
<td align="left" valign="top">&n bsp;</td>
</tr>
<tr>
<td align="right" valign="top"><s trong>Position</strong></td>
<td align="left" valign="top">&n bsp;</td>
<td align="left" valign="top"><s elect name="position" id="position"> </select></td>
</tr>
</tr>
<tr>
<td align="right" valign="top"><s trong>Date</strong></td>
<td align="left" valign="top">&n bsp;</td>
<td align="left" valign="top"><i nput type="text" name="date" id="date" /></td>
</tr>
<tr>
<td align="right" valign="top">&n bsp;</td>
<td align="left" valign="top">&n bsp;</td>
<td align="left" valign="top">&n bsp;</td>
</tr>

<tr>
<td align="right" valign="top">&n bsp;</td>
<td align="left" valign="top">&n bsp;</td>
<td align="left" valign="top"><i nput type="submit" name="submit" id="submit" value="Submit" /></td>
</tr>
</form>
</table>
</body>
</html>[/code]

ajx1.php:[code="php"]
<?php
include 'config.php';

$meditype=$_GET['data'];

$qp=mysql_query ("select distinct(public ation_type) from media_newspaper order by publication_typ e asc");

$response = array();

while($rp=mysql _fetch_object($ qp)){
$response[] = $rp->publication_ty pe;
}

echo json_encode( $response );
?>[/code]

ajx2.php:[code="php"]
<?php
include 'config.php';

$mediatype=$_GE T['data'];

$qp=mysql_query ("select * from media_newspaper where publication_typ e='".$mediatype ."'");

while($rp=mysql _fetch_object($ qp)){
$tmpsizes[]=$rp->size;
$tmpcolors[]=$rp->color;
$tmpposition[]=$rp->position;
}

$response = array(
"size" => $tmpsizes,
"color" => $tmpcolors,
"position" => $tmpposition
);

echo json_encode( $response );
?>[/code]

**vjayis** · Sep 14 '10, 08:30 AM

hello canabeez.,

working in localhost sorry., unable to give u a sample page.,

i tried your ideas and implemented it in the pages.,

the first function works fine and the posted value is retrieved when i submit the form.

but the second function didnt work properly.,

no results were found.,

i tried by placing some alert functions to examine where the process stops., but unfortunately it doesnt even enter the function.,

Code:

function drawOthers(_data){
alert('here');
    for(var obj in _data){
        var sel = document.getElementById(obj);
        sel.innerHTML = '';
        for(var i in _data[obj]){
            var opt = document.createElement('option');
            opt.value = _data[obj][i];
            opt.innerHTML = _data[obj][i];
            sel.appendChild(opt);
        }
    }
    document.getElementById('pub_type_tr').style.display = 'inline';
}

and even tried by commenting all the other lines but again no results found..

Code:

function drawOthers(_data){alert('here');
   /* for(var obj in _data){
        var sel = document.getElementById(obj);
        sel.innerHTML = '';
        for(var i in _data[obj]){
            var opt = document.createElement('option');
            opt.value = _data[obj][i];
            opt.innerHTML = _data[obj][i];
            sel.appendChild(opt);
        }
    }
    document.getElementById('pub_type_tr').style.display = 'inline';
*/
}

and checked for the error's in ajx2.php page by directly writing the url http://localhost/project2/ajx2.php?data=paper1

where paper1 is the value sent from the onchange event called in "pubtype(listbo x name)" which is produced from the first ajax function.

it displays the result as

{"size":["3"],"color":["black&whit e"],"position":["Run on page"]}

thanks

**Canabeez** · Sep 14 '10, 02:53 PM

Are you getting any errors?

Please also check that the response from the second function ("drawOthers()" ) does not enter the first one ("drawMedia()") .

**vjayis** · Sep 16 '10, 02:24 AM

checked., the result is good., when i added the code

Code:

alert(xmlHttp.responseText);

it shows the same result perfectly as

{"size":["3"],"color":["black&whit e"],"position":["Run on page"]}

**Canabeez** · Sep 16 '10, 09:41 AM

Try alerting the vari1 variable inside the onreadystatecha nge() function
[code="javascrip t"]
xmlHttp.onready statechange = function()
{
if(xmlHttp.read yState==4)
{
alert( vari1 );
}
};[/code]

**vjayis** · Sep 16 '10, 09:50 AM

result is "pub_type".

i think there might be some error's inside the second function since the javascript doesnt even enter it..

**Canabeez** · Sep 16 '10, 09:57 AM

Try adding [code="html"]
<input type="button" value="Test" onclick="drawOt hers({"size":["3"],"color":["black&whit e"],"position":["Run on page"]});" />[/code] to your html and test the function itself, see if there are any JavaScript errors.

**vjayis** · Sep 16 '10, 10:16 AM

hey it works perfectly man., all the list boxes are filled with their values.,

but when the function is called through the onchange event of the generated listbox nothing happens..

Ajax value's not retrieved when form is submitted

Ajax value's not retrieved when form is submitted

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment