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>

u didn't set name to that three input textfield and you are not assign value to these. — Leo Silence, May 14 '15 at 01:38
Try the Keith Wood jQuery plugin - http://keith-wood.name/countdown.html — Sterling Silver, May 14 '15 at 02:05

score 0 · Answer 1 · edited May 23 '17 at 11:50

0

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

edited May 23 '17 at 11:50

Community

1
1

answered May 14 '15 at 01:30

DigitalDouble

1,747
14
26

1

That's not true. Elements with `display: none;` are indeed sent to the server, only `disabled` elements are not: https://jsfiddle.net/samuraii/73ezqj33/1/ – Samurai May 14 '15 at 02:47
You're right. It seems that problem is no longer true today. Besides, the last time I encountered this issue was years ago same with the guy who answered in the link I provided. Thanks for clearing that. – DigitalDouble May 14 '15 at 03:05

score 0 · Answer 2 · answered May 14 '15 at 02:15

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

Populating the form with default values on click of radio buttons

2 Answers2