单击单选按钮时使用默认值填充表单答案

【问题标题】：Populating the form with default values on click of radio buttons单击单选按钮时使用默认值填充表单
【发布时间】：2015-05-14 01:25:36
【问题描述】：

我有一个带有 3 个单选按钮和 3 个文本框的表单，单击单选按钮会显示一个输入字段，而其他两个隐藏（使用 jQuery）。现在我希望通过用一些默认值填充两个隐藏字段来提交表单，我试图为这两个隐藏字段赋值，但没有成功，

请帮助我，这是我尝试过的，但无法为隐藏的文本字段赋值。

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

【问题讨论】：

你没有为这三个输入文本字段设置名称，并且你没有为这些赋值。
试试 Keith Wood jQuery 插件 - keith-wood.name/countdown.html

标签： javascript jquery html forms

【解决方案1】：

据我所知，当表单元素设置为display: none 时，您无法在提交表单时捕获它的值。您应该以不同的方式隐藏它们，只是不要使用display: none。

Submit form fields inside display:none element

【讨论】：

这不是真的。带有display: none; 的元素确实被发送到服务器，只有disabled 元素不是：jsfiddle.net/samuraii/73ezqj33/1
你是对的。今天看来，这个问题已经不复存在了。此外，我最后一次遇到这个问题是几年前在我提供的链接中回答的那个人。感谢您清除它。

【解决方案2】：

首先你的<input type="text" /> 没有名字，你需要给它们命名，这样表单才能传递它们的值”

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

您可以只使用.val() 而不是.attr("value")。
要将值分配给隐藏的输入文本，您可以使用：

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

你可以考虑使用hidden inputs：

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

jsfiddle DEMO

【讨论】：