AJAX

How to determine which button was pressed?

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jul 2008

Posts: 1

Reputation: n00b0101 is an unknown quantity at this point

Solved Threads: 0

n00b0101

Offline

Newbie Poster

How to determine which button was pressed?

Jul 30th, 2008

I'm trying to determine which button was pressed when I'm unsure of how many buttons there actually are...

The smarty template that I'm using creates the input buttons based on a query that happens in the associated php script. I don't know how many input fields will actually be generated, otherwise, I'd just add an event listener for all of them. But, I can't seem to get the yui code to "figure out" which button was pressed. When the user presses one of the buttons, then a form should display.

This is the smarty code:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
{foreach from=$value.sample_query key=key item=value2 name="samp"}
      {foreach from=$value2 item=value3}
      {$value3} <input type="button" id="sample{$key}" name="sample[{$key}]" value="" />
      {/foreach}
{/foreach}
{foreach from=$value.sample_query key=key item=value2 name="samp"}
      {foreach from=$value2 item=value3}
      {$value3} <input type="button" id="sample{$key}" name="sample[{$key}]" value="" />
      {/foreach}
{/foreach}

So, what results is something that looks like this:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<input type="button" id="sample0" name="sample[0]" value="" />
<input type="button" id="sample1" name="sample[1]" value="" />
<input type="button" id="sample2" name="sample[2]" value="" />
<input type="button" id="sample3" name="sample[3]" value="" />
<input type="button" id="sample0" name="sample[0]" value="" />
<input type="button" id="sample1" name="sample[1]" value="" />
<input type="button" id="sample2" name="sample[2]" value="" />
<input type="button" id="sample3" name="sample[3]" value="" />

The YUI code is below, which will be used to popup a form depending upon which button was pressed. Wherever there's a reference to "sample0" in the code below, *that's* what needs to change to the id of the button that was actually pressed.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
YAHOO.namespace("forms.container");
 
function init() {
 
	// Define various event handlers for Dialog
	var handleSubmit = function() {
		this.submit();
	};
	var handleCancel = function() {
		this.cancel();
	};
	var handleSuccess = function(o) {
		var response = o.responseText;
		response = response.split("<!")[0];
		document.getElementById("resp").innerHTML = response;
	};
	var handleFailure = function(o) {
		alert("Submission failed: " + o.status);
	};
 
	// Instantiate the Dialog
	YAHOO.forms.container.sample0 = new YAHOO.widget.Dialog("sample0", 
							{ width : "330px",
							  fixedcenter : true,
							  zindex: 100,
							  visible : false, 
							  constraintoviewport : false,
							  buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
								      { text:"Cancel", handler:handleCancel } ]
							});
 
	// Wire up the success and failure handlers
	YAHOO.forms.container.sample0.callback = { success: handleSuccess,
						     failure: handleFailure };
 
 
	// Render the Dialog
	YAHOO.forms.container.sample0.render();
 
	YAHOO.util.Event.addListener("showsample0", "click", YAHOO.forms.container.sample0.show, YAHOO.forms.container.sample0, true);
	YAHOO.util.Event.addListener("hidesample0", "click", YAHOO.forms.container.sample0.hide, YAHOO.forms.container.sample0, true);
 
}
 
YAHOO.util.Event.onDOMReady(init);
YAHOO.namespace("forms.container");
 
function init() {
	
	// Define various event handlers for Dialog
	var handleSubmit = function() {
		this.submit();
	};
	var handleCancel = function() {
		this.cancel();
	};
	var handleSuccess = function(o) {
		var response = o.responseText;
		response = response.split("<!")[0];
		document.getElementById("resp").innerHTML = response;
	};
	var handleFailure = function(o) {
		alert("Submission failed: " + o.status);
	};
	
	// Instantiate the Dialog
	YAHOO.forms.container.sample0 = new YAHOO.widget.Dialog("sample0", 
							{ width : "330px",
							  fixedcenter : true,
							  zindex: 100,
							  visible : false, 
							  constraintoviewport : false,
							  buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
								      { text:"Cancel", handler:handleCancel } ]
							});
							
	// Wire up the success and failure handlers
	YAHOO.forms.container.sample0.callback = { success: handleSuccess,
						     failure: handleFailure };
							 
	
	// Render the Dialog
	YAHOO.forms.container.sample0.render();
	
	YAHOO.util.Event.addListener("showsample0", "click", YAHOO.forms.container.sample0.show, YAHOO.forms.container.sample0, true);
	YAHOO.util.Event.addListener("hidesample0", "click", YAHOO.forms.container.sample0.hide, YAHOO.forms.container.sample0, true);
 
}
 
YAHOO.util.Event.onDOMReady(init);

•

Join Date: May 2008

Posts: 18

Reputation: jel3 is an unknown quantity at this point

Solved Threads: 3

jel3

Offline

Newbie Poster

Re: How to determine which button was pressed?

Aug 1st, 2008

you can add onclick="your show form function" to the inputs

--
jel3
http://blog.jelthure.com

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: How to determine which button was pressed?

Sep 1st, 2008

Please feel free to modify this code to match your needs. If you have any question regarding this code you can document.write('Me on my inbox'). lol! Have a good day...

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Some title</titles>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Some title</titles>

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<script type="text/javascript">
<!-- BEGIN HIDING
/* All codes are tested before release, so you are well assured that all of my codes are hustle free... 
This example will determine which button is clicked.
code is as follows: */
 
document.onclick = function( whichOne )
{ whichOne = whichOne ? whichOne : window.event;
  thisButton = whichOne.target ? whichOne.target : whichOne.srcElement;
 
  if (( thisButton.name ) && ( thisButton.name == 'button1' )) { alert( '\n' + thisButton.title + ' was clicked!' ); }
}
// DONE HIDING -->
</script>
<script type="text/javascript">
<!-- BEGIN HIDING
/* All codes are tested before release, so you are well assured that all of my codes are hustle free... 
This example will determine which button is clicked.
code is as follows: */
 
document.onclick = function( whichOne )
{ whichOne = whichOne ? whichOne : window.event;
  thisButton = whichOne.target ? whichOne.target : whichOne.srcElement;

  if (( thisButton.name ) && ( thisButton.name == 'button1' )) { alert( '\n' + thisButton.title + ' was clicked!' ); }
}
// DONE HIDING -->
</script>

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
</head>
<body>
<p>
<form>
<input type="button" name="button1" title="Button One" value="Button 1" />
<input type="button" name="button1" title="Button Two" value="Button 2" />
<input type="button" name="button1" title="Button Three" value="Button 3" />
<input type="button" name="button1" title="Button Four" value="Button 4" />
</form>
</p>
</body>
</html>
</head>
<body>
<p>
<form>
<input type="button" name="button1" title="Button One" value="Button 1" />
<input type="button" name="button1" title="Button Two" value="Button 2" />
<input type="button" name="button1" title="Button Three" value="Button 3" />
<input type="button" name="button1" title="Button Four" value="Button 4" />
</form>
</p>
</body>
</html>