JavaScript: Get the value for form name attribute?

Forum Moderators: open

Message Too Old, No Replies

JavaScript: Get the value for form name attribute?

Three name="test123" fields, how to determine value without using an ID?

JAB Creations

3:14 am on May 22, 2010 (gmt 0)

Is there a way to simply discover the value for a "name" in JavaScript on a form?

In example...

<input name="test123" value="1" />
<input checked="checked" name="test123" value="2" />
<input name="test123" value="3" />

I just want to determine the value for "test123" in the above code (which would be 2 in my example). I do NOT want to manually/statically reference id's by using getElementById.

- John

daveVk

8:42 am on May 22, 2010 (gmt 0)

Are they all named test123 by intent ?, If so why is value 2 rather than 1 OR 3 ?

Are they assumed to be type=radio ? ( only one can be checked )

rocknbil

7:20 pm on May 22, 2010 (gmt 0)


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01  
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Untitled</title> 
<script type="text/javascript"> 
function getElementNames(form) { 
 for (j=0;j<form.elements.length;j++) { 
 msg = 'element name: ' + form.elements[j].name + 
 ' type: ' + form.elements[j].type + 
 ' value ' + form.elements[j].value; 
 alert(msg); 
 } 
 return false; 
} 
</script> 
</head> 
<body> 
<form action="" onsubmit="return getElementNames(this);"> 
<p><input type="text" name="test123" value="1"></p> 
<p><input type="checkbox" checked name="test123" value="2"></p> 
<p><input type="text" name="test123" value="3"> </p> 
<input type="submit" value="test it"> 
</form> 
</body> 
</html>

You'll have an array of "test123" though, or in perl, test1230, test1231, test1232 . . . .

Fotiman

1:42 pm on May 24, 2010 (gmt 0)

As was pointed out already, your inputs are missing a type (though I assume you intended them to be type="radio").

You can access a form element by one of the following methods:

document.forms["formName"]
ex: document.forms["myForm"]
document.forms[index]
ex: document.forms[0]

Each form element contains an "elements" array that you could then iterate through, as in rocknbil's example. You would need to check the "checked" property to find the selected radio button. Alternatively, you can access the named set of radio buttons directly from the form element:

document.forms["myForm"].test123[0]
document.forms["myForm"].test123[1]
document.forms["myForm"].test123[2]

In that example, document.forms["myForm"].test123 is an array.

JAB Creations

8:18 pm on Jun 2, 2010 (gmt 0)

Unfortunately since the site now validates BBcode in quotes I have to post using the code BBcode now instead of quotes. Can't blame me, blame the system!

Any way here is what I came up with, thanks for the input!

- John

********************************************

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>JavaScript Dynamic Form Submission Test</title>
<script type="text/javascript">
//<![CDATA[
function events_forms()
{
 var forms = document.getElementsByTagName('form');
 var submit = document.getElementsByTagName('input');

 for (var f=0;f<forms.length;f++)
 {
 if (window.addEventListener)
 {
 forms[f].addEventListener('submit', function(e) {e.preventDefault(); ajax_post_parameters(e.target.id);},false);
 }
 else if (window.attachEvent)
 {
 forms[f].attachEvent('onsubmit', function(e,form) {e.returnValue=false; ajax_post_parameters(e.srcElement.id);});
 }
 }
}


function ajax_post_parameters(id)
{
 var form = document.getElementById(id);
 var param = '';

 for (var i=0;i<form.elements.length;i++)
 {
 if (form.elements[i].name!=undefined)
 {
 if (form.elements[i].type=='checkbox' || form.elements[i].type=='radio') {if (form.elements[i].checked==true) {param += form.elements[i].name+'='+form.elements[i].value+'&';}}
 else if (form.elements[i].type=='hidden') {param += form.elements[i].name+'='+form.elements[i].value+'&';}
 else if (form.elements[i].nodeName=='select') {param += form.elements[i].name+'='+form.elements[i].value+'&';}
 else if (form.elements[i].type=='textarea') {param += form.elements[i].name+'='+form.elements[i].value+'&';}
 }
 }
 param += option.name+'=1';
 alert(param);
 //return param;
}


function forms()
{
 var forms = document.getElementsByTagName('form');
 var submit = document.getElementsByTagName('input');

 for (var f=0;f<forms.length;f++)
 {
 if (window.addEventListener)
 {
 forms[f].addEventListener('submit', function(e) {e.preventDefault(); },false);
 }
 else if (window.attachEvent)
 {
 forms[f].attachEvent('onsubmit', function(e) {e.returnValue=false;});
 }

 for (var i=0;i<submit.length;i++)
 {
 if (submit[i].type=='submit')
 {
 if (window.addEventListener)
 {
 submit[i].addEventListener('click', function(e) {option.name = this.name;},false);
 }
 else if (window.attachEvent)
 {
 submit[i].attachEvent('onclick', function(e) {option.name = e.srcElement.name;});
 }
 }
 }
 }
}


var option = new function() {this.name = '';}

window.onload = function()
{
 events_forms();
 forms();
}
//]]>
</script>
</head>

<body>

<form action="http://localhost/" id="form_1" method="post">
<fieldset>
<legend>Checkbox</legend>
<div><label for="form_1_checkbox_1"><input id="form_1_checkbox_1" name="form_1_checkbox_1" type="checkbox" value="1" checked="checked" />Text</label></div>
<div><label for="form_1_checkbox_2"><input id="form_1_checkbox_2" name="form_1_checkbox_2" type="checkbox" value="1" />Text</label></div>
</fieldset>

<fieldset>
<legend>Radio</legend>
<div><label for="form_1_radio_1"><input id="form_1_radio_1" name="form_1_radio" type="radio" value="1" checked="checked" />Text</label></div>
<div><label for="form_1_radio_2"><input id="form_1_radio_2" name="form_1_radio" type="radio" value="2" />Text</label></div>
</fieldset>

<fieldset>
<legend>Select</legend>
<div><label for="form_1_select">Choice: <select id="form_1_select" name="form_1_select"><option value="1">Item 1</option><option selected="selected" value="2">Item 2</option><option value="3">Item 3</option></select></label></div>
</fieldset>

<fieldset>
<legend>Select</legend>
<div><textarea cols="32" id="form_1_textarea" name="form_1_textarea" rows="4">textarea test</textarea></div>
</fieldset>

<fieldset>
<legend>Submit</legend>
<input name="form_1_hidden" type="hidden" value="1" />
<input name="form_1_invalid" type="submit" value="Invalid Report" />
<input name="form_1_valid" type="submit" value="Valid Report" />
</fieldset>
</form>


<form action="http://localhost/" id="form_2" method="post">
<fieldset>
<legend>Checkbox</legend>
<div><label for="form_2_checkbox_1"><input id="form_2_checkbox_1" name="form_2_checkbox_1" type="checkbox" value="1" checked="checked" />Text</label></div>
<div><label for="form_2_checkbox_2"><input id="form_2_checkbox_2" name="form_2_checkbox_2" type="checkbox" value="1" />Text</label></div>
</fieldset>

<fieldset>
<legend>Radio</legend>
<div><label for="form_2_radio_1"><input id="form_2_radio_1" name="form_2_radio" type="radio" value="1" checked="checked" />Text</label></div>
<div><label for="form_2_radio_2"><input id="form_2_radio_2" name="form_2_radio" type="radio" value="2" />Text</label></div>
</fieldset>

<fieldset>
<legend>Select</legend>
<div><label for="form_2_select">Choice: <select id="form_2_select" name="form_2_select"><option value="1">Item 1</option><option selected="selected" value="2">Item 2</option><option value="3">Item 3</option></select></label></div>
</fieldset>

<fieldset>
<legend>Select</legend>
<div><textarea cols="32" id="form_2_textarea" name="form_2_textarea" rows="4">textarea test</textarea></div>
</fieldset>

<fieldset>
<legend>Submit</legend>
<input name="form_2_hidden" type="hidden" value="1" />
<input name="form_2_invalid" type="submit" value="Invalid Report" />
<input name="form_2_valid" type="submit" value="Valid Report" />
</fieldset>
</form>

</body>
</html>

********************************************

daveVk

5:03 am on Jun 3, 2010 (gmt 0)

Consider using one of js libraries to do the form serialization.

Compare [jquery.malsup.com...] how well they work.

references to form.elements[ i ].value should be encodeURIComponent( form.elements[ i ].value )

JAB Creations

8:31 am on Jun 3, 2010 (gmt 0)

Thanks for the suggestion however I don't do frameworks.

- John