?
Solved

Required Field

Posted on 2012-03-27
5
Medium Priority
?
348 Views
Last Modified: 2012-06-22
I have the following code:

I would like to a professional required field, but I would like the required field to be like this form in red on the same page. which script i should use.


I have the following code. I would like to add a script to indicate a required field for question 1.
http://www.bendixvrc.com/register.asp 


<!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>
<title>Radio buttons</title>

<script type="text/javascript">
function checkme(ele){
      var inputbox = document.getElementById("specify");
      if(ele.value=="Yes"){
            inputbox.style.display="block";
            var er = document.getElementById("error");
            er.style.display="none";
      }else{
            inputbox.style.display="none";
      }
}
function checksubmit(f){
      var radio = f.contactMeYes.value;
      var inputbox = f.ContactMeSpecify.value;
      if(radio=="Yes" && inputbox==""){
            var er = document.getElementById("error");
            er.style.display="inline";
            return false;
      }else{
            var er = document.getElementById("error");
            er.style.display="none";
            return true;
      }
}
</script>
</head>
<body>
<form id="form1" name="form1" onSubmit="return checksubmit(this);" action="" method="post">
(* indicates a required field)
1. Any specific needs <b>*</b><br>
<label><input type="radio" name="contactMe" id="contactMeYes" value="Yes" onClick="checkme(this);"/>Yes</label>
<label><input type="radio" name="contactMe" id="contactMeNo" value="No" onClick="checkme(this);"/>No</label><br>
<div id="specify" style="display:none;">
<label>Please specify:
<input type="text" name="ContactMeSpecify" id="ContactMeSpecify" value="" maxlength="255" size="30" style="width: 200px;">
</label>
<p id="error" style="color:red;display:none;">Required input! Or else... click "No" above...</p>
</div>
<input type="submit"/>
</form>
</body>
</html>
0
Comment
Question by:LelloLello
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 7

Accepted Solution

by:
designatedinitializer earned 1600 total points
ID: 37773741
You can use this, if you want a border around the input field:
<input type="text" name="ContactMeSpecify" id="ContactMeSpecify" value="" maxlength="255" size="30" style="width: 200px;border:red 1px solid;">

Open in new window

Or this, if you want to color the background:
<input type="text" name="ContactMeSpecify" id="ContactMeSpecify" value="" maxlength="255" size="30" style="width: 200px;background:red;">

Open in new window

0
 
LVL 7

Assisted Solution

by:whosbetterthanme
whosbetterthanme earned 400 total points
ID: 37773775
Perhaps another way would to replace your <p> tag with a div tag:

<!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>
<title>Radio buttons</title>

<script type="text/javascript">
function checkme(ele){
      var inputbox = document.getElementById("specify");
      if(ele.value=="Yes"){
            inputbox.style.display="block";
            //var er = document.getElementById("error");
                  document.getElementById('error').innerHTML='';
            //er.style.display="none";
      }else{
            inputbox.style.display="none";
      }
}
function checksubmit(f){
      var radio = f.contactMeYes.value;
      var inputbox = f.ContactMeSpecify.value;
      if(radio=="Yes" && inputbox==""){
            var er = document.getElementById("error");
            //er.style.display="inline";
                  document.getElementById('error').innerHTML='<p style=color:red>Required input! Or else... click No above...</p>';
            return false;
      }else{
            //var er = document.getElementById("error");
                  document.getElementById('error').innerHTML='';
            //er.style.display="none";
            return true;
      }
}
</script>
</head>
<body>
<form id="form1" name="form1" onSubmit="return checksubmit(this);" action="" method="post">
(* indicates a required field)
1. Any specific needs <b>*</b><br>
<label><input type="radio" name="contactMe" id="contactMeYes" value="Yes" onClick="checkme(this);"/>Yes</label>
<label><input type="radio" name="contactMe" id="contactMeNo" value="No" onClick="checkme(this);"/>No</label><br>
<div id="specify" style="display:none;">
<label>Please specify:
<input type="text" name="ContactMeSpecify" id="ContactMeSpecify" value="" maxlength="255" size="30" style="width: 200px;">
</label>
<div id="error"></div>
</div>
<input type="submit"/>
</form>
</body
0
 

Author Comment

by:LelloLello
ID: 37776733
Hello,

it's not the color... If the user click submit without clicking the radio button a message should appear say please complete question 1.  now it's not working.
0
 
LVL 7

Expert Comment

by:designatedinitializer
ID: 37777094
Change this
      if(radio=="Yes" && inputbox==""){

Open in new window


to this

      if(radio=="Yes" && inputbox=="" || radio==""){

Open in new window


...but you should have a default value assigned in the first place.
So, change this:
<input type="radio" name="contactMe" id="contactMeNo" value="No" onClick="checkme(this);"/>

Open in new window


to this:
<input type="radio" name="contactMe" id="contactMeNo" value="No" onClick="checkme(this);" checked="checked"/>

Open in new window

0
 

Author Comment

by:LelloLello
ID: 37777178
Thank you for your reply.

But, no it's a good idea... Just to le tyou know that 'no' or 'yes' shouldn't  be checked... the user has to checked so if he didn't checked a msg should show please complete required field question 1.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

801 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