JavaScript form activity
From w3cyberlearnings
Using javascript to clear or reset form
- Submit a form by using javascript
Reset form without using javascript
<input type="reset" value="reset form"/>
Reset form using javascript
<input type="button" value="reset form" onClick="this.form.reset();"/>
Using javaScript to submit form
- Submit a form by using javascript
Submit form without using javascript
<input type="submit" value="submit form"/>
Submit form using javascript
<input type="button" value="submit form" onClick="this.form.submit()"/>
Change a select dropdown list, trigger the submit form
<form action="/php_submit.php" method="post" name="myform">
<select name="my_age_range" onchange="this.form.submit()">
<option value="1">15-25</option>
<option value="2">26-35</option>
<option value="3">26-35</option>
</select>
</form>
Trigger the reset form when the select a dropdown list
<select name="something" onchange="this.form.reset();">
<option value="1">...</option>
</select>
Open a new window when select option selected
<select name="something" onchange="window.open('http://www.w3cyberlearnings.com','_self');">
<option value="1">...</option>
</select>
Pass value to the URL from the select option without using submit button
- Change page URL according to the select option
- The page URL is based on the /page.php?id=
<form name="frm">
<select name="frn1"
onChange=
"window.open('/page.php?id='+this.form.frn1.options[this.form.frn1.selectedIndex].value);return false;">
<option value="2" selected>Home Page</option>
<option value="3">Login</option>
<option value="4">Create Account</option>
</select>
</form>
- Get the option value: this.form.frn1.options[this.form.frn1.selectedIndex].value
- Open a new window: window.open('/url','_self')
- Form event: onChange
Open at the same windows
- This is opened and replaced the current window.
onChange="window.open('/page.php?id='+
this.form.frn1.options[this.form.frn1.selectedIndex].value,'_self')
;return false;"
Open at a different windows setting
- You can set the window title, and height and width.
onChange="window.open( '/page.php?id='+ this.form.frn1.options[this.form.frn1.selectedIndex].value, 'Tes New', 'width=400;height=200');return false;"
Open a new windows according to the select option being selected
- Separate the Javascript code from the HTML onChange
- Javascript place on the script section.
<script type="text/javascript">
var select_menu=document.getElementById("mmenu1")
select_menu.onchange=function(){
var menu_option=this.options[this.selectedIndex]
if (menu_option.value!="none"){
window.open(menu_option.value, "", "")
}
}
</script>
<form id="myform">
<select id="mmenu1" size="1">
<option value="none" selected="selected">Select a site</option>
<option value="http://www.w3cyberlearnings.com?Learning_PHP">PHP</option>
<option value="http://www.w3cyberlearnings.com/Learning_MySQL">MySQL</option>
<option value="http://www.w3cyberlearnings.com/Learning_jQuery_and_Ajax">jQuery</option>
</select>
</form>
using button to the onclick with the Select option to go to a different URL
<html>
<head>
<title>Onclick</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function goTo() {
var chck = null, myurl;
if(document.getElementById) {
chck = document.getElementById('myurlList');
} else if(document.all) {
chck = document.all['myurlList'];
}
myurl = chck.options[chck.selectedIndex].value
if(chck && myurl) {
location.href = myurl;
}
}
</script>
</head>
<body>
<select id="myurlList" size="1">
<option value="none" selected="selected">Select a site</option>
<option value="http://www.w3cyberlearnings.com?Learning_PHP">PHP</option>
<option value="http://www.w3cyberlearnings.com/Learning_MySQL">MySQL</option>
<option value="http://www.w3cyberlearnings.com/Learning_jQuery_and_Ajax">jQuery</option>
</select>
<input type="button" value="Go!" onclick="goTo();">
</body>
</html>
Get to URL based on the Select option being selected
<form name="myform"> <select name="myurlList" size="1"> <option value="none" selected="selected">Select a site</option> <option value="http://www.w3cyberlearnings.com?Learning_PHP">PHP</option> <option value="http://www.w3cyberlearnings.com/Learning_MySQL">MySQL</option> <option value="http://www.w3cyberlearnings.com/Learning_jQuery_and_Ajax">jQuery</option> </select> <input type="button" value="Go!" onclick="location.href=this.form.myurlList.options[this.form.myurlList.selectedIndex].value;"> </form>
onChnage example
<form name="myform">
<select name="myurlList" size="1" onchange="location.href=this.form.myurlList.options[this.form.myurlList.selectedIndex].value;return false;">
<option value="none" selected="selected">Select a site</option>
<option value="http://www.w3cyberlearnings.com?Learning_PHP">PHP</option>
<option value="http://www.w3cyberlearnings.com/Learning_MySQL">MySQL</option>
<option value="http://www.w3cyberlearnings.com/Learning_jQuery_and_Ajax">jQuery</option>
</select>
</form>
