pass ajax generated value in a form

**webguy262** · 03-18-2009, 08:01 PM

I have two forms on a page.

One uses ajax to generate a part number, the other emails the part number so we can reply with a quote.

Everything works fine in FFox, but (what else is new) does not work in IE.

To display the part number to the user, I'm using this in the JS...

document.getElementById('myspan').innerHTML = result;

...and this in the html...

<span name="myspan" id="myspan"></span>

To get the variable in the form, I'm using this in the JS...

document.getElementById('partnum').value= result;

...and this in the html...

<input type="text" name="partnum" id="partnum" readonly>

Here is all the relevant code...

Code:

<script type="text/javascript" language="javascript">
   var http_request = false;
   function makePOSTRequest(url, parameters) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
         	// set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      
      http_request.onreadystatechange = alertContents;
      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", parameters.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(parameters);
   }

   function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('myspan').innerHTML = result; 
            document.getElementById('partnum').value= result;
                      
         } else {
            alert('There was a problem with the request.');
         }
      }
   }
   
   function get(obj) {
      var poststr = "s=" + document.getElementById("s").value + "&it=" + document.getElementById("it").value + "&id=" + document.getElementById("id").value + "&ot=" + document.getElementById("ot").value + "&od=" +  document.getElementById("od").value + "&l=" + document.getElementById("l").value ;makePOSTRequest('post.php', poststr);
   }

function blah(myform)
{
if (myform.s.value != '' && myform.l.value != '' && myform.it.value != '' && myform.ot.value != '' && myform.id.value != '' && myform.od.value != '' )
myform.button.disabled = false;
else
myform.button.disabled = true;
}

function MM_validateForm() { //v4.0
  if (document.getElementById){
    var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
    for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
      if (val) { nm=val.name; if ((val=val.value)!="") {
        if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
          if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
        } else if (test!='R') { num = parseFloat(val);
          if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
          if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
            min=test.substring(8,p); max=test.substring(p+1);
            if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
      } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
    } if (errors) alert('The following error(s) occurred:\n'+errors);
    document.MM_returnValue = (errors == '');
} }
</script>

</head>
<body>



<form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform">

<!-- 6 selection boxes go here... too long to post -->

<tr>
<td colspan="2" align="center">
<input type="submit" name="button" value="Get My Part Number" disabled="disabled" /><br /><small>(button only works once all 6 selections are made)</small>
</td>
</tr>
<tr>
<td colspan="2" align="center">
Your Part Number is: <span name="myspan" id="myspan" style="border:1px solid #000000; padding:2px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
</td>
</tr>
</table>
</form>
<hr>


<!-- FORM FOR QUOTE -->

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" name="emailform" onSubmit="MM_validateForm('Firstname','','R','partnum','','R','Lastname','','R','Email','','RisEmail','Phone','','R');return document.MM_returnValue">
<table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<td colspan="2" class="section">Get a Quote!</td>
</tr>
<tr>
<td align="right"><a name="quote"></a>First Name: <input name="Firstname" type="text" id="Firstname" value="<?php echo $_POST['Firstname']?>"></td>
<td align="right">Part Number: <input type="text" name="partnum" id="partnum" readonly></td>
</tr>
<tr>
<td align="right">Last Name: <input name="Lastname" type="text" id="Lastname" value="<?php echo $_POST['Lastname']?>"></td>
<td align="right">Your Email: <input name="Email" type="text" id="Email" value="<?php echo $_POST['Email']?>"></td>
</tr>
<tr>
<td align="right" valign="top">Your Phone: <input name="Phone" type="text" id="Phone" value="<?php echo $_POST['Phone']?>"></td>
<td align="right">Enter additional comments here...<br /><textarea name="Comment" cols=35 rows=3><?php echo $_POST['Comment']?></textarea></td>
</tr>


</table>
</form>

Like I said, all is good in FF, but I can't get the value in the form when using IE.

What am I missing?

Thanks!

**WebMasterMan** · 03-26-2009, 06:18 PM

I would suggest that you just use the JQuery library.
http://jquery.com/

I used to write out everything for AJAX the way you did, but JQuery is so simple and easy to use that I had to switch. It is intended to work in just about any browser, so it would solve your problem.

**riddhi** · 04-12-2009, 01:34 PM

I would suggest that you just use the JQuery library.
http://jquery.com/

I used to write out everything for AJAX the way you did, but JQuery is so simple and easy to use that I had to switch. It is intended to work in just about any browser, so it would solve your problem.

**WebMasterMan** · 04-17-2009, 01:35 AM

I guess he seconds that...? haha

Thread: pass ajax generated value in a form

Thread Tools

Display

pass ajax generated value in a form

Just use JQuery

JQuery

I agree...

Similar Threads

pass value javascript variable to ajax variable??

Pseudocode Problem

pass two javascript form funtions - help

Windows form designer generated code VB

How to pass data from one form to another?

Posting Permissions