Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question OnClick Form Field Change / Hide & Un-hide Field

    I'm a noob I know ...so bare with me... but I need a javascript function that works onclick

    I have 6 fields to a form

    Fields 1 - 5 are viewable and 6 hidden on page load

    I need a function if the user changes a value in field 3 to a certain value

    then field 4 will be nulled and disabled

    and field 6 will become viewable to enter info into

    I hope this is understandable

    Thanks
    Darrel
    Last edited by dargpat; 08-25-2008 at 07:45 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Here you are:-

    Code:
    1<input type = "text" id = "field1"><br>
    2<input type = "text" id = "field2"><br>
    3<input type = "text" id = "field3" onchange = "disableField4()"><br>
    <div id = "div1" style.display = "block">
    4<input type = "text" id = "field4" ><br>
    </div>
    5<input type = "text" id = "field5"><br>
    <div id = "div2" style="visibility: hidden">
    6<input type = "text" id = "field6" > <br>
    </div>
    
    <script type = "text/javascript">
    function disableField4() {
    if (document.getElementById("field3").value == "12345") {
    document.getElementById("field4").value = "";  // in case user fills in field4 before field3
    document.getElementById("div1").style.display = "none";
    document.getElementById("div2").style.visibility='visible';
    }
    }
    </script>

    The whole aim of practical politics is to keep the populace alarmed (and hence clamorous to be led to safety)
    by menacing it with an endless series of hobgoblins, all of them imaginary.
    H.L. Mencken 1880-1956, American Editor, Author, Critic, Humorist
    Last edited by Philip M; 08-25-2008 at 08:07 PM.

  • Users who have thanked Philip M for this post:

    dargpat (08-26-2008)

  • #3
    Banned
    Join Date
    May 2005
    Location
    Midwest, U.S.
    Posts
    118
    Thanks
    1
    Thanked 26 Times in 23 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Any Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
    	var testVal = "hello";
    
    	function compare(nField){
    
    		if (nField.value == testVal)
    			{
    			 var nFields = document.forms[0].getElementsByTagName('label');
    			 nFields[3].style.display = "none";
    			 nFields[3].lastChild.disabled = true;
    			 nFields[5].className = "showField";
    			}
    	}
    	
    </script>
    <style type="text/css">
    
    	 body {background-color:#eae3c6;margin-top:60px}
    	 form {width:620px;margin:auto;font-family:times;font-size:12pt}
    	 fieldset {width:610px;background-color:#f0fff0;border:1px solid #87ceeb}
    	 legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
    	 label {display:block;margin-left:5px}
    	 input {text-align:right}
    	.altField {display:none}
    	.showField {display:block}
    	.submitBtn {font-family:tahoma;font-size:10pt;display:block;text-align:center;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}
    
    </style>
    </head>
    	<body>
    		<form action="" method="post">
    		   <fieldset>
    			<legend>Form</legend>
    				<label> One <input type="text" size="10" value="1"></label>				
    				<label> Two <input type="text" size="10" value="2"></label>
    				<label> Three <input type="text" size="10" value="3" onblur="compare(this)"></label>
    				<label> Four <input type="text" size="10" value="4"></label>
    				<label> Five <input type="text" size="10" value="5"></label>
    				<label class="altField"> Six <input type="text" size="10" value="6"></label>
    				<input type="submit" name="submit" value="Submit" class="submitBtn">
    		   </fieldset>
    		</form>
    	</body>
    </html>
    Last edited by Cranford; 08-25-2008 at 08:18 PM.

  • Users who have thanked Cranford for this post:

    dargpat (08-26-2008)

  • #4
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Cranford View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Any Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
    	var testVal = "hello";
    
    	function compare(nField){
    
    		if (nField.value == testVal)
    			{
    			 var nFields = document.forms[0].getElementsByTagName('label');
    			 nFields[3].style.display = "none";
    			 nFields[3].lastChild.disabled = true;
    			 nFields[5].className = "showField";
    			}
    	}
    	
    </script>
    <style type="text/css">
    
    	 body {background-color:#eae3c6;margin-top:60px}
    	 form {width:620px;margin:auto;font-family:times;font-size:12pt}
    	 fieldset {width:610px;background-color:#f0fff0;border:1px solid #87ceeb}
    	 legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
    	 label {display:block;margin-left:5px}
    	 input {text-align:right}
    	.altField {display:none}
    	.showField {display:block}
    	.submitBtn {font-family:tahoma;font-size:10pt;display:block;text-align:center;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}
    
    </style>
    </head>
    	<body>
    		<form action="" method="post">
    		   <fieldset>
    			<legend>Form</legend>
    				<label> One <input type="text" size="10" value="1"></label>				
    				<label> Two <input type="text" size="10" value="2"></label>
    				<label> Three <input type="text" size="10" value="3" onblur="compare(this)"></label>
    				<label> Four <input type="text" size="10" value="4"></label>
    				<label> Five <input type="text" size="10" value="5"></label>
    				<label class="altField"> Six <input type="text" size="10" value="6"></label>
    				<input type="submit" name="submit" value="Submit" class="submitBtn">
    		   </fieldset>
    		</form>
    	</body>
    </html>

    Thanks Cranford
    Exactly What I was looking for (Nice demo)

  • #5
    Banned
    Join Date
    May 2005
    Location
    Midwest, U.S.
    Posts
    118
    Thanks
    1
    Thanked 26 Times in 23 Posts
    You're welcome.
    Last edited by Cranford; 08-25-2008 at 09:19 PM.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Thanks Cranford
    Exactly What I was looking for (Nice demo)
    I don't like to say it but your script does not work.

    var testVal = "hello";
    if (nField.value == testVal)

    But if hello is entered the value of nField becomes hello3.

    Suggest alter testVal to = "hello3" - then it works.

    Also, if the user fills in field4 before typing hello into field3 that value is not erased and is submitted with the form.


    I have nothing but confidence in you. And very little of that.
    Groucho Marx (1890 - 1977)
    Last edited by Philip M; 08-26-2008 at 08:21 AM.

  • #7
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    I don't like to say it but your script does not work.

    var testVal = "hello";
    if (nField.value == testVal)

    But if hello is entered the value of nField becomes hello3.

    Suggest alter testVal to = "hello3" - then it works.

    Also, if the user fills in field4 before typing hello into field3 that value is not erased and is submitted with the form.


    I have nothing but confidence in you. And very little of that.
    Groucho Marx (1890 - 1977)
    Not sure what you did but it worked for me and I ironed it all out in PHP ..so it still gave me a heads up what I need to do ..and so did yours also ..so thank you too ..my biggest concern was if the user needed field 6 or not ...didn't matter really if field 4 was nulled or not ...

    Darrel
    Last edited by dargpat; 08-26-2008 at 04:03 PM.

  • #8
    Banned
    Join Date
    May 2005
    Location
    Midwest, U.S.
    Posts
    118
    Thanks
    1
    Thanked 26 Times in 23 Posts
    @dargpat
    Please read your PMs.


  •  

    Posting Permissions

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