Solved

Javascript to catch bad form before submit

Posted on 2008-10-07
3
432 Views
Last Modified: 2012-06-21
What code would I need for a javascript function checkform();
That would make sure:
"name" and "color" are not empty ie:  obj.value!=""

If one of them IS empty, then show the div named "warning" and NOT submit the form

However if, they are both populated, then SUBMIT the form


Thanks!
<form id="form1" name="form1" method="post" action="go.php">
 

  <label>Your Name<input type="text" name="name" id="name" /></label>
 

  Your Color:

  <label><input type="radio" name="color" id="color" value="red"  />Red</label>

  <label><input type="radio" name="color" id="color" value="green"  />Green</label>

  <label><input type="radio" name="color" id="color" value="blue"  />Blue</label>
 

  <div id="warning" style="display:none"> Please Complete The Form before submitting</div>
 

    <input type="submit" name="Submit" value="Submit" onclick="checkform(this); return false;" />
 

</form>

Open in new window

0
Comment
Question by:dban00b
  • 2
3 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 22664207
copy and paste this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title></title>
<script type="text/javascript">
function checkForm(f)
{
	var e="";
	if( f.name.value=="" )
		e+="\nPlease enter your name";
	var c=false;
	for( var i=0; i < f.color.length; ++i)
		if( f.color[i].checked ) c=true;
	if(!c)
		e+="\nPlease Choose a color";
	if( e )
		alert(e)
return e=="";
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="go.php" onsubmit="return checkForm(this)">
 
  <label>Your Name<input type="text" name="name" id="name" /></label>
 
  Your Color:
  <label><input type="radio" name="color" id="color" value="red"  />Red</label>
  <label><input type="radio" name="color" id="color" value="green"  />Green</label>
  <label><input type="radio" name="color" id="color" value="blue"  />Blue</label>
 
  <div id="warning" style="display:none"> Please Complete The Form before submitting</div>
 
    <input type="submit" name="Submit" value="Submit" />
 
</form> 
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:dban00b
ID: 22664511
Not quite right, but pretty darn close, got me what I need, thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

 "http://www.w3.org/TR/html4/loose.dtd"> 

<html>

<head>

<title></title>

<script type="text/javascript">

function checkForm()

{

		var f=document.getElementById('form1');

        var e="";

        if( f.name.value=="" )

                e+="\nPlease enter your name";

        var c=false;

        for( var i=0; i < f.color.length; ++i)

                if( f.color[i].checked ) c=true;

        if(!c)

                e+="\nPlease Choose a color";

        if(e)

				document.getElementById('warning').style.display='';

		else

			 f.submit();

return e=="";

}

</script>

</head>

<body>

<form id="form1" name="form1" method="post" action="go.php">

 

  <label>Your Name<input type="text" name="name" id="name" /></label>

 

  Your Color:

  <label><input type="radio" name="color" id="color" value="red"  />Red</label>

  <label><input type="radio" name="color" id="color" value="green"  />Green</label>

  <label><input type="radio" name="color" id="color" value="blue"  />Blue</label>

 

  <div id="warning" name="warning" style="display:none;"> Please Complete The Form before submitting</div>

 

    <input type="button" name="Submit" value="Submit" onClick="checkForm(); return false;" />

 

</form> 

</body>

</html>

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 22668817
you are welcome
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

895 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now