Solved

How do you add a required field to your code - NOT a pop window,

Posted on 2012-03-28
3
279 Views
Last Modified: 2012-04-02
How do you add a required field to your code - NOT a pop window,
The message should show above the question , Please complete required question 1.

For your information.
If the user didn't select yes or no, a msg should show saying.
1. Please complete question 1.... Where I can put that in my code?


here is the code:

<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>

<cfform id="form1" name="form1" onSubmit="return checksubmit(this);" action="confirmation_e.cfm" method="POST">
       
Please complete this form<br><br>

<b>(*) Required field </b><br>

*  <p><br><label for="strEmail"><strong><strong>1.</strong>      If your skill set is suitable to other committees, would you be willing to be contacted regarding any openings?   </label> </p>

<table border="0" cellspacing="0" cellpadding="0" width="100%" class="qtable">
            <tr>
              <td colspan="2" height="5" width="100%">

<input type="radio" name="contactMe" id="contactMeYes" value="Yes" onClick="checkme(this);"/>&nbsp;<label for="ContactMeYes">Yes</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;border:red 1px solid;">
</label>
</div>              
</td></tr></table>
</cfform>
q1.jpg
q1ifYes-selected-textfield-wills.jpg
0
Comment
Question by:LelloLello
3 Comments
 
LVL 6

Accepted Solution

by:
TRTurner earned 500 total points
ID: 37777691
w3schools has a lot of great tutorials. This one should take care of your problem: http://www.w3schools.com/js/js_form_validation.asp?output=print
0
 
LVL 13

Expert Comment

by:haloexpertsexchange
ID: 37777748
Add a new element that has its display hidden and then this should work.
function checksubmit(f){
      var radio = f.contactMeYes.value;
      var inputbox = f.ContactMeSpecify.value;
      if(radio =="")
       {
        var error = document.getElementById("IDNAME");
        error.style.display="inline";
         return false;
        }
      else 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;
            }
}

Open in new window

0
 

Author Comment

by:LelloLello
ID: 37778077
it's not displaying 'Required impute ! or else... ' or anything to force the user to fill question one why ?? here is the code for your review what i'm missing...  Required input! Or else... click "No" above... </

<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 =="")
       {
        var error = document.getElementById("IDNAME");
        error.style.display="inline";
         return false;
        }
      else 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>

 <cfform id="form1" name="form1" onSubmit="return checksubmit(this);" action="confirmation_e.cfm" method="POST">

 <table border="0" cellspacing="0" cellpadding="0" width="100%" class="qtable">
            <tr>
              <td colspan="2" height="5" width="100%">
                                   <input type="radio" name="contactMe" id="contactMeYes" value="Yes" onClick="checkme(this);" />&nbsp;<label for="ContactMeYes">Yes</label>
                                          <input type="radio" name="contactMe" id="contactMeNo" value="No" onClick="checkme(this);" />No</label>
                                          &nbsp;&nbsp;<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;border:red 1px solid;">
</label>
<p id="error" style="color:red;display:none;">Required input! Or else... click "No" above...</p>
</div>              
</td>
            </tr>
          </table>
          </cfform>
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again Today, from the topic it is very clear that i will be showing you here the very basic usage of how we …
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…

759 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

19 Experts available now in Live!

Get 1:1 Help Now