www.webdeveloper.com
Results 1 to 6 of 6

Thread: Help! Need to validate textbox after checkbox

  1. #1
    Join Date
    Oct 2011
    Posts
    3

    Help! Need to validate textbox after checkbox

    I did a search and could not find the answer I needed, forgive me if this is has already been answered.

    I very new to JavaScript and I need to validate a text field after a checkbox has been clicked. This is part of a larger form validation. I am looking for the simplest and easy solution to this issue. I have seen a couple of other examples that are far too complicated for the my needs.

    The form is asking a user to identify a referral source. If the referral source is a website, it wants the user to provide a URL. To clarify, all it needs to do is verify that if the website checkbox is clicked then there is text in the corresponding textbox.

    Here's what i'am been trying to make work (Thanks in advance for any help)

    Code:
    function CheckAbout() {
    	var chks = newArray('info_newspaper', 'info_magazine', 'info_billboard', 'info_website', 'info_other');
    	var checkSelected = false;
    	
    		for (i=0; i < chks.length; i++){
    			if (document.getElementById(chks[i]) && document.getElementById(chks[i]).checked) { 
       checkSelected = true; 
       break; 
      } 
     } 
     if (!checkSelected){ 
      Message = "Please tell us tell us how you heard about us" + "\n" 
     } 
     
     if (document.getElementById(chks[1]) && document.getElementById('info_website_url')) { 
       if (document.getElementById(chks[1]).checked &&  
      (document.getElementById('info_website_url').value == '')){ 
        Message = "Please enter some text in txtBox 2." + "\n"
        document.getElementById('info_website_url').focus(); 
       } 
     } 
    
     if (document.getElementById(chks[2]) && document.getElementById('info_other_txt')) { 
       if (document.getElementById(chks[2]).checked &&  
      (document.getElementById('info_other_txt').value == '')){ 
        Message = "Please enter some text in txtBox 3." + "\n" 
        document.getElementById('info_other_txt').focus(); 
       } 
      } 
      else {
    	  Message = "" 
    	}
    	
    	return Message	
    }

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377
    Code:
      if ((document.getElementById('ckBox').checked && 
          document.getElementById('txtBox').value == '') ) { alert('Enter URL'); }
    Substitute your ID values for 'ckbox' and 'txtBox' in the code above.

  3. #3
    Join Date
    Oct 2011
    Posts
    3
    Quote Originally Posted by JMRKER View Post
    Code:
      if ((document.getElementById('ckBox').checked && 
          document.getElementById('txtBox').value == '') ) { alert('Enter URL'); }
    Substitute your ID values for 'ckbox' and 'txtBox' in the code above.
    Can you expound on this a bit more? I am still new to JavaScript and I still can't get it to work? Thanks

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb

    Here are the 4 conditions I can see using 2 variables...
    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    function checkURL() {
      var str = document.getElementById('txtBox').value;
      var flag = document.getElementById('ckBox').checked;
      if ((flag == true) && (str == '')) { alert('Missing URL'); return; }
      if ((flag == true) && (str != '')) { alert('URL to use is: '+str); return; }
    
      if (str == '') { alert('URL is blank'); return; }
      if (str != '') { alert('URL is being used as placeholder (?): '+str); } 
    }
    </script>
    
    </head>
    <body>
    Enter URL: <input type="text" name="txtBox" id="txtBox" value="">
     <input type="checkbox" name="ckBox" id="ckBox"> Use as URL
    <button onclick="checkURL()">Check URL</button>
    </body>
    </html>
    Remove the checks that you don't need.

    Good Luck!

  5. #5
    Join Date
    Oct 2011
    Posts
    3
    Thank you JMRKER

    I'am kinda like a blind guy, lurching around in javascript!

    I tried your suggestions and for my own lack of experience i couldn't get it to work but I did kinda of get the following code to work but it's not working quite right. What am I not doing right?

    Code:
    function CheckAbout() {
    	boxes = document.form.Box.length
    	txt = ""
    	
    	
    	for (i = 0; i < boxes; i++) {
    		if (document.form.Box[i].checked) {
    		txt = txt + document.form.Box[i].value + " "
    		}
    		}
    
    
    		if (txt == "") {
    			Message = "Please let us know who refered you" + "\n"
    			}
    			
    		else if(document.form.info_website.checked && document.form.info_website_url.value == "") {
    			Message	= "Please enter the website that referred you" + "\n"
    			}
    	
    		else if(document.form.info_other.checked && document.form.info_other_txt.value == "") {
    			Message	= "Please tell us who referred you" + "\n"
    			}
    			
    			else {
    				Message = ""
    				}
    
    			return Message
    }

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Question

    Quote Originally Posted by Nosdo3 View Post
    Thank you JMRKER

    I'am kinda like a blind guy, lurching around in javascript!

    I tried your suggestions and for my own lack of experience i couldn't get it to work but I did kinda of get the following code to work but it's not working quite right. What am I not doing right?

    Code:
    function CheckAbout() {
    	boxes = document.form.Box.length
    	txt = ""
    	
    	
    	for (i = 0; i < boxes; i++) {
    		if (document.form.Box[i].checked) {
    		txt = txt + document.form.Box[i].value + " "
    		}
    		}
    
    
    		if (txt == "") {
    			Message = "Please let us know who refered you" + "\n"
    			}
    			
    		else if(document.form.info_website.checked && document.form.info_website_url.value == "") {
    			Message	= "Please enter the website that referred you" + "\n"
    			}
    	
    		else if(document.form.info_other.checked && document.form.info_other_txt.value == "") {
    			Message	= "Please tell us who referred you" + "\n"
    			}
    			
    			else {
    				Message = ""
    				}
    
    			return Message
    }
    Will need to see the relevant code or a live site as I don't see where you reference 'Box' in your first or last post. Where is that defined?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles