Javascript issue - focus() returns TRUE

[AmpleHosting]

Hello,

Hope some smart people can help.. Having problem with a form validator.

var pass = TRUE
then some checks on fields etc,,,

if one fails then pass = FALSE

then it goes to this piece of code. which seems to returns TRUE regardless...


--------------------

if (!pass){
var focusHere = document.getElementById(offendinginput);
focusHere.focus();

alert("One or more of the required fields needs to be completed. Denoted by a *. Please complete them, then press continue again.");

return false
}



--------------------
BUT

this works like I'd expect

--------------------

if (!pass){

alert("One or more of the required fields needs to be completed. Denoted by a *. Please complete them, then press continue again.");

return false
}


--------------------

WHY does document.getElementById or focus() cause this check to fail i.e return TRUE and the form submits?

using Firefox..
Thanks

 

[Chunkyfeather]

Try this:

if (!pass){
var focusHere = document.getElementById(offendinginput);
alert(focusHere);
//focusHere.focus();
//alert("One or more of the required fields needs to be completed. Denoted by a *. Please complete them, then press continue again.");

return false; //Dont know if it matters, but you ddidnt have a semicolon here ;-)
}

Is the object being set? Im not a javascript expert or very savvy with it, but im sure if this fails your whole if clause will fail?

 

[crazy_cat]

WHY does document.getElementById or focus() cause this check to fail i.e return TRUE and the form submits?

it does not cause the check to fail since its never executed if pass=false which is the case if everything validates i.e all your inputs are valid thus the check (!pass) in effect is (!True) which is false.

The content of both if statements are irrelevant since the check is the same...assuming pass is a boolean.

please explain further or put more code (if you are allowed to)

btw, a mere suggestion - USE jQuery

 

[crazy_cat]

oh if you are using firefox, get firebug as well for javascript debugging

any sane web developer uses it

 

[Moederloos]

is false the same as FALSE?

 

[Chunkyfeather]

is false the same as FALSE?

NO!

 

[crazy_cat]

NO!

you are correct so it should be var pass =true and this should all be done in lowercase.. i never came across this since i prefer to lowercase everything

 

[AmpleHosting]

Sorry

full javascript below that does not do as I expect...

<script type="text/javascript">
function GetRadioButtonValue(id)

{

var radio = document.getElementsByName(id);

for (var ii = 0; ii < radio.length; ii++)

{

if (radio[ii].checked)

return radio[ii].value;

}

}


function checkrequired(which){
var returntrue = true
var pass=true


for (i=0;i<which.length;i++){
var tempobj=which.elements

var starfound = -1;
starfound=tempobj.name.indexOf('*');

if(starfound >= 0) {


if(GetRadioButtonValue("payment") == 'debit_order') {

if (tempobj.name.substring(0,3)=="do*"){
if (((tempobj.type=="text"||tempobj.type=="textarea")&&tempobj.value=='')||(tempobj.type.toString().charAt(0)=="s"&&tempobj.selectedIndex==-1)||(tempobj.type=="checkbox"&& tempobj.checked == false )){
pass=false

var extrainfo = "for debit order";
var offendinginput = tempobj.name;

}
}
}

if(GetRadioButtonValue("payment") == 'credit_card') {
if (tempobj.name.substring(0,3)=="cc*"){

if (((tempobj.type=="text"||tempobj.type=="textarea")&&tempobj.value=='')||(tempobj.type.toString().charAt(0)=="s"&&tempobj.selectedIndex==-1)||(tempobj.type=="checkbox"&& tempobj.checked == false )){
pass=false

var extrainfo = "for credit card";
var offendinginput = tempobj.name;
}
}
}

if (tempobj.name.substring(0,1)=="*"){

if (((tempobj.type=="text"||tempobj.type=="textarea")&&tempobj.value=='')||(tempobj.type.toString().charAt(0)=="s"&&tempobj.selectedIndex==-1)||(tempobj.type=="checkbox"&& tempobj.checked == false )){
pass=false

var extrainfo = "for customer details";
var offendinginput = tempobj.name;
}
}

}
}


if (!pass){
var focusHere = document.getElementById(offendinginput);
focusHere.focus();

alert("One or more of the required fields "+extrainfo+" "+offendinginput+" needs to be completed. Denoted by a *. Please complete them, then press continue again.");

return false
}



}


</script>

 

[AmpleHosting]

Try this:



Is the object being set? Im not a javascript expert or very savvy with it, but im sure if this fails your whole if clause will fail?

var pass is being set/
I've tried that and it works because I comment out focusHere.focus();
but I would like the browser to focus on the input that needs to be filled in.

 

[crazy_cat]

var focusHere = document.getElementById(offendinginput);
focusHere.focus();

looks for the element by element Id. The value of offendinginput is the name attribute of the form element so line one will return null.

also var offendinginput = tempobj.name; is declared within the scope of each of the above checks within the for loop, thus by the time you actually use it in your final if statement it has no scope!!!!!!

bigger suggestion - refactor your js...too much repetition imo this needs to be seriously worked on

 

[crazy_cat]

Example of some simplification

function checkrequired(which){
.......

if (tempobj.name.substring(0,1)=="*"){

fillStuff(tempobj.type, ""

pass=checkType(tempobj.type)

if(!pass){
extrainfo.push("for customer details");
offendinginput.push(tempobj.name)
}
}
........
}

function checkType(type){
if (((type=="text"||type=="textarea") && value=='')||(type.toString().cha rAt(0)=="s"&& selectedIndex==-1)||(type=="checkbox"&& checked == false )){
return false

}
return true

}

 

[guest2013-1]

+1 to using jquery... you would've been done with this **** already

And I agree with crazy_kat about what the problem is, you're passing it a null value and it will go bonkers. Remember, even if this was server side code, your stuff would fail even if it had a "pass".

 

[AmpleHosting]

Figured out this mess..

Thanks for the suggestion to use Firebug.

Was a silly mistake - getElementById requires your form fields to have a id="" tag, which where missing in the form - making the line return null and making the form submit
.

So remember: you need to give the object an ID if you want to getElementById

 

[FarligOpptreden]

Isn't that what "document.getElementById" implies...? ;-)

 

[AmpleHosting]

Umm...

You know when you're tired and don't see the obvious.... yip.

 

[Necuno]

Isn't that what "document.getElementById" implies...? ;-)

the .call was assumed to be self aware

 

[FarligOpptreden]

Umm...

You know when you're tired and don't see the obvious.... yip.

So I'm guessing you might've figured out what "document.getElementsByTagName" means by now, right?