Dear All,
Here is my link http://183.78.169.53/scv/a2.php. You can just fill a text value into the A1 input box. Then just select the vehicle drop down list and will see a master list filled via ajax. Just pick any master list and submit the form. You will notice the masterID does not appear when I capture the post values in Firefox but appear well in IE. What could be wrong in my codes?
newbie14 0 Posting Pro
ko ko 97 Practically a Master Poster
Maybe, XMLHttpResponseText wont' work on the form, and the form can't pass the value. You can check with function and attach with 'onsubmit' to the form. I tested with the following:
function check(){
var el = document.form1.masterID.value;
alert(el);
}It does not alert on Firefox and work only on IE. Use hidden field to hold the value of 'masterID' and create function that alter/fill the value to the hidden field when the drop-down list was seleted. You can do that with 'onchange' event.
Below is the clear format of your code.
<!DOCTYPE html PUBLIC "-//W3C DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="my1.css" media="all">
<script type="text/javascript">
function getSlaveTrailer(str)
{
differentiator=Math.floor(Math.random()*50000);
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var x=document.getElementById('myTable').insertRow(2);
var y=x.insertCell(0);
var z=x.insertCell(1);
var newdiv = document.createElement("div");
newdiv.innerHTML = xmlhttp.responseText;
y.innerHTML="<label class=\"description\" for=\"element_1\">Master <font color='red'>*</font></label> ";
while (newdiv.hasChildNodes())
{ z.appendChild(newdiv.firstChild);
}
}
}
xmlhttp.open("GET","getMasterList.php?e=1&d="+differentiator,true);
xmlhttp.send();
}
</script>
<script type="text/javascript">
function check(){
var el = document.form1.masterID.value;
alert(el);
}
function chk(ck){
document.form1.msID.value = ck;
}
</script>
</head>
<body>
<?php
if(isset($_POST['msID'])) {
?>
<h1><?php echo $_POST['msID']; ?></h1>
<?php
}
?>
<table>
<tr>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="form1" id="form1" onsubmit="alert('hi');check();">
<td width="700" valign="top">
<table id="mainDetails">
<tr>
<td>
<label class="description: for="element_1">A1<font color="red">*</font></label>
</td>
<td>
<input class="text" id="asset" name="asset" value="some">
</td>
</tr>
<tr>
<td><p class="error" id="assetError"></p></td>
<td></td>
</tr>
</table>
<table id="myTable">
<tr>
<td>
<label class="description" for="element_1">Vehicle <font color="red">*</font></label>
</td>
<td>
<select class="select" id="vehicleID" name="vehicleID" onchange="getSlaveTrailer(this.value)">
<option value="0">-Select Vehicle-</option>
<option value="1">v1</option>
</select>
</td>
</tr>
<tr>
<td><p class="error" id="vehicleIDError"></p></td>
<td></td>
</tr>
</table>
<table id="tblSubmit">
<tr>
<td>
<input type="hidden" value="" name="editVal">
<input class="buttons" type="submit" name="Add" value="Add">
</td>
<td>
<input class="buttons" type="Reset" name="Reset" value="Reset" onclick="location.href='addVehicle.php'">
</td>
</tr>
</table>
</td>
<input type="hidden" name="msID" value="" />
</form>
</tr>
</table>
</div>
</body>
</html>Hope this help.
newbie14 0 Posting Pro
Dear Zero13,
I have first try like this below where I add this y.innerHTML="<label class=description for=element_1>Master <font color='red'>*</font></label><input type=hidden value='' name=hiddenMasterID> "; So when I submit no value is capture.
function getSlaveTrailer(str)
{
differentiator=Math.floor(Math.random()*50000);
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var x=document.getElementById('myTable').insertRow(2);
var y=x.insertCell(0);
var z=x.insertCell(1);
var newdiv = document.createElement("div");
newdiv.innerHTML = xmlhttp.responseText;
y.innerHTML="<label class=description for=element_1>Master <font color='red'>*</font></label><input type=hidden value='' name=hiddenMasterID> "; while (newdiv.hasChildNodes())
{ z.appendChild(newdiv.firstChild);
}
}
}
xmlhttp.open("GET","getMasterList.php?e=1&d="+differentiator,true);
xmlhttp.send();
}Then secondly I tried to move like below. So I added this <input type=hidden value="" name=hiddenMasterID>. What I would like to know why in the earlier method when I built the hiddent itself it does not work. But when I put in the table id="tblSubmit" it works fine.
<table id="tblSubmit">
<tr>
<td>
<input type=hidden value=<?php echo $editVal?> name=editVal>
<input type=hidden value="" name=hiddenMasterID>
<input class="buttons" type="Submit" name="<?php echo $submitTag?>" value="<?php echo $submitTag?>" onClick="return validateForm();">
</td>
<td>
<input class="buttons" type="Reset" name="Reset" value="Reset" onclick="location.href='addVehicle.php'">
</td>
</tr>
</table> ko ko 97 Practically a Master Poster
y.innerHTML="<label class=description for=element_1>Master <font color='red'>*</font></label>y.innerHTML="<label class=description for=element_1>Master <font color='red'>*</font></label><input type=hidden value='' name=hiddenMasterID> ";I don't know exactly and what's the real problem. But, on the above method, the 'hiddenMasterID' is not already exists in the form. It was manipulated by DOM with the function.
I'm neither Javascript expert nor who are well-known in javascript. And your problem is very relevant with Javascript and not PHP. So you should post this thread into the Javascript forum.
Hope this help.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.