There are small and simple JavaScript snippets that can be used to achieve very easy actions. Whenever you need to perform such actions, if you google for help, you will definitely find the answer.
However I want to gather some of those code snippets in one article, just as a future reference for me, and valuable code deposit for you.
So let's see what we got here!
How to insert a value into a text box, selecting an option from a listbox
The title says it all. Let's imagine you have an input box:
<input name="tobechanged" type="text" id="tobechanged" size="50" />
and you want to change its value taking it from a listbox. The magic is done using the OnChange event of the select box with document.getElementById('tobechanged').value=this.options[this.selectedIndex].value. Notice that tobechanged is the name of your input box.
<select name="select" onChange="document.getElementById('tobechanged').value=this.options[this.selectedIndex].value;">
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
</select>
You can achieve the same effect, if you want to do it for more then one field. If you have a table with different values, you can put a button that will trigger a function (in this case called copyme). The onClick event will execute a function whereby it inserts passed values in other input boxes. In the example we populate two elements with id set to "id1" and "id2". The <td> tag has the onClick trigger:
<td onclick="copyme('<%=(Recordset.Fields.Item("field1").Value)%>', '<%=(Recordset.Fields.Item("field2").Value)%>')"><input name="" type="button" value="Select"></td>
And the function is:
<script type="text/javascript">
<!--
function copyme(var1, var2){
document.getElementById('id1').value=var1;
document.getElementById('id2').value=var2;
}
//-->
</script>
How to clear the content of an element
In order to clear the content of an element we use a simple function, which will set the value of the element to an empty string. Let's create the input box with an id set to "input_box":
<input name="input_box" type="text" id="input_box" onClick="clearme('input_box')"/>
We use the onClick trigger to execute the clearme function:
<script type="text/javascript">
<!--
function clearme(id){
document.getElementById(id).value=''
}
//-->
</script>
Please notice that '' is two ' without space in between.
How to ask for confirmation before performing an action
When performing some actions, you might need to warn the user and ask for confirmation. To do so, in the form we place a little snippet triggered by onSubmit. In the example we have a form that deletes a record and we want to be sure the action is indeed to be taken:
<form action="deletefunction" method="post" name="form" id="form" onSubmit="return confirm ('Confirm delete action?')">
<input name="Submit" type="submit" value="Delete" />
<input type="hidden" name="RecordId" value="<%= Recordset.Fields.Item("id").Value %>">
</form>
When the user submits the delete request, before performing it, a prompt will pop-up asking for confirmation.
How to close a window
If you need to close a window, you can use a small function placed where needed.For example, you might need to perform some actions and then close the window, without confirmation or warnings. In that case you can place the closing command in the <body> tag with onLoad event:
<body onLoad="self.close()">
Another method would be to use a form, where the onClick event will trigger the closing of the window:
<form name="form" method="post" action="" onClick="javascript:window.close();">
<input type="submit" name="Submit" value="Close">
</form>
As a side note remember that you cannot close a window that has not been opened as child. If you copy the script in a page it won't work. If you use a link and open the page from it, it will work. Enjoy.
And please if you have other small and useful snippets, report them in the comments section below!
0 thoughts:
Post a Comment
Comments are moderated. I apologize if I don't publish comments immediately.
However, I do answer to all the comments.