Question

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

请帮助我，这是我尝试过的知识，并且无法为隐藏文字字段指定值。

＆＃13;

$(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();
        }
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

Submit form fields inside display:none element

Answer 2

首先，您的<input type="text" />没有姓名，您需要为其指定名称，以便表单传递其值＆＃34;

<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

单击单选按钮，使用默认值填充表单

2 个答案: