How to reset a dropdown list when error occur?
can anyone help me with my problem.. i have 4 dropdown and each dropdown
should have different values and i put an error message when they have
duplicate value, i set it to 1 to 4 so that there is no duplicate value
when i submit. But want i want to do is let say on the first dropdown i
choose value 1 then on the next i also choose 1 then there will be an
error, but after i click on the okay button on the error i would like to
reset the value of the dropdown with error back to "0",.. what happen is
after i clicked on okay on the error it still remain on the same value
that i choose earlier.
I'm really new to this, i would really appreciate your help. Thanks
here is the code that i used
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
function validateForm(objForm)
{
var returnStatus = 1;
if (objForm.a1.selectedIndex == 0) {
alert("Please make sure you answer all the survey");
return false;
};
if (objForm.a2.selectedIndex == 0) {
alert("Please make sure you answer all the survey");
return false;
};
if (objForm.a3.selectedIndex == 0) {
alert("Please make sure you answer all the survey");
return false;
};
if (objForm.a4.selectedIndex == 0) {
alert("Please make sure you answer all the survey");
return false;
};
if (returnStatus) {
objForm.submit();
}
}
// -->
</SCRIPT>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript" >
function check_val(a) {
$('.a').each(function(i, ele){
if(ele != a && ele.value == a.value){
//Throw an error Here <---
alert('ERROR! Duplicate entry! Choose another value.');
}
})
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<div id="content">
<article class="post clearfix">
<header>
<h1 class="post-title"><a href="#">WHEN I INTRODUCE IDEAS TO OTHERS I
WANT TO BE:</a></h1>
<p class="post-meta">
<time class="post-date" datetime="2011-05-08" pubdate></time>
</p>
</header>
<p style="text-align:justify">
<select name="a1" class="a" onchange="javascript: check_val(this);" >
<option value="0" selected="selected" >-</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4 </option>
</select>
sincere, dedicated and ethical person.<br />
<br />
<select name="a2" class="a" onchange="javascript: check_val(this);" >
<option value="0" selected="selected" >-</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3 </option>
<option value="4" >4</option>
</select>
bold, masterful and assertive individual. <br />
<br />
<select name="a3" class="a" onchange="javascript: check_val(this);" >
<option value="0" selected="selected" >-</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3 </option>
<option value="4" >4</option>
</select>
compress, practical and cautios person. <br />
<br />
<select name="a4" class="a" onchange="javascript: check_val(this);" >
<option value="0" selected="selected" >-</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3 </option>
<option value="4" >4</option>
</select>
friendly, jovial and enthusiastic person. </p>
<footer id="footer">
<p><span class="buttons">
<input type="button" class="send"
onclick="validateForm(document.form1)" value="Submit"
src="images/sub.png"/>
</span></p>
</footer>
<div class="video"></div>
<!-- /.video -->
<div class="video"></div>
<!-- /.video -->
</article>
<!-- /.post -->
</div>
</form>
</body>
</html>
No comments:
Post a Comment