如何在最后一个选项卡中显示页面的填充表单值

How to display filled form values of page in final tab in JQuery?

本文关键字:填充 表单 显示 最后一个 选项      更新时间:2023-09-26

在一个文档的多个选项卡中都有表单。

用户在一个选项卡中填写表单,例如"财务选项卡"。

表单包括标签,单选,文本框,日期

当转到最后一个选项卡;我们需要以表格的形式显示他在财务选项卡中填写的内容。

假设下面是他填写的表单的HTML,我只是输入演示值,这些值有重复的面板,但有不同或相同id或不同数据类型的元素:

<div class="panel clonablePart" id="Money_panel1">
 <label class="boldText">Amount</label>
 <input type="text" id="gula.bugula">
 <label class="boldText">Is amount correct</label>
 <input type="radio" /> Yes <input type="radio" /> No
</div>
<div class="panel clonablePart" id="Money_panel2">
 <label class="boldText">amount</label>
 <input type="text" id="gula.bugula" data-forfinalScreen>
 <label class="boldText">Is amount great?</label>
 <input type="radio" data-forfinalScreen /> Yes <input type="radio" /> No
</div>

请分享你的输入如何在jQuery中做到这一点?

如何在jQuery中动态地选择DIV中所有输入和标签的值?

Update 1:请考虑有50个字段将显示在最终选项卡上。

您可以一次选择所有输入元素并打印如下值

//select all inputs in a div with id Money_panel1
$("#Money_panel1 :input").each(function( index ) {
    //if it is a textbox get value
    if( $(this).attr("type")  == "text"  )
      alert( $( this ).val() );
    //if it is radio/checkbox get whether its checked or not
    else if(  $(this).attr("type") == "radio" )
        alert( $(this).is(":checked") );
 });

如果你想选择多个项目,你可以编写jquery选择器,如

$("#Money_panel1 :input, #Money_panel1 label")

如果您混合了标签和输入,您可以使用.prop("tagName")方法确定元素的类型。

在JS/jQuery中,你可以根据它的id获取任何元素的值。

    <script>
    alert($('#gula.bugula').val());
    </script>