Member Avatar for n00b0101

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:

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

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

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);
  • 3 Contributors
  • 2 Replies
  • 213 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for jel3

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

Member Avatar for essential

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

<!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>
<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>
</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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.