|
|
|
|
Like this code?
Show the author your appreciation.
|
|
| |
Auto balancer
In this example we see an example of how to auto balance two list boxs...
Whenever one of the two is selected another is automatically changed.
Example – When you select 40% in one box, the other box is set to 60% and vice versa.
We do this using function balance(id) and calling it when we make a change on the combo box value. And subtract the value from 100 & set another combo according to that.
| <html><head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function balance(id){
if(id == "Sel1"){
ValueSet = document.getElementById("Sel1").value;
if(ValueSet == " " && ValueSet != ""){
document.getElementById("Sel2").value = " ";
} else {
document.getElementById("Sel2").value = 100 - ValueSet;
}
} else {
ValueSet = document.getElementById("Sel2").value;
if(ValueSet == " " && ValueSet != ""){
document.getElementById("Sel1").value = " ";
} else {
document.getElementById("Sel1").value = 100 - ValueSet;
}
}
}
// End hiding -->
</SCRIPT>
</head><body>
<table>
<tr>
<td><strong><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Select1</font></strong></td>
<td><strong><font size="1" face="Verdana, Arial, Helvetica, sans-serif"> </font></strong></td>
<td><strong><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Select2</font></strong></td>
</tr>
<tr>
<td align="Center"><SELECT NAME="Sel1" id="Sel1" onChange="balance('Sel1');">
<OPTION VALUE=" "> </option>
<OPTION VALUE="0" >0</option>
<OPTION VALUE="10" >10</option>
<OPTION VALUE="20" >20</option>
<OPTION VALUE="30" >30</option>
<OPTION VALUE="40" >40</option>
<OPTION VALUE="50" >50</option>
<OPTION VALUE="60" >60</option>
<OPTION VALUE="70" >70</option>
<OPTION VALUE="80" >80</option>
<OPTION VALUE="90" >90</option>
<OPTION VALUE="100" >100</option>
</select></td>
<td> </td>
<td align="Center"><SELECT NAME="Sel2" id="Sel2" onChange="balance('Sel2');">
<OPTION VALUE=" "> </option>
<OPTION VALUE="0" >0</option>
<OPTION VALUE="10" >10</option>
<OPTION VALUE="20" >20</option>
<OPTION VALUE="30" >30</option>
<OPTION VALUE="40" >40</option>
<OPTION VALUE="50" >50</option>
<OPTION VALUE="60" >60</option>
<OPTION VALUE="70" >70</option>
<OPTION VALUE="80" >80</option>
<OPTION VALUE="90" >90</option>
<OPTION VALUE="100" >100</option>
</select></td>
</tr>
</table> | | |
|
| Javascript URL and Email Validation Categories : Java Script, Data Validation, Form Processing, Email, URLs | | | Adding a Filter to a Text Element Categories : Java Script, Data Validation, Form Processing | | | Form validations using javascript and including all validations in one message Categories : HTML and PHP, Java Script, Form Processing | | | Show hide table rows to make dynamic forms Categories : Beginner Guides, Java Script, Form Processing, HTTP | | | Building a Dynamic Form using Javascript and innerHTML. Add form elements in realtime without refreshing the page. Categories : Java Script, Form Processing | | | Upload any fixed type of files, control file type through javascript and encrypt filename using php so file not get overwrite Categories : PHP, Java Script, Functions, PHP References, Form Processing | | | Form Processing : with alert Highlight field name which is not filled by user Categories : Java Script, Form Processing, Data Validation, Beginner Guides, Web Design | | | Conditional Check - a script that allows a user to submit a form only if the user check a checkbox. Categories : HTML, Java Script, Form Processing, Beginner Guides | | | PHP and javascript mouseover, mouseout, and mousedown events Categories : PHP, Java Script, Form Processing, Beginner Guides | | | Changing the Style of form objects using the JavaScript OnClick method. Categories : Java Script, Form Processing, Beginner Guides, CSS | | | JavaScript dropdown list menu to switch any page. Categories : Java Script, Beginner Guides, Form Processing | | | showing Help (assistance) to the user while filling html forms. Categories : HTML, Java Script, Form Processing | | | Hilight Form Element onFocus Categories : Java Script, Form Processing, CSS | | | Zephyr: AJAX Based Framework for PHP5 Developers Categories : PHP, AJAX, Frameworks, Java Script, Web Applications | | | javascript doesn't accept a fieldname with [] Categories : Java Script | |
|
|
|