1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 12:45 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Capture submit button's name via event listener?

Two submit buttons each with different name value.

         

JAB Creations

6:13 pm on May 25, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'm trying to figure out how to capture the submit button's name attribute's value via an event listener.

I want it to do something similar to this...

<form><fieldset>
<legend>Submit</legend>
<input onclick="alert(this.name);" name="invalid" type="submit" value="Invalid Report" />
<input onclick="alert(this.name);" name="valid" type="submit" value="Valid Report" />
</fieldset>
</form>


I've setup a basic test page though I've got no clue what to do next, suggestions please?

- John

example.xhtml
<?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 Name Attribute Capture Test</title>
<script type="text/javascript">
//<![CDATA[
function events()
{
if (window.addEventListener)
{
if (document.getElementById('name_test'))
{
document.getElementById('name_test').addEventListener('submit', function(e) {e.preventDefault(); alert('capture submit name here?');},false);
}
}
}

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

<body>

<form action="http://localhost/" id="name_test" method="post">
<fieldset>
<legend>Button</legend>
<input name="invalid" type="submit" value="Invalid Report" />
<input name="valid" type="submit" value="Valid Report" />
</fieldset>
</form>

</body>
</html>

subexpression

9:31 pm on May 29, 2010 (gmt 0)

10+ Year Member



Hi JAB Creations,

Try this: 


<?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>
<script type="text/javascript">
var test = new function(){
var self = this;
self.events = {
'ev': '',
'etarget': '',
'addevent': function(eventtype,obj,method){
try {
if(obj.addEventListener){obj.addEventListener(eventtype,method,true);}
else if(obj.attachEvent){obj.attachEvent('on' + eventtype,method);}
else {return false;}
}catch(err){}
return true;
},
'targets': function(e){
this.ev = e;
if(!e){
this.ev = window.event;
}
this.etarget = this.ev.target ? this.ev.target : this.ev.srcElement;
},
};
self.submit = {
'inputs': '',
'load': function(name1,name2){
this.inputs = new Array(document.forms[0].elements[name1],document.forms[0].elements[name2]);
self.events.addevent('click',document,this.click)
},
'click': function(e){
self.events.targets(e);
for(var i = 0; i < self.submit.inputs.length; i++){
if(self.events.etarget == self.submit.inputs[i]){
alert(self.submit.inputs[i].value);
}
}
}
};
};
window.onload = function(){
test.submit.load('valid','invalid');
}
</script>
</head>
<body>
<form action="http://localhost/" id="name_test" method="post"> 
<fieldset> 
<legend>Button</legend> 
<input name="invalid" type="submit" value="Invalid Report" /> 
<input name="valid" type="submit" value="Valid Report" /> 
</fieldset> 
</form> 
</body>
</html>

JAB Creations

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

WebmasterWorld Senior Member 10+ Year Member



Thanks for your reply sub!

I ended up going with a JavaScript class that even works in Internet Exploder 6...

- 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>

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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 12:45 am May 14, 2026