getting form values as querystring

NancyJ

05-01-2006, 08:43 AM

How can I get all the values of a form and pass them through the querystring as if the form had been submitted through get - but without actually submitting the form?

Kor

05-01-2006, 08:56 AM

You may simple add them to the location.href (using, let's say '?' as delimiter)

But take care about some special characters and spaces, if any. Passing values as queries has some particular rules.

...and I guess that you can not exceed a certain lenght of the url in the addressbar

NancyJ

05-01-2006, 08:57 AM

Kor

05-01-2006, 09:16 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function sendV(f){
location.href='newpage.html?'+f['bla'].name+'='+f['bla'].value;
}
</script>
</head>
<body>
<form action="">
<input type="text" name="bla">
<input name="sub" value="Send value" type="button" onclick="sendV(this.form)">
</form>
</body>
</html>

NancyJ

05-01-2006, 09:42 AM

...without typing it all in manually
The number of fields on the form will vary, there will be 6 arrays of form fields, Wqty[], WWidth[], WHeight[], Dqty[], DWidth[], DHeight[]

vwphillips

05-01-2006, 10:46 AM

http://www.codingforums.com/showthread.php?t=85421

Kor

05-01-2006, 11:16 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function sendV(e){
var loc='newpage.html?';
for(var i=0;i<e.length;i++){
loc+=(e[i].name+'='+e[i].value+'&');
}
loc=loc.replace(/\&$/,'')
location.href=loc;
}
</script>
</head>
<body>
<form action="">
<input type="text" name="foo">
<input type="text" name="fee">
<input type="text" name="fuu">
<input name="sub" value="Send" type="button" onclick="sendV(this.form.elements)">
</form>
</body>
</html>

NancyJ

05-01-2006, 02:11 PM

cheers, I know technically this is a different topic but is there any way to determine which form field is being focused on?

Kor

05-01-2006, 07:41 PM

if all you elements support focus method

onload = function(){
var el = document.forms['formname'].elements;
for(var i=0;i<el.length;i++){
el[i].onfocus=function(){alert(el[i].name)}
}
}

if you want to apply that only upon text fields, just insert this condition:

onload = function(){
var el = document.forms['formname'].elements;
for(var i=0;i<el.length;i++){
if(el[i].type=='text'){
el[i].onfocus=function(){alert(el[i].name)}
}
}
}

NancyJ

05-01-2006, 09:39 PM

when I try to do this, I get a 'not implemented' error in ie.

this is the function
function registerEvents()
{
obj = document.forms[0].elements;
for(var i = 0; i<obj.length; i++)
{
if(obj[i].name)
{
if(obj[i].name.indexOf('[]'))
{
obj[i].onchange = refreshForm;
if (obj[i].captureEvents) obj[i].captureEvents(Event.CHANGE);
obj[i].onclick = setFocus(obj[i].name);
if (obj[i].captureEvents) obj[i].captureEvents(Event.CLICK);
}

}
}
}

the error occurs on this line: obj[i].onclick = setFocus(obj[i].name);

and in FF, no matter what I click on, it always returns the same name;

NancyJ

05-01-2006, 10:27 PM

I've mostly sorted the problems but I still cant achieve what I'm trying to do.
SO I'm just going to explain exactly what I want to do and maybe you guys can help.

I have this page and when you change a value the form updates, it does this by submiting the form to a php page where the values are checked against acceptable values from the database.
Then the form is replaced with a new form, with corrected values and a new input line.
This however, causes a problem. If you change a value and then click on the next text box, it loses focus because the form is replaced. So I want to know which form element was clicked on (if any) and then when the form is replaced, set the focus to that element.

This is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>WeQuote Windows</title>
<style type="text/css">

</style>
<script type = "text/javascript">

onload= function()
{
try
{
xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
// do non ajax here
}
registerEvents();
document.getElementById('updateButton').innerHTML = "";
}
function registerEvents()
{
obj = document.forms[0].elements;
for(var i = 0; i<obj.length; i++)
{
if(obj[i].name)
{
if(obj[i].name.indexOf('[]'))
{
obj[i].onchange = refreshForm;
if (obj[i].captureEvents) obj[i].captureEvents(Event.CHANGE);
obj[i].onclick = function() {setFocus(this.name);}
if (obj[i].captureEvents) obj[i].captureEvents(Event.CLICK);
}

}
}
}
function setFocus(obj)
{
focused = obj;
}
function loadURL(url, args)
{
xmlhttp.onreadystatechange = handleResponse;
xmlhttp.open("GET", url+"?"+args);
xmlhttp.send(null);
}
function handleResponse()
{
if(xmlhttp.readyState == 4 &&xmlhttp.status ==200)
{
document.getElementById("quote").innerHTML = xmlhttp.responseText;
registerEvents();

}
}
function refreshForm()
{
obj = document.forms[0].elements;
var args = "";
for(var i =0; i<obj.length; i++)
{
if(obj[i].name)
{
args+=obj[i].name+'='+obj[i].value+'&';
}
}
loadURL('procquote.php', args);
}
</script>
</head>
<body>

<div id = "main">
<h1 class = "banner"><a href = "index.php"><span>WeQuote Windows</span><img src = "images/wequote.jpg" alt = "We Quote Windows" /></a></h1>
<img src = "images/crumb2.jpg" />
<form id = "quote" method = "get" action ="quote.php">
<fieldset><legend>Windows</legend> <div class = "row">Qty <input type = "text" name = "Wqty[]" size = "2" value = "1" /> x Width(cms) <input type = "text" name = "Wwidth[]" size = "3" /> x Height(cms) <input type = "text" name = "Wheight[]" size = "3" /> = </strong></div>

</fieldset>
<fieldset><legend>Doors</legend> <div class = "row">Qty <input type = "text" name = "Dqty[]" size = "2" value = "1" /> x Width(cms) <input type = "text" name = "Dwidth[]" size = "3" /> x Height(cms) <input type = "text" name = "Dheight[]" size = "3" /> = </strong></div>

</fieldset>
<span id = "updateButton"><fieldset><input type = "submit" value = "update" class = "getQuote" /></fieldset></span>

</form>
<br class = "clear" />
</div>
<div id = "footer">Important links go here</div>
</body>
</html>

NancyJ

05-02-2006, 07:35 AM

Also, I've noticed that in IE, the form updating works the first time but then not again after that but it gives no error message at all.