Failing Function With IF ELSE In It - Why Does It Fail?
I have the following code in one of my pages...
It is supposed to see if any of the INPUT boxes are left EMPTY, and if they are, it should put back the standard text...
Why is this not working (in IE and FF) only sometimes for the name field, but not for the rest...
What is wrong, how have I failed the IF ELSE logic?!?
<!--CHECK FOR EMPTY FIELDS-->
<script>
function FeedbackCheckFields()
{
if (document.getElementById('TheFeeedbackName').value==''){
document.getElementById('TheFeeedbackName').value='your name';
}else if (document.getElementById('TheFeeedbackEmail').value==''){
document.getElementById('TheFeeedbackEmail').value='your email';
}else if (document.getElementById('TheFeedbackCaptha').value==''){
document.getElementById('TheFeedbackCaptha').value='captha answer';
}else if (document.getElementById('TheFeedbackArea').value==''){
document.getElementById('TheFeedbackArea').value='your message';}
}
</script>
<!--START OF FORM--><form ID="TheFeedbackForm" class="" action="#">
<input ID="TheFeeedbackName" class="" type="text" value="your name" style="width:145px;" onclick="FeedbackCheckFields();">
<input ID="TheFeedbackEmail" class="" type="text" value="your email" style="width:145px;" onclick="FeedbackCheckFields();">
<input ID="TheFeedbackCaptha" class="" type="text" value="captha answer" style="width:145px;" onclick="FeedbackCheckFields();">
<textarea ID="TheFeedbackArea" class="" rows="3" cols="" style="overflow:auto; width:145px; height:56px;resize:none;" onclick="FeedbackCheckFields();">
your message</textarea>
Re: Failing Function With IF ELSE In It - Why Does It Fail?
The if/else statement will stop checking when it reaches it first true test. So if TheFeedBackName is empty the rest of the fields will not be checked. If Captha is empty, FeedbackArea will not be checked. You should place each check in its own if statement
Code:
<!--CHECK FOR EMPTY FIELDS-->
<script>
function FeedbackCheckFields()
{
if (document.getElementById('TheFeeedbackName').value==''){
document.getElementById('TheFeeedbackName').value='your name';
}
if (document.getElementById('TheFeeedbackEmail').value==''){
document.getElementById('TheFeeedbackEmail').value='your email';
}
if (document.getElementById('TheFeedbackCaptha').value==''){
document.getElementById('TheFeedbackCaptha').value='captha answer';
}
if (document.getElementById('TheFeedbackArea').value==''){
document.getElementById('TheFeedbackArea').value='your message';}
}
</script>
Re: Failing Function With IF ELSE In It - Why Does It Fail?
Hi there alexdata
correct me if I am mistaken, but I think that you probably want this type of checking...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>form check</title>
<style type="text/css">
#myform input[type=text] {
width:145px;
}
#myform textarea {
width:145px;
height:56px;
overflow:auto;
resize:none;
}
</style>
<script type="text/javascript">
(function() {
'use strict';
function init(){
var f=document.getElementById('myform');
var els=f.elements;
var mes=[];
for(var c=0;c<els.length;c++){
els[c].number=c;
mes.push(els[c].value);
els[c].onfocus=function(){
if(this.value==mes[this.number]) {
this.value='';
return;
}
}
els[c].onblur=function(){
if(this.value=='') {
this.value=mes[this.number];
return;
}
}
}
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
})();
</script>
</head>
<body>
<form id="myform" action="#">
<div>
<input type="text" value="your name">
<input type="text" value="your email">
<input type="text" value="captha answer">
<textarea rows="3" cols="3">your message</textarea>
</div>
</form>
</body>
</html>
