[SOLVED] Getting values from a form

[Spatz]

Hi

 

I have a form which is loaded into a div on my main page via an AJAX request.

The form retrieves its initial values from session variables via a database and the idea is for the form to submit and reload the form with the new values present (no page loads).

 

My problem is that i cant seem to get the values from the form fields and therefore i have no data to insert and my sql statement fails.

 

<input type="button" name="Save" id="Save" value="Save" onclick="submit_form('details', 'edit_panel.php', 'edititable_area', ''); return false;"/>

 

Onclick will envoke the below function (note: valFunc is for future validation)

//SUBMIT THE FORM
function submit_form(theForm, serverPage, objID, valFunc){
var file = serverPage;
var str = get_form_values(theForm, valFunc);

//SEND TO THE AJAX REQUEST
request(serverPage, objID, "post", str);

}

//GETS AND PREPARES THE FORM VALUES
function get_form_values(theForm, valFunc){
var str = "";
var fobj = document.getElementById(theForm);
//RUN THROUGH ALL THE FIELDS WITHIN THE FORM
for(var i = 0; i < fobj.elements.lenght; i++){
//CONSTRUCT THE FORM VALUES
	str += fobj.elements[i].name + "=" + escape(fobj.elements[i].value) + "&";
}
return str;
}

 

I know that my request function works as i cant get to the point im at if it didnt

 

function request(serverPage, objID, getPost, str){
if(getPost == "get"){
	var obj = document.getElementById(objID);	

	xmlhttp.open("GET", serverPage);
	xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
			obj.innerHTML = xmlhttp.responseText;
			}
		}
	xmlhttp.send(null);
}else if(getPost == "post"){
	var obj = document.getElementById(objID);	

	xmlhttp.open("POST", serverPage, true);
	xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
	xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
			obj.innerHTML = xmlhttp.responseText;
			}
		}
	xmlhttp.send(str);
	}

}

 

Im new to AJAX so im very sorry if im being just dumb

 

Any help would be greatly appreciated

 

 

[F1Fan]

You'll need to grab the values using JS (maybe using getElementById, or you could pass them into the JS function when it's called), then in your JS function that calls the PHP code, pass the variables to the PHP page. Here's an example:

 

function getProdinfo(idnum){
var prodid = document.getElementById('upc'+idnum).value;
http.open('GET', 'features/merchandising/merchandising.pbajax.inc.php?function=GetProdInfo&prodid='+prodid+'&idnum='+idnum, false);
http.send(null);
eval(http.responseText);
}

[Spatz]

Thank you very much for your input. I should of mentioned that some of the form values were being dynamically created so i couldn't guarantee the field names.

If anyone's interested the below is the working edited code

 

//GETS AND PREPARES THE FORM VALUES
function get_form_values(theForm, valFunc){
var str = "";
var fobj = document.getElementById(theForm);
var fobj_lenght = document.getElementById(theForm).length;

//RUN THROUGH ALL THE FIELDS WITHIN THE FORM
for(var i = 0; i < fobj_lenght; i++){
//CONSTRUCT THE FORM VALUES
	str += fobj.elements[i].name + "=" + escape(fobj.elements[i].value) + "&";
}
return(str);
}


//SUBMIT THE FORM
function submit_form(theForm, serverPage, objID, valFunc){
var file = serverPage;
var str = get_form_values(theForm, valFunc);

//SEND TO THE AJAX REQUEST
request(serverPage, objID, "post", str);

}

 

Thank you f1fan for your input it helped alot.