Geek Answers Handbook

Enabling text fields based on radio button selection

Basically, I have two yes and no radio buttons, and then two more input fields.

[LabelQuestion] [RadioYes][RadioNo] If yes, then... [TextField1] If no, then... [TextField2]

By default, I would like to have text fields 1 and 2 inactive / unable to enter data until the appropriate radio button is selected, and then this field will become available only for data input.

I am a complete newbie, but I think it is possible using CSS and / or JavaScript. Please keep in mind that I know JavaScript, but I can logically modify existing JS code.

My current code is as follows:

  <div class='conlabel'>Have you started trading yet?</div> <table width="100"> <tr> <td><label> <input type="radio" name="example" value="Yes" id="example_0" required/> Yes</label></td> </tr> <tr> <td><label> <input type="radio" name="example" value="No" id="example_1" required/> No</label></td> </tr> </table> <li> <div class='conlabel'>If Yes, then:</div> <input type="text" name="field1" placeholder="" /> </li><br> <div class='conlabel'>If No, then:</div> <input type="text" name="field2" placeholder="" /> </li><br>
+4
source share
5 answers

How about this small number:

 $(function(){ $("#example_0, #example_1").change(function(){ $("#field1, #field2").val("").attr("readonly",true); if($("#example_0").is(":checked")){ $("#field1").removeAttr("readonly"); $("#field1").focus(); } else if($("#example_1").is(":checked")){ $("#field2").removeAttr("readonly"); $("#field2").focus(); } }); });

Here you will find JSFiddle .

Please note that I have added the identifier to both <input> fields. Let me know how this happens.

If you prefer the <input> fields to be disabled rather than readonly , just replace readonly with disabled everywhere. I personally think that readonly better than it seems that the operating system is making more of its own impact on disabled inputs.

focus() , of course, is not needed. But the little things matter a lot, and I always prefer this when the website moves my cursor to where it expected to be for me.

+4
source

Add this javascript / jQuery to your html, this should do the trick:

 <script type="text/javascript"> $(function () { // First add disabled properties to inputs $("input:text").prop('disabled', true); // Yes Input $("#example_0").on("click", function () { $("#input1").prop('disabled', false); $("#input2").prop('disabled', true); }); // No Input $("#example_1").on("click", function () { $("#input2").prop('disabled', false); $("#input1").prop('disabled', true); }); }); </script>

Very simple, just adds the onclick function to each of the inputs and enables or disables the "disabled" property for the corresponding text input. You will need to add the identifiers "# input1" and "# input2" to the text inputs, the naming can be arbitrarily obvious.

+1
source

You can use http://jquery.com/ to do this:

indicate this in the html header:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

And also add this javascript:

  <script type="text/javascript"> $(document).ready(function () { function checkradiobox(){ var radio = $("input[name='example']:checked").val(); $('#field1, #field2').attr('disabled',true); if(radio == "Yes"){ $('#field1').attr('disabled',false); $("#field1").focus(); }else if(radio == "No"){ $('#field2').attr('disabled',false); $("#field2").focus(); } } $("#example_0, #example_1").change(function () { checkradiobox(); }); checkradiobox(); }); </script>

Check jsfiddle for a working example http://jsfiddle.net/KFgbg/3/

+1
source 
 <div class='conlabel'>Have you started trading yet?</div> <table width="100"> <tr> <td><label> <input onclick="document.getElementById('field1').disabled=false;document.getElementById('field2').disabled=true;"" type="radio" name="example" value="Yes" id="example_0" required/> Yes</label></td> </tr> <tr> <td><label> <input onclick="document.getElementById('field1').disabled=true;document.getElementById('field2').disabled=false;" type="radio" name="example" value="No" id="example_1" required/> No</label></td> </tr> </table> <li> <div class='conlabel'>If Yes, then:</div> <input type="text" id="field1" name="field1" placeholder="" disabled="true" /> </li><br> <div class='conlabel'>If No, then:</div> <input type="text" id="field2" name="field2" placeholder="" disabled="true" />


There are many ways to do this, but to edit your code as little as possible, here is one way:

  • indicate your text field identifier identifiers as well as the names
  • disable via html attribute as text fields to run
  • onclick yes, enable field1 and disable field2
  • onclick switch 'no', disable field1 and enable field2
0
source 
 <script language="Javascript"> function hideA() { document.getElementById("A").style.visibility="hidden"; document.getElementById("B").style.visibility="visible"; } function hideB() { document.getElementById("B").style.visibility="hidden"; document.getElementById("A").style.visibility="visible"; } </script> </head> <body> <form name="f1" method="post" action=""> <table> <tr><th>catagory</th><th><input type="radio" name="cat" value="seller" onClick="hideB()">Seller <input type="radio" name="cat" value="buyer" onclick="hideA()"> buyer</th> </tr> <div style="position: absolute; left: 30px; top: 100px;visibility:hidden" id="A"> Seller Name<input type='text' name='sname'><br> Seller Product<input type='text' name='sproduct'> </div> <div style="position: absolute; left: 30px; top: 100px; visibility:hidden" id="B"> Buyer Name<input type='text' name='bname'><br> Buy Product<input type='text' name='bproduct'> </div> </form>
0
source

More articles:


All Articles