OnClick Button and Variable

Results 1 to 3 of 3

Thread: OnClick Button and Variable

  1. #1
    Linda Kasahara Guest

    Default OnClick Button and Variable

    I am new to ASP and VBScript and need some help. Basically, on a form I have a button label "A" and I would like to have the letter "A" assigned to a variable when a user clicks on that button (the end result is a query of all records that begin with "A" on a database). I tried a few different ways but they didn&#039t work. Does anybody know how? Thanks in advance.<BR><BR> <BR>

  2. #2
    Join Date
    Dec 1969
    Posts
    9

    Default RE: OnClick Button and Variable

    Linda, <BR><BR>Here are two ways (one for IE4 or better and Netscape Navigator 4.08 or there abouts. <BR><BR>First file to create is the result.asp file. This just has one line:<BR>&#060;% Response.Write Request.Form("SEARCHLETTER") %&#062;<BR><BR>This is just to show you that your search letter is indeed getting passed to the ASP page. Both versions use a hidden form field to store the search letter. Appropriately, I named it SEARCHLETTER and is just another INPUT type HTML objects with the TYPE parameter equal to HIDDEN. This allows the browser to send it back to the server when the form is submitted is the form of a name/value pair. In this case, SEARCHLETTER is the name and the value for it will get set programmatically in the java script code. This next code is the IE version of a simple A-Z search bar (call it iesearch.htm):<BR><BR>&#060;HTML&#062;<BR>&#060;SC RIPT LANGUAGE="JavaScript"&#062;<BR>function setSearchLetter()<BR>{<BR><BR>if (event.srcElement.type=="button")<BR> {<BR> document.MyForm.SEARCHLETTER.value=event.srcElemen t.value;<BR> document.MyForm.submit();<BR> }<BR><BR>}<BR>&#060;/SCRIPT&#062;<BR><BR>&#060;BODY&#062;<BR>&#060;FORM METHOD=POST NAME=MyForm ACTION="result.asp" onClick="setSearchLetter();"&#062;<BR>&#060;INPUT TYPE=BUTTON NAME="A" VALUE="A"&#062;&#060;INPUT TYPE=BUTTON NAME="B" VALUE="B"&#062;&#060;INPUT TYPE=BUTTON NAME="C" VALUE="C"&#062;&#060;INPUT TYPE=BUTTON NAME="D" VALUE="D"&#062;&#060;INPUT TYPE=BUTTON NAME="E" VALUE="E"&#062;&#060;INPUT TYPE=BUTTON NAME="F" VALUE="F"&#062;&#060;INPUT TYPE=BUTTON NAME="G" VALUE="G"&#062;&#060;INPUT TYPE=BUTTON NAME="H" VALUE="H"&#062;&#060;INPUT TYPE=BUTTON NAME="I" VALUE="I"&#062;&#060;INPUT TYPE=BUTTON NAME="J" VALUE="J"&#062;&#060;INPUT TYPE=BUTTON NAME="K" VALUE="K"&#062;&#060;INPUT TYPE=BUTTON NAME="L" VALUE="L"&#062;&#060;INPUT TYPE=BUTTON NAME="M" VALUE="M"&#062;&#060;INPUT TYPE=BUTTON NAME="N" VALUE="N"&#062;&#060;INPUT TYPE=BUTTON NAME="O" VALUE="O"&#062;&#060;INPUT TYPE=BUTTON NAME="P" VALUE="P"&#062;&#060;INPUT TYPE=BUTTON NAME="Q" VALUE="Q"&#062;&#060;INPUT TYPE=BUTTON NAME="R" VALUE="R"&#062;&#060;INPUT TYPE=BUTTON NAME="S" VALUE="S"&#062;&#060;INPUT TYPE=BUTTON NAME="T" VALUE="T"&#062;&#060;INPUT TYPE=BUTTON NAME="U" VALUE="U"&#062;&#060;INPUT TYPE=BUTTON NAME="V" VALUE="V"&#062;&#060;INPUT TYPE=BUTTON NAME="W" VALUE="W"&#062;&#060;INPUT TYPE=BUTTON NAME="X" VALUE="X"&#062;&#060;INPUT TYPE=BUTTON NAME="Y" VALUE="Y"&#062;&#060;INPUT TYPE=BUTTON NAME="Z" VALUE="Z"&#062;<BR>&#060;INPUT TYPE=HIDDEN NAME="SEARCHLETTER" VALUE=""&#062;<BR>&#060;/FORM&#062;<BR>&#060;/BODY&#062;<BR>&#060;/HTML&#062;<BR><BR>This code is pretty simple. I set a global handler for any click events that occur in the FORM by putting the code onClick=&#039setSearchLetter();" inside the FORM tag. Any time the user clicks ANYTHING in the FORM whether it is a button, text box, or just the white screen itself, this event will fire. That is why I have a check to see that it is a button (note the code checking the event.srcElement.type) and then if so, I can safely set the hidden field value equal to the value of the srcElement of the event. <BR><BR>That needs a little explaining. Simply put, event will contain the information about the event that has just occurred. srcElement is an object reference that contains the object that the event occurred on. In this case, it will be one of the A-Z buttons. The .value reference is simply the &#039value&#039 variable of a particular button object and in this case, will be the actual A-Z letter that we set explicitly in the HTML definition &#060;INPUT TYPE=BUTTON NAME="A" VALUE="A"&#062;. This is a generic handler, so that any button added to the HTML form would work fine without having to modify the script. The next line after setting the hidden form variable equal to the letter clicked simply submits the form to the server by explicitly calling a submit of the form.<BR><BR>The Netscape version was also for a challenge to me as I only develop for IE professionally as that is our standard where I work. So, this version is very similar but a few key differences. The code, then the explanation (call it nssearch.asp) :<BR><BR>&#060;HTML&#062;<BR>&#060;SCRIPT LANGUAGE="JavaScript"&#062;<BR><BR>function setClicked(event)<BR>{<BR>document.MyForm.SEARCHLE TTER.value=event.target.name;<BR>}<BR><BR>function initialize()<BR>{<BR>window.captureEvents(Event.CL ICK);<BR>window.onclick = setClicked;<BR>}<BR><BR>&#060;/SCRIPT&#062;<BR><BR>&#060;BODY onLoad="initialize();"&#062;<BR>&#060;FORM METHOD=POST NAME=MyForm ACTION="result.asp"&#062;<BR>&#060;INPUT TYPE=SUBMIT NAME="A" VALUE="A"&#062;&#060;INPUT TYPE=BUTTON NAME="B" VALUE="B"&#062;&#060;INPUT TYPE=BUTTON NAME="C" VALUE="C"&#062;&#060;INPUT TYPE=SUBMIT NAME="D" VALUE="D"&#062;&#060;INPUT TYPE=SUBMIT NAME="E" VALUE="E"&#062;&#060;INPUT TYPE=SUBMIT NAME="F" VALUE="F"&#062;&#060;INPUT TYPE=SUBMIT NAME="G" VALUE="G"&#062;&#060;INPUT TYPE=SUBMIT NAME="H" VALUE="H"&#062;&#060;INPUT TYPE=SUBMIT NAME="I" VALUE="I"&#062;&#060;INPUT TYPE=SUBMIT NAME="J" VALUE="J"&#062;&#060;INPUT TYPE=SUBMIT NAME="K" VALUE="K"&#062;&#060;INPUT TYPE=SUBMIT NAME="L" VALUE="L"&#062;&#060;INPUT TYPE=SUBMIT NAME="M" VALUE="M"&#062;&#060;INPUT TYPE=SUBMIT NAME="N" VALUE="N"&#062;&#060;INPUT TYPE=SUBMIT NAME="O" VALUE="O"&#062;&#060;INPUT TYPE=SUBMIT NAME="P" VALUE="P"&#062;&#060;INPUT TYPE=SUBMIT NAME="Q" VALUE="Q"&#062;&#060;INPUT TYPE=SUBMIT NAME="R" VALUE="R"&#062;&#060;INPUT TYPE=SUBMIT NAME="S" VALUE="S"&#062;&#060;INPUT TYPE=SUBMIT NAME="T" VALUE="T"&#062;&#060;INPUT TYPE=SUBMIT NAME="U" VALUE="U"&#062;&#060;INPUT TYPE=SUBMIT NAME="V" VALUE="V"&#062;&#060;INPUT TYPE=SUBMIT NAME="W" VALUE="W"&#062;&#060;INPUT TYPE=SUBMIT NAME="X" VALUE="X"&#062;&#060;INPUT TYPE=SUBMIT NAME="Y" VALUE="Y"&#062;&#060;INPUT TYPE=SUBMIT NAME="Z" VALUE="Z"&#062;<BR>&#060;INPUT TYPE=HIDDEN NAME="SEARCHLETTER" VALUE=""&#062;<BR>&#060;/FORM&#062;<BR>&#060;/BODY&#062;<BR>&#060;/HTML&#062;<BR><BR><BR>With Netscape, it would seem that you have to tell the browser you want to capture a particular event and then set the event handler to a particular function that will handle that event. Basically with the lines of java script,<BR><BR>window.captureEvents(Event.CLICK);< BR>window.onclick = setClicked;<BR><BR>you are instructing the browser to capture the mouse click event and then setting the function (setClicked is a function pointer NOT a variable reference) that will get triggered anytime a user clicks on the window. Here is the catch. Since I specified only SUBMIT button types for all the A-Z buttons, the click event fires any time the user clicks anywhere on the window. Potentionally this means the hidden variable getting set in the setClicked function may get set to nothing (empty string or undefined) at this point. The good thing is that the Click event also fires when you click a button AND before the form gets submitted, meaning this hidden field will always contain a valid value. Overkill maybe, but hope this helps.<BR><BR>Sean Kelly<BR><BR><BR>

  3. #3
    Linda Kasahara Guest

    Default RE: OnClick Button and Variable

    Sean,<BR><BR>Thank you for the detail instructions. I tried the IE Search method and it works very well. Will try the Netscape method later.<BR><BR>Thanks again.<BR><BR>Linda<BR><BR>

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •