Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 7232

Jul 30th, 2008

How to determine which button was pressed?

Expand Post »

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:

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:

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.

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

Similar Threads

Setting the command buttons Forecolor in Visual Basic 4 / 5 / 6
how to create array of button in C# in C#
Updated : Simple ASP.Net Login Page in ASP.NET
Computer doesn't boot in Troubleshooting Dead Machines
A multilingual coded Hello World! thread in Legacy and Other Languages

n00b0101

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since Jul 2008

Permalink

Aug 1st, 2008

Re: How to determine which button was pressed?

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

jel3

Reputation Points: 12

Solved Threads: 3

Newbie Poster

Offline

18 posts
since May 2008

Permalink

Sep 1st, 2008

Re: How to determine which button was pressed?

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

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>

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>

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>

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Validating email with javascrip problem

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Tooltips for feed description

DaniWeb Message

Cancel Changes

User Name
Password