Populating the form with default values on click of radio buttons

Question

I have a form with 3 radio buttons and 3 text boxes , on click of a radio button one input field shows up and other two hides (using jQuery). Now I wish to submit the form by filling the two hidden fields with some default values , I have tried to assign values to this two hidden fields but it didn't worked ,

Please help me , here's what i have tried till know and an unable to assign values to the hidden text field .

 $(document).ready(function(){ $('input[type="radio"]').click(function(){ if($(this).attr("value")=="red"){ $(".box").hide(); $(".red").show(); } if($(this).attr("value")=="green"){ $(".box").hide(); $(".green").show(); } if($(this).attr("value")=="blue"){ $(".box").hide(); $(".blue").show(); } }); }); 

 .box{ padding: 20px; display: none; margin-top: 20px; border: 1px solid #000; } .red{ background: #ff0000; } .green{ background: #00ff00; } .blue{ background: #0000ff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <label><input type="radio" name="colorRadio" value="red"> red</label> <label><input type="radio" name="colorRadio" value="green"> green</label> <label><input type="radio" name="colorRadio" value="blue"> blue</label> </div> <form id="myform"> <div class="red box"> <input type="text" > </div> <div class="green box"><input type="text" ></div> <div class="blue box"><input type="text" ></div> <input type="submit"> </form> 

Answer 1

As far as I know when a form element is set to display: none , you can't capture its value when you submit the form. You should hide them in a different way just don't use display: none .

Submit form fields inside display:none element

Answer 2

First your <input type="text" /> don't have a name, you need to assign them names so form will pass their values"

<input type="text" name="redText" />

You can just use .val() instead of .attr("value") .
To assign values to hidden input texts you can just use:

if ($(this).val() == "red") {
    $(".box").hide();
    $(".red").show();
    $(".box input[type=text]").val("It Works!");
    $(".red input[type=text]").val("ahhaaa!");
}
//and so on

And you may consider using hidden inputs :

<input type="hidden" name="greenHidden" value="the_value_to_be_sent" />

jsfiddle DEMO