Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Javascript return in Chrome being ignored

Posted on 2011-04-28
7
Medium Priority
?
600 Views
Last Modified: 2012-05-11
I have a javascript field validator script that works fine in Internet Explorer, but in Chrome the returns get ignored and tries to submit.
You can see just before the page submits the field background colours changing so i know its getting that far.

Does Chrome not recognise Chrome to stop the function?
<script type='text/javascript'>   

function validateFields(action)   
{   

  var subject = document.getElementById('subject').value;   
  var description = document.getElementById('desc').value;   
  var category = document.getElementById('category').value;
  var filename = document.getElementById('file1').value;
  if (document.getElementById.cause)
  {
	var cause = document.getElementById('cause').value;
  }
    
  if(category.length == 0)
  {
		document.getElementById('category').style.borderColor = '#EE0000';
		document.getElementById('category').style.backgroundColor = '#EEEED1';
		  if(subject.length == 0)   
		  {   
			document.getElementById('subject').style.borderColor = '#EE0000';
			document.getElementById('subject').style.backgroundColor = '#EEEED1';
				if(description.length == 0)   
				{   
					document.getElementById('desc').style.borderColor = '#EE0000';
					document.getElementById('desc').style.backgroundColor = '#EEEED1';
					return ;   
				} 
				else
				{
				   return ; 
				}
		  } 
		return ; 
  }
  else if(subject.length == 0)   
		  {   
			document.getElementById('subject').style.borderColor = '#EE0000';
			document.getElementById('subject').style.backgroundColor = '#EEEED1';
			if(description.length == 0)   
			{   
			document.getElementById('desc').style.borderColor = '#EE0000';
			document.getElementById('desc').style.backgroundColor = '#EEEED1';
			return ; 
			} 
			else
			{
			return ; 
			}
		  }   
  
  else if(description.length == 0)   
		  {   
			document.getElementById('desc').style.borderColor = '#EE0000';
			document.getElementById('desc').style.backgroundColor = '#EEEED1';
			return ;   
		  } 
  
  else
  {
	if (filename.length > 0)
	{
		document.getElementById('upload').value = 1;
	}
	alert(action);
	if (action == 1)
	{
	
	document.getElementById('action').value = 1;
	document.form.submit();
	}
	if (action == 2)
	{
		
			if (document.getElementById('cause').value.length == 0)
			{
				document.getElementById('cause').style.borderColor = '#EE0000';
				document.getElementById('cause').style.backgroundColor = '#EEEED1';
				return ; 
			}
			else
			{
				document.getElementById('action').value = 2;
				document.form.submit();
			}
	}	
  }
}   
</script>  

Open in new window

0
Comment
Question by:AVONFRS
  • 4
  • 3
7 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35484078
Instead of document.getElementById, access your form elements this way:

var subject = document.forms[0].subject.value;

Where form[0] is the first form on the page and contains the inputs.

Or,

var subject = document.forms.form1.subject.value;

Where form1 is the name of the form holding the inputs.
0
 
LVL 1

Author Comment

by:AVONFRS
ID: 35496284
It still tries to submit the page.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35497192
Oh, sorry, I misunderstood the question. I got it now.

The return statement only stops the function from proceeding further. It does not prevent the form from submitting. This is not exclusive to Chrome. It's the same with all browsers. To prevent submission of the form when there are validation errors, you have to delegate the task of submitting the form to the validating function.

The attached snippet demonstrates this, but it also demonstrates a different logic to the validation process. With your logic of nested if statements, you are checking and rechecking the same fields repeatedly when the only condition you are checking is "is the field empty". Maybe I'm missing something here. The logic in this snippet will change the borders for all empty fields at one time in the first validation check and prevent the submission of the form unless all fields are filled in. For your purposes, it is NOT complete because it does not handle the file field or cause field as you have done. It's just a sample to demonstrate the required logic.

P.S. This statement, if (document.getElementById.cause), will never be true because it does not point to an object on the page.


<!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" lang="en" xml:lang="en">
 
<head> 
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />

<script type="text/javascript" language="javascript"> 
function validateFields(f)   
{ 
    if (f.subject.value == "" || f.desc.value == "" || f.category.value == "" || f.file1.value == "" || f.cause.value == "") {
        //one or more fields are empty
        if (f.subject.value == "") {
            f.subject.style.borderColor = '#EE0000';
            f.subject.style.backgroundColor = '#EEEED1';
        } 
        if (f.desc.value == "") {
            f.desc.style.borderColor = '#EE0000';
            f.desc.style.backgroundColor = '#EEEED1';
        } 
        if (f.category.value == "") {
            f.category.style.borderColor = '#EE0000';
            f.category.style.backgroundColor = '#EEEED1';
        } 
        if (f.file1.value == "") {
            f.file1.style.borderColor = '#EE0000';
            f.file1.style.backgroundColor = '#EEEED1';
        } 
        if (f.cause.value == "") {
            f.cause.style.borderColor = '#EE0000';
            f.cause.style.backgroundColor = '#EEEED1';
        }
        return false;  //change the border and background color for any empty fields and prevent submit
    } else {
        f.submit();    //submit when all fields are filled in
        return false;
    } 
}   
</script>
</head>
 
<body>
<form action="#" id="form1" onsubmit="return validateFields(this); return false;">
<div class="container">
<input type="text" id="subject" value="" />
<input type="text" id="desc" value="" />
<input type="text" id="category" value="" />
<input type="text" id="file1" value="" />
<input type="text" id="cause" value="" />
	<input type="submit" value="Submit" />
</div>
</form>	
</body>   
</html>

Open in new window

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 1

Author Comment

by:AVONFRS
ID: 35499486
OK, thats great thanks for that. But that form is relying on 1 submit button, i actually have 2.
<button onClick="validateFields(1)">Next</button>
<button onClick="validateFields(2)">Create & Close</button>

Open in new window


This is for a helpdesk system, and action 1 creates the helpdesk call and leaves it open, and action 2 creates the call and then closes it immediately.

How can i pass these as well?
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 total points
ID: 35500477
Same concept, just move the function calls to the button clicks. Layout would look like this:

function validateFields(form, action) {
    if (..validating condition true..) {
         return false;  //DO NOT SUBMIT
    } else {
         if (action==1) {
              //DO THIS
              form.submit();
              return false;
         }
         if (action==2) {
              //DO THIS
              form.submit();
              return false;        
         }
}

<form action="#" id="form1">
   ...
   ...
   <button onclick="return validateFields(document.forms.form1, 1); return false;">Next</button>
   <button onclick="return validateFields(document.forms.form1, 2); return false;">Create & Close</button>  
</form>
0
 
LVL 1

Author Comment

by:AVONFRS
ID: 35506167
Thats brilliant. After a little bit tweaking got it going to how i need it.

Thanks
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35506346
Great! Thanks for the points.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This Micro Tutorial will demonstrate how MozBar finds back links of any website you visit, as well as page, social shares to the page, and domain level metrics. There will me practical applications for this data.
This Micro Tutorial will demonstrate using MozBar to view an article that was deleted from the Search Engine Watch site after being debunked by Google.
Suggested Courses

581 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question