Basically, I have two radio button 'yes' and 'no' and then a further two 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/not able to enter in data until the relevant radio button has been selected and then that field only bees available for data input.

I am a plete novice but I imagine this is achievable by using CSS and/or JavaScript. Please bear in mind I have next to know knowledge of JavaScript but can logically alter pre-existing JS code.

My current code looks like this:

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

Basically, I have two radio button 'yes' and 'no' and then a further two 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/not able to enter in data until the relevant radio button has been selected and then that field only bees available for data input.

I am a plete novice but I imagine this is achievable by using CSS and/or JavaScript. Please bear in mind I have next to know knowledge of JavaScript but can logically alter pre-existing JS code.

My current code looks like this:

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

• javascript
• html
• css

5 Answers 5

How about this little 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();   
        }
    });
});

You'll find a JSFiddle here.

Please note I've added an ID to both <input> fields. Let me know how it fairs.

If you prefer for the <input> fields to be disabled rather than readonly, just replace readonly with disabled everywhere. I personally think readonly is nicer as the Operating System seems to make more of it's own effect on disabled inputs.

The focus(), of course, isn't necessary - But the little things make a big difference and I always prefer it when a website moves my cursor to where it's expected to be for me.

You could use http://jquery./ to do this:

include this in the head of your html:

<script type="text/javascript" src="http://ajax.googleapis./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 the jsfiddle for a working example http://jsfiddle/KFgbg/3/

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 basic, just adds an onclick function to each of the inputs and enables or disables the 'disabled' property for the relevant text input. You will need to add the "#input1" and "#input2" ID's to the text inputs, naming can be as desired obviously.

<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's one way:

1. give your textboxes ID attributes as well as names
2. disable via html attribute both text boxes to start
3. onclick of 'yes' radio button, enable field1 and disable field2
4. onclick of 'no' radio button, disable field1 and enable field2

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