Solved

Required Field

Posted on 2012-03-27
5
339 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 400 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 100 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

What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

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…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

695 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