将选择输入和无线电组的值连接成一个隐藏的字段值

Question

我正在尝试将各种选择菜单和广播组连接成一个隐藏字段值。我有一些“有效”，但没有提供所需的结果。基本上它返回无线电组的第一个值，但不返回“选定”的值。我假设我需要某种数组，然后连接“选定”值。

以下是一些相关的代码：

的jQuery

$(window).load(function() {
    $(document).ready(function() {
        $("#colorSelect, input[name=Radiogroup1]:checked, input[name=Columns]:checked, #fontSelect").change(function() {
            concatenated_string = $("#colorSelect").val() + '&' +
                                  $("input[name=Names]").val() + '&' +
                                  $("input[name=Columns]").val() + '&' +
                                  $("#fontSelect").val();
            $("#productImage").val(concatenated_string);
            $("#temp_display").text(concatenated_string)
        })
    })
});

的HTML

<form action="https://im-here.foxycart.com/cart" method="post" accept-charset="utf-8">
<div class="center">
    <!--Begin leftSide-->
    <div class="submission">
        <!--Begin hiddenInputs-->
        <input type="hidden" name="name" value="I'm Here Notification Sign" />
        <input type="hidden" name="price" value="10" />
        <input type="hidden" name="image" id="productImage" value="http://2plygraphics.com/im-here/images/01.jpg" />
        <!--End hiddenInputs-->
        <!--Begin colorSelection-->
        <div class="left eighty center">
            <label>Color</label>
            <br>
            <select id="colorSelect" name="Color" tabindex="1" required>
                <option value="" selected="selected" disabled>Choose A Color...</option>
                <option value="Black">Black</option>
                <option value="DarkGrey">Brushed Aluminum</option>
                <option value="DarkKhaki">Brass</option>
            </select>
        </div>
        <!--End colorSelection-->
        <br>
        <!--Begin nameSelection-->
        <div class="left eighty center">Number Of Names
            <br>
            <input type="radio" name="Names" value="1{p+100}" id="Names_1" class="NameRad1 trigger textBox1" tabindex="5" required />One
            <br>
            <input type="radio" name="Names" value="2{p+200}" id="Names_2" class="NameRad2 trigger textBox2" tabindex="6" />Two
            <br>
            <input type="radio" name="Names" value="3{p+300}" id="Names_3" class="NameRad3 trigger textBox3" tabindex="7" />Three
            <br>
            <input type="radio" name="Names" value="4{p+400}" id="Names_4" class="NameRad4 trigger textBox4" tabindex="8" />Four
            <br>
        </div>
        <!--End nameSelection-->
        <br>
        <!--Begin columnSelection-->
        <div class="left eighty center">Number Of Columns
            <br>
            <input type="radio" name="Columns" value="1" id="Columns_0" class="ColumnRad1 " tabindex="3" required />One
            <br>
            <input type="radio" name="Columns" value="2" id="Columns_1" class="ColumnRad2 " tabindex="4" />Two
            <br>
        </div>
        <!--End columnSelection-->
        <br>
        <!--Begin fontSelection-->
        <div class="left eighty center">
            <label>Font</label>
            <br>
            <select id="fontSelect" name="Font" tabindex="2" required>
                <option value="" selected="selected" disabled>Choose A Font...</option>
                <option value="Arial">Modern</option>
                <option value="Times New Roman">Classic</option>
                <option value="Impact">Vintage</option>
                <option value="Verdana">Retro</option>
            </select>
        </div>
        <!--End fontSelection-->
    </div>
    <!--End leftSide-->
    <!--Begin rightSide-->
    <div class="submission">
        <div class="signCreatorDiv">
            <div class="signMain"></div>
            <div class="namesColumn">
                <div class="NameImg content">
                    <div class="NameTxt1 right test">
                        <input class="test" type="text" name="name1" id="textBox1" value="" placeholder="Name 1" tabindex="9" />
                    </div>
                </div>
                <div class="NameImg content">
                    <div class="NameTxt2 right test ">
                        <input class="test" type="text" name="name2" id="textBox2" value="" placeholder="Name 2" tabindex="10" />
                    </div>
                </div>
                <div class="NameImg content">
                    <div class="NameTxt3 right test">
                        <input class="test" type="text" name="name3" id="textBox3" value="" placeholder="Name 3" tabindex="11" />
                    </div>
                </div>
                <div class="NameImg content">
                    <div class="NameTxt4 right test">
                        <input class="test" type="text" name="name4" id="textBox4" value="" placeholder="Name 4" tabindex="12" />
                    </div>
                </div>
            </div>
            <div class="submitDiv">
                <input type="submit" name="x:productsubmit" id="productsubmit" value="Add My Sign" class="submit" tabindex="13" />
            </div>
        </div>
    </div>
    <br>
    <br>
    <!--End rightSide-->
</div>
</form>
<div id="temp_display"></div>

这是一个小提琴：

http://jsfiddle.net/mU3Ab/

感谢您的帮助：）

Answer 1

修正这些行：

$("#colorSelect, input[name=Names], input[name=Columns], #fontSelect").change(function(){

concatenated_string = 
    $("#colorSelect").val() + '&' +
    $("input[name=Names]:checked").val() + '&' + 
    $("input[name=Columns]:checked").val() + '&' + 
    $("#fontSelect").val();

无论如何，我建议你去看看： https://api.jquery.com/serialize/

Answer 2

试试这个。

var concatenated_object ={};

  $("#colorSelect, input[name=Names], input[name=Columns], #fontSelect").change(function(){
     $("#colorSelect, input[name=Names]:checked, input[name=Columns]:checked,    #fontSelect").each(function(){
         concatenated_object[$(this).attr("name")]=$(this).val();     
    });
    console.log(JSON.stringify(concatenated_object));
    $("#productImage").val(JSON.stringify(concatenated_object));
    $("#temp_display").text(JSON.stringify(concatenated_object))
});

}）;