Problem with sending values with AJAX

[milo3169]

I'm a newbie to AJAX and Javascript. I have a simple form that is being submitted through AJAX. I got it working where it will call my PHP file and it would run the PHP script. After that I did a W3C validation and fixed the errors that it came up with, but now my form doesn't work. I think I came to the conclusion that the form is not submitting the values of the text boxes. I ran some tests in the Javascript code by putting some alerts within the code. I put an alert "alert(obj.childNodes.type);" after the FOR loop wanting to see the "type", but they come up "Undefined". I'm not sure if I did something when I validated the page or what. Can somebody help me to see what I'm doing wrong here? It was working great before. The PHP validation was working the way I wanted to and it would submit just fine.

Javascript Code

   var http_request = false;
   function makeRequest(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('GET', url + parameters, true);
      http_request.send(null);
   }

   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;            
         } else {
            alert('There was a problem with the request.');
         }
      }
   }
   
   function get(obj) {
      var getstr = "?";
      
      for (i=0; i<obj.childNodes.length; i++) {
         if (obj.childNodes[i].tagName == "INPUT") {
            if (obj.childNodes[i].type == "text") {
               getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
            }
            if (obj.childNodes[i].type == "checkbox") {
               if (obj.childNodes[i].checked) {
                  getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
               } else {
                  getstr += obj.childNodes[i].name + "=&";
               }
            }
            if (obj.childNodes[i].type == "radio") {
               if (obj.childNodes[i].checked) {
                  getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
               }
            }
         }   
         if (obj.childNodes[i].tagName == "SELECT") {
            var sel = obj.childNodes[i];
            getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";
         }
         
      }
      
      makeRequest('email_subscription/register_email.php', getstr);
   }

HTML Code. The HTML code is being echoed in PHP.

<form action=\"javascript:get(document.getElementById('myform1'));\" id=\"myform1\">
	<p><label class=\"label\" for=\"fname\">First name</label>
	<input id=\"fname\" type=\"text\" name=\"first\" /></p>
	<p><label class=\"label\" for=\"lname\">Last Name</label>
	<input type=\"text\" id=\"lname\" name=\"last\" /></p>
	<p><label class=\"label\" for=\"email\">Email</label>
	<input id=\"email\" type=\"text\" name=\"emailaddr\" /></p>
	<p>
	<input type=\"button\" name=\"button1\" value=\"Sign Up\" onclick=\"javascript:get(this.parentNode);\" />
	</p>
</form>

 

[jpadie]

i would use the onsubmit method of the form. just make sure to return a 'false' value to ensure that the form does not actually submit.

i would also change the button to a submit. doubt very much whether this is the issue though. i note that you don't have a myspan div actually in the DOM though. that would be a killer!

i've recrafted your code a bit. makes the form scraping a bit neater.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<script type="application/javascript">
var http_request = false;
function makeRequest(url, parameters, method) {
	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) {}
		}
	} //end elseif

	if (!http_request) {
		alert('Cannot create XMLHTTP instance');
		return false;
	}
	http_request.onreadystatechange = alertContents;
	if (method == "get" || method == "GET"){
		http_request.open(method, url + parameters, true);
		http_request.send(null);
	} else {
		http_request.open(method, url, true);
		http_request.send(params);
	}
}

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;            
		} else {
			alert('There was a problem with the request.');
		}
	}
}
function urlencode(str){
	return encodeURI(str);
}

function getFormElements(frm, method){
	var elems = frm.elements;
	var params = new Array();
	for (var x=0; x < elems.length; x++){
		var i = elems[x];
		switch (i.type){
			case "text":
			
			case "hidden":
			
			case "password":
			
			case "textarea":
				
				params[x] = urlencode(i.name) + "=" + urlencode(i.value);
			break;
				
			case "checkbox":
				if (i.checked){
					params[x] = urlencode(i.name) + "=" + urlencode(i.value);
				}
			break;
	
			case "radio":
				for (var j = 0; j < i.length; j++){
					if (i[j].checked){
						params[x] = urlencode(i[j].name) + "=" + urlencode(i[j].value);
					}
				}
			break;
					
			case "select-one":
				params[x] = urlencode(i.name) + "=" + urlencode (i.options[ i.selectedIndex].value);
			break;
				
			case "select-multiple":
				for (var j=0; j < i.options.length; j++){
					if (i.options[j].selected){
						params[x] = urlencode(i.name) + "[]="+ urlencode (i.options[j].value);
					}
				}
			break;
		} //end switch
	} //end for loop
	var jArray = params.join('&');
	if (method == "get" || method == "GET"){
		return "?"+jArray;
	} else {
		return jArray;
	}
}

function submitForm (frm, url, method){
	//first get the fields
	var params = getFormElements(frm, method);
	console.log(params);
	makeRequest (url, params, method);
	return false;
}


</script>
</head>
<body>
<div id="myspan">&nbsp;</div>
<form method="get" action='somepage.php' onsubmit="return submitForm(this, 'jstest.php', 'get');" id="myform1">
	<p>
    	<label class="label" for="fname">First name</label>
    	<input id="fname" type="text" name="first" />
	</p>
    <p>
    	<label class="label" for="lname">Last Name</label>
    	<input type="text" id="lname" name="last" />
	</p>
    <p>
    	<label class="label" for="email">Email</label>
        <input id="email" type="text" name="emailaddr" />
	</p>
    <p>
    	<input type="submit" name="button1" value="Sign Up" />
	</p>
</form>
</body>

warning: i've not really tested this.

 

[milo3169]

Thanks Jpadie,

Thanks a lot for your help. What you did seems to work as far as submitting the values of the form, but it submits the form. I put a "return false" on the onsubmit event, but that doesn't work. It still submits the form. Is that the wrong place to put it?

This is just the form tag where I put the "return false"

<form method=\"get\" action='email_subscription/register_email.php' onsubmit=\"return submitForm(this, 'email_subscription/register_email.php', 'get'); return false;\" id=\"myform1\">

 

[jpadie]

the form will submit if there is an error in the js.
you do not need to add a return false in the onsubmit action.

if you are not using FF + firebug then the console.log line in the submitForm() function will throw an error. so comment out the console.log line and see whether it works.

 

[milo3169]

Hi jpadie,

Yes, I figured that out and it work like a charm. Thanks again for all of your help.