I have looked at many other topics on here that are similar to my problem but none of the answers work for me.
I am trying to call a javascript function when a button is clicked but it does nothing.
I hvae tried changing the call to onclick="javascript:ClearFields();" and onclick="ClearFields()" and it doesn't work either.
I have to use a button (not submit) calling javascript
My jsp code is:
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
</head>
<body>
<!-- if the user is logged in then we need to render one version of the page
consequently if the user is logged out we need to render a
different version of the page -->
<script type="text/javascript">
function ClearFields() {
document.getElementById("num1").value = "";
document.getElementById("num2").value = "";
document.getElementById("operator").value = "+";
}
</script>
<c:choose>
<c:when test="${empty user}">
<p>
${msg} <br/>
Would you like to log in? <br/>
Sign in or register <br/>
</p>
</c:when>
<c:otherwise>
<p>
Welcome ${user.email}
<p/>
<p><h1>Calculator</h1></p>
<!-- form of basic input types -->
<form action="/" method="post">
<table border="0">
<tr><td>
Number 1: <input type="text" name="num1" value="${ans}"/><br/>
</td><td>
Number 2: <input type="text" name="num2" /><br/>
</td></tr>
<tr><td colspan=2 align=center>
<select name="operator">
<option value="+"> + </option>
<option value="-"> - </option>
<option value="*"> * </option>
<option value="/"> / </option>
</select>
</td></tr>
<tr><td align=center>
<!-- Button to submit the form to the servlet when clicked -->
<input type="submit" value="Calculate"/><br/>
</td>
<td align=center>
<input type="button" onclick="ClearFields();" value="Clear"/><br/>
<!-- <input type="button" onclick="ClearFields();" value="Clear"/><br/> -->
</td></tr>
<tr><td colspan=2>
<h1> ${msg}</h1>
</td></tr>
</table>
</form>
<p>
You can signout here
</p>
</c:otherwise>
</c:choose>
</body>
</html>
The generated html is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
</head>
<body>
<!-- if the user is logged in then we need to render one version of the page
consequently if the user is logged out we need to render a
different version of the page -->
<script type="text/javascript">
function ClearFields() {
document.getElementById("num1").value = "";
document.getElementById("num2").value = "";
document.getElementById("operator").value = "+";
}
</script>
<p>
Welcome test#example.com
<p/>
<p><h1>Calculator</h1></p>
<!-- form of basic input types -->
<form action="/" method="post">
<table border="0">
<tr><td>
Number 1: <input type="text" name="num1" value=""/><br/>
</td><td>
Number 2: <input type="text" name="num2" /><br/>
</td></tr>
<tr><td colspan=2 align=center>
<select name="operator">
<option value="+"> + </option>
<option value="-"> - </option>
<option value="*"> * </option>
<option value="/"> / </option>
</select>
</td></tr>
<tr><td align=center>
<!-- Button to submit the form to the servlet when clicked -->
<input type="submit" value="Calculate"/><br/>
</td>
<td align=center>
<input type="button" onclick="ClearFields();" value="Clear"/><br/>
</td></tr>
<tr><td colspan=2>
<h1> Welcome to the Calculator</h1>
</td></tr>
</table>
</form>
<p>
You can signout here
</p>
</body>
</html>
Any ideas where I am going wrong?
Could it just be that the page is no resubmitting? It seems to be.
Your JavaScript:
document.getElementById("num1").value = "";
Your HTML:
<input type="text" name="num1" value=""/>
getElementById gets an element by its id, and your element doesn't have any id. You need to add an id attribute.
Related
I have a button in enroll.html . The code of the page is as follows :
<HTML>
<HEAD>
<META http-equiv=Content-Language content=en-us>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<style TYPE="text/css">
<!-- BODY { font-family:arial,helvetica; margin-left:5; margin-top:0}
A { color:#FF5500; text-decoration:underline}
A:hover,A:active { color:#0055FF; text-decoration:underline}
-->
</style>
<Script Language="JavaScript">
<!--
function inStrGrp(src,reg)
{
var regex=new RegExp("[" + reg + "]","i");
return regex.test(src);
}
function check()
{
var uname=document.scan.elements[0].value
var bError=false
if (uname.length==0)
{
window.alert("Name is required.\n")
return false
}
if (uname.indexOf("\\")>=0)
bError=true
if (inStrGrp(uname,'/.:*?"<>| '))
bError=true
if (bError)
{
window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n')
return false
}
else
return true
}
-->
</Script>
<title>Enroll New Fingerprint.</title>
</HEAD>
<BODY onload="document.scan.name.focus();">
<center>
<table border="0" width="800">
<tr>
<td width="100%" colspan="3">
<p> </p>
<p><u><b>Online Demonstration</b></u></p>
<div align="center">
<table border="1" width="100%" height="260">
<tr>
<td width="20%" align="center" rowspan="2">
<p> </p>
<p><font color="#0055FF">Enroll</font></p>
<p>Logon</p>
<p> </p>
</td>
<td width="80%" height="30">
<b><i>Enroll Finger</i></b>
</td>
</tr>
<tr>
<td width="80%">
<p>Thanks for your registration. You can enroll two fingers for the name you registered.</p>
<form name="scan" method="POST" action="http://10.11.201.170/data/sultan/enroll.asp" onsubmit="return check()">
<p>Please input your name: <input type="text" name="name" size="20"> </p>
<p>If you want to enroll 2 fingers, please check the box. <input type="checkbox" name="chk2Finger" value="2"> </p>
<p>
<input type="submit" value=" Enroll " name="btnEnroll"></p>
</form>
</td>
</tr>
</table>
</div>
<p> </p>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<p align="center"><small>Copyright © 2004 Futronic
Technology Company Limited. All Rights Reserved.</small></td>
</tr>
</table>
</center>
</BODY>
</HTML>
When I press Enroll Button , I want to load a page named verify.asp in background . How can I do that ?
The code of verify.asp is as follows :
<HTML>
<HEAD>
<META http-equiv=Content-Language content=en-us>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<style TYPE="text/css">
<!-- BODY { font-family:arial,helvetica; margin-left:5; margin-top:0}
A { color:#FF5500; text-decoration:underline}
A:hover,A:active { color:#0055FF; text-decoration:underline}
-->
</style>
<Script Language="VBScript" Src="GetInfo.vbs">
</Script>
<title>Enroll Fingerprint.</title>
</HEAD>
<BODY Onload="GetLearnModel()";>
<center>
<table border="0" width="800">
<tr>
<td width="100%" colspan="3">
<p> </p>
<p><u><b>Online Demonstration</b></u></p>
<div align="center">
<table border="1" width="100%" height="260">
<tr>
<td width="20%" align="center" rowspan="2">
<p> </p>
<p>Enroll</p>
<p>Logon</p>
<p> </p>
</td>
<td width="80%" height="30">
<b><i>Enroll Finger</i></b>
</td>
</tr>
<tr>
<td width="80%">
<Form name="scan" method="Post" action="famenroll2.asp?name=<%=Request("name")%>&check=<%=Request("check")%>&finger=<%=Request("finger")%>">
<Input type="hidden" name="LearnModel" value="">
<Input type="text" name="SlNo" value="">
</Form>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><font size="5" color="#ff0000"><%=Request.Form("SlNo")%></font><font size="5"> Enroll Successfully!</font></p>
</td>
</tr>
</table>
</div>
<p> </p>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<p align="center"><small>Copyright © 2004 Futronic
Technology Company Limited. All Rights Reserved.</small></td>
</tr>
</table>
<% Dim Conn,strSQL,objExec,NumOfRecords,se_name,finger
cust_no=Request.QueryString("name")
Set Conn = Server.Createobject("ADODB.Connection")
Conn.Open "Driver={Oracle in XE};DBQ=xe;UID=biotpl;PWD=biotpl;"
'Query for the customer entry in FP_ENROLL Table
strSQL2 = "INSERT INTO TEST values(1,'OS')"
Set objExec = Conn.Execute(strSQL2)
'Query for the no of fingers to be taken for a customer in FP_FINGER_SETUP Table
'Set objExec = Conn.Execute("select FINGURE_NO NoF from BIOTPL.FP_FINGER_SETUP where USER_TYPE=" & Request.QueryString("cust_type") )
'NumOfFingers = objExec("NoF")
'Conn.Close()
Set objExec = Nothing
Set Conn = Nothing
%>
</center>
</BODY>
</HTML>
Add an Id in this Line
<input type="submit" value=" Enroll " name="btnEnroll">
So it becomes :
<input type="submit" value=" Enroll " id="buttonEnroll" name="btnEnroll">
<div id="result"></div>
and Than Write this Script
<script>
$("#buttonEnroll").on('click',function(e){
e.preventDefault();
$( "#result" ).load( "verify.asp" );
alert("Page loading completed");
});
</script>
#result is for loading that page in result id div.
Hope Helps !
Add this inside your header tag
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
Ajax can be used to load a page in background. jQuery supports AJAX functionality and it is easier than what described in the first link. If your intention is to Verify an enrollment, you need to parse the reply coming out of the AJAX request. An earlier answer on parsing can be found here.
The essential steps are
Add an id to your form submit button (say 'enroll')
Include jQuery JavaScript library to your project by adding the following in the header
< script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
3.Within script tag, use a similar methodology as below.
$("#enroll").click(function(){
$.ajax({
url: "verify.asp",
success: function(result){
/* Parse the result and do whatever you want to do here */
}
});
});
//1st way::
function doFunction(event) {
event.preventDefault();
//here you can load verify.aspx by using
$("#resultdiv").load("verify.aspx", {}, function (data) {
alert("loading complete");
});
}
//2nd way:
//By using ajax call
$('#enroll').on('click', 'input[type="submit"]', function(e){
e.preventDefault();
$.post('http://mywebsite/verify.aspx',{ 'data': $('#txt_search').val() } ,function(data) {
console.log(data); // this would show you the returned data.
});
});
You can do it in 2ways:
HTML:
1st way::
=========
Add onclick to your enroll button.
<input type="submit" value="Enroll" onclick="doFunction();" id="enroll" name="btnEnroll"></p>
<div id="resultdiv">
</div>
2nd way:
========
By using ajax call
Here is modified enroll.html with modified Js
<HTML>
<HEAD>
<META http-equiv=Content-Language content=en-us>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<style TYPE="text/css">
<!-- BODY { font-family:arial,helvetica; margin-left:5; margin-top:0}
A { color:#FF5500; text-decoration:underline}
A:hover,A:active { color:#0055FF; text-decoration:underline}
-->
</style>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<title>Enroll New Fingerprint.</title>
</HEAD>
<BODY>
<center>
<table border="0" width="800">
<tr>
<td width="100%" colspan="3">
<p> </p>
<p><u><b>Online Demonstration</b></u></p>
<div align="center">
<table border="1" width="100%" height="260">
<tr>
<td width="20%" align="center" rowspan="2">
<p> </p>
<p><font color="#0055FF">Enroll</font></p>
<p>Logon</p>
<p> </p>
</td>
<td width="80%" height="30">
<b><i>Enroll Finger</i></b>
</td>
</tr>
<tr>
<td width="80%">
<p>Thanks for your registration. You can enroll two fingers for the name you registered.</p>
<form name="scan" >
<p>Please input your name: <input type="text" name="txtName" size="20" id="txtname"> </p>
<p>If you want to enroll 2 fingers, please check the box. <input type="checkbox" name="chk2Finger" value="2"> </p>
<p>
<input type="button" value="Enroll" name="btnEnroll" id="btnEnroll"></p>
</form>
</td>
</tr>
</table>
</div>
<p> </p>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<p align="center"><small>Copyright © 2004 Futronic
Technology Company Limited. All Rights Reserved.</small></td>
</tr>
</table>
</center>
</BODY>
</HTML>
<script type="text/javascript">
function inStrGrp(src,reg)
{
var regex=new RegExp("[" + reg + "]","i");
return regex.test(src);
}
$(document).ready(function(){
$('#btnEnroll').on('click',function(){
var uname = $('#txtname').val();
var bError=false
if (uname.length==0)
{
window.alert("Name is required.\n")
return false
}
if (uname.indexOf("\\")>=0)
bError=true
if (inStrGrp(uname,'/.:*?"<>| '))
bError=true
if (bError)
{
window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n')
return false
}
else
var url = "enroll.asp?name="+uname;
window.location = url;
return true
});
});
</script>
change the url in the javascript code and put yours.If you url look like
http://10.11.201.170/data/sultan/enroll.asp
this then
change the variable url in script section like the following
var url = "http://10.11.201.170/data/sultan/enroll.asp?name="+uname;
and your enroll.asp will remain the same.
Hope that will help.
I want the visitors to be able to open the search form in a new tab when they selckt the checkbox.
And I have trouble getting TARGET = "_ blank" in the select menu to work.
Thanks in advance!
<html>
<head>
<title></title>
<script language="JavaScript">
function dosearch() {
var sf=document.F;
var submitto = sf.sengines.options[sf.sengines.selectedIndex].value + escape(sf.searchit.value);
window.open(submitto,'bottom');
return false;
}
</script>
</head>
<body onLoad="document.F.searchit.focus();">
<table width="100%" border="0"><tr align="left" valign="top"><td width="200">
<form name="guideform">
In:
<select name="guidelinks" onChange="window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value + document.F.searchit.value">
<option value="downloads.html?downloads=selected&searchit=">Downloads</option>
</select>
</form></td>
<td><form name="F" onSubmit="return dosearch();">
Search:
<select name="sengines">
<option value="http://download.cnet.com/s/" >Download.com</option>
<option value="http://filehippo.com/search?q=" TARGET="_blank">Filehippo</option>
</select>
For:
<input name="searchit" value="" type="text" size="45">
<input type="submit" name="SearchSubmit" value="Search">
<input type="checkbox" name="Newtab" target="_blank">New tab
</form></td>
<td width="1"></td></tr></table>
</body>
</html>
Try:
<option>
Filehippo
</option>
I am building a data aqusition system using PhoneGap. .I am trying to store my form data temporary on local storage using JSON,Data should be visible after I close and reopen the application (after pressing Get Data button),But after I close it only the lastly entered record is visible
This is my code
<!DOCTYPE html>
<html>
<head>
<title>Household Profile DB storage</title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no,
initial-scale=1, maximum-scale=1,
minimum-scale=1,width=device-width" />
<link rel="stylesheet" href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="css/table.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" charset="utf-8">
function onDeviceReady() {
persistData(homeId,owner,gramaND,contactNo,address,race);
}
function saveLocal(form){
if (window.localStorage) {
var fhomeId = form.homeId.value,
fowner = form.owner.value,
fgramaND = form.gramaND.value,
fcontactNo= form.contactNo.value,
faddress = form.address.value,
frace = form.race.value;
alert("hi");
var highscores = [{"homeId": fhomeId,
"owner":fowner,
"gramaND":fgramaND,
"contactNo":fcontactNo,
"address":faddress,
"race":frace}];
localStorage.setItem("highscores",JSON.stringify(highscores));
alert("The data has been stored successfully.");
} else {
alert("Your Browser does not support LocalStorage.");
}
}
function readLocal(){
if (window.localStorage) {
var scores =[];
//Get the highscores object
scores = localStorage.getItem("highscores");
scores = JSON.parse(scores);
for (i=0;i<scores.length;i++){
var text = "homeId :"+scores[i].homeId +"<br>"+
"owner:"+ scores[i].owner+"<br>"+
"address"+scores[i].address +"<br>"+
"gramaND"+scores[i].gramaND +"<br>"+
"contactNo"+scores[i].contactNo+"<br>" +
'<Button value="DELETE" onclick="'+scores.splice(i, 0)+'><>/Button>';
var tbodyx = document.getElementsByTagName("tbody");
var tr=document.createElement("TR");
var td=document.createElement("TD");
td.innerHTML = text;
tr.appendChild(td);
tbody.appendChild(tr);
}
}
}
</script>
</head>
<body>
<div data-role="page" id="page1">
<!--/header-->
<div data-role="header" data-position="inline" data-theme="b">
Back
<h1>Household Profile</h1>
Menu
</div>
<!--/header-->
<div id="wrapper">
<form id="userInput" action ="" method="GET">
<div data-role="content">
<div data-role="fieldcontain">
<label > Home ID </label>
<input class="inputClass" id="homeId" placeholder="H0001" value="" data-mini="true" type="text">
</div>
<div data-role="fieldcontain">
<label > Owner </label>
<input class="inputClass" id="owner" placeholder="Aberathne" value="" type="text">
</div>
<div data-role="fieldcontain">
<label class="select">GramaNiladhari Division</label>
<select class="inputClass" id="gramaND">
<option value="GramaNiladhari Division 1">GramaNiladhari Division 1</option>
<option value="GramaNiladhari Division 2">GramaNiladhari Division 2</option>
<option value="GramaNiladhari Division 3">GramaNiladhari Division 3</option>
<option value="GramaNiladhari Division 4">GramaNiladhari Division 4</option>
</select>
</div>
<div data-role="fieldcontain">
<label > Contact No </label>
<input class="inputClass" id="contactNo" placeholder="071-9545-073" value="" type="number">
</div>
<div data-role="fieldcontain">
<label >Address:</label>
<textarea cols="40" rows="8" class="inputClass" id="address"></textarea>
</div>
<div class="ui-block-a"><button type="submit" data-theme="d">Location in a Map</button></div>
<div data-role="fieldcontain">
<label >Race</label>
<select class="inputClass" id="race">
<option value=" Sinhalese"> Sinhalese</option>
<option value=" Sri Lanka Tamils"> Sri Lanka Tamils</option>
<option value=" Moors"> Moors</option>
<option value=" Indian Tamils "> Indian Tamils </option>
<option value=" Malays "> Malays </option>
<option value=" Burghers "> Burghers </option>
</select>
</div>
<input class="buttonClass" type="button" value="Insert Data" onclick="saveLocal(this.form);">
</div>
</form>
</div>
<input class="buttonClass" type="button" value="get Data" onclick="readLocal();">
<!-- <p id="dhomeId"></p>
<p id="downer"></p>
<p id="dgramaND"></p>
<p id="dcontactNo"></p>
<p id="daddress"></p>
<p id="drace"></p>-->
<table border="1">
<tbody id="tbody">
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
</tbody>
</table>
</div>
</body>
</html>
Also I need to expand my code to edit and delete record from local storage.
Of course it should only show the last entered JSON. You're not appending the scores rather you're replacing it. When you are executing the command
localStorage.setItem("highscores",JSON.stringify(highscores));
you just replaced previous highscores value on the localStorage. I can't see any append mechanism in your code. What you need to do is retrieve the previous JSON data, add the new highscores with previous data and then save it again.
I asked this question earlier, but asked without the proper info, here it goes again. What i need to happen is for the cancel button "list_btn_cancel" to close the popup activity and to replace what was imputed with the inputs placeholder.
This table is the input.
<table width="100%" style="line-height:0px" >
<tr>
<td><p>1.</p></td>
<td><input name="activities_thoughts_1" id="activities_thoughts_1" type="text" style="width:345px;" placeholder="Type or click list button >" /></td>
<td><input type="button" id="thoughts_1" class="list_btn ext_thoughts" value="List >" /></td>
</tr>
</table>
**this table is the popup**
<div id="popup_activity" class="box_list">
<div id="list_question_btn"></div></div>
</div>
<div id="activity_area_content" style="padding-bottom:5px;" >
<form name="form1">
<table class="style2" width="100%">
<tr><br />
<td width="8%" align="right"><input name="thoughts_list" id="thoughts_list_0" class="thoughts_list" type="radio" value="It is just terrible that my child will not be a normal kid" /></td>
</table>
</form>
</div>
</div>
<div><table><td><a style="margin-left:290px" onclick="closeDialog('popup_activity');"><input type="button" id="thoughts_cancel" class="list_btn list_btn_cancel" value="Cancel >" placeholder="Type or click list button >" /></a></td> <td><a onclick="closeDialog('popup_activity');"><input style="margin-left:10px" type="button" id="close_thoughts" class="list_btn list_btn_close" value="Close >" /></a></td></table></div></div>
**Here is the script**
$('.list_btn').button();
$('#popup_activity').css("display","none");
$('#list_help').css("display","none");
$('.ext_thoughts').click(function(){
openDialog('popup_activity');
btn_id= $(this).attr('id');
});
$('.thoughts_list').click(function(){
( $(this).attr('id'));
$("#activities_" +btn_id).val($(this).val());
});
Okay don't quite understand what you want but here is what i think you want:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$('.ext_thoughts').click(function(){
$("#popup_activity").toggle();
});
$('.list_btn_cancel').click(function(){
$("#popup_activity").hide();
$("#activities_thoughts_1").val('');
});
});
</script>
</head>
<body>
<input name="activities_thoughts_1" id="activities_thoughts_1" type="text" style="width:345px;" placeholder="Type or click list button " />
<br>
<input type="button" id="thoughts_1" class="list_btn ext_thoughts" value="Show/Hide List" />
<input type="button" id="thoughts_cancel" class="list_btn list_btn_cancel" value="Cancel" />
<br>
<div id="popup_activity" class="box_list" style="display:none;">
This is the pop up division
</div>
</body>
</html>
FIDDLE HERE
It's hard to figure out exactly what you're trying to do from your question but if all you want is for the text input to revert to its placeholder text simply set its value to blank.
$("#activities_thoughts_1").val('');
Here's an example http://jsfiddle.net/arG5f/
I am creating one form in html using table. Which have one Drop down box contains two values 1. Professor, 2. Librarian. Now each values have different form fields. If I select Professor some different fields show be displayed and if I select Librarian some different fields display.
Can anybody tell me how I can do this??
<table width="435" border="0">
<tr> <td>VIsit Date </td> <td><input type="text" name="textfield" /></td></tr>
<tr> <td>Last Visit Date </td> <td><input type="text" name="textfield2" /></td></tr> <tr> <td>Call Type </td>
<td>
<select name="title" size="1">
<option value ="Pro"> Professor </option>
<option value ="Lib"> Librarian </option> </select>
</td>
</tr>
</table>
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page title</title>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
<script>
$(document).ready(function() {
$("#callType").on('change', function(){
$('.form1').toggle();
$('.form2').toggle();
});
});
</script>
<style>
.form2 {
display: none;
}
</style>
</head>
<body>
<select name="title" id="callType">
<option value ="Pro"> Professor </option>
<option value ="Lib"> Librarian </option>
</select>
<div class="form1">
<input type="text" name="text1" value="text1" />
<input type="text" name="text2" value="text2" />
</div>
<div class="form2">
<input type="text" name="text3" value="text3" />
<input type="text" name="text4" value="text4" />
</div>
</body>
</html>
If you have just the two options in the dropdown, first form will be visible, and second will be hidden (display: none;). And on change, they will get their visibility toggled.
Few points forgot to mention:
1. Have your event handler inside document ready.
2. Keep in mind that in css 'visibility' and 'display' are different. Even if I said visibility, I was referring to display. jQuery show(), hide(), toggle() changes css display. The difference between "visibility: hidden" and "display: none" is that with visibility, invisible elements still take up space on the page.
Here's how to do it in jquery, forget normal javascript.
JQUERY CODE (PUT THIS IN THE HEAD PART)
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
<script>
$("#YOUR_SPECIFIC_ID").change(function(){
if ($(this).val() == "Option2") {
$('.option1form').hide('');
$('.option2form').show('');
}});
</script>
<script>
$("#YOUR_SPECIFIC_ID").change(function(){
if ($(this).val() == "Option1") {
$('.option1form').show('');
$('.option2form').hide('');}});
</script>
Assign the select field an id:
<select name="asia" style="width:233px;" id="YOUR_SPECIFIC_ID">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
</select>
Then, you need to make the different forms for different selections.
like this.
<div class="option1form" style="display:none">
<input type="text" name="example1_1">
<input type="text" name="example1_2">
</div>
<div class="option2form" style="display:none">
<input type="text" name="example2_1">
<input type="text" name="example2_2">
</div>
Should work like this.