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

Question

There are forms in several tabs of a document.

A user fill a form in one tab say "Finance Tab".

Form includes Labels, Radio, Textbox, Date

When go to final tab; We need to display what he have filled in Finance tab in form of table.

Say following is HTML of form which he filled, I am just entering demo values which have repetitive panels but have elements with different or same id or different data-type:

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

Please share your inputs how to do that in jQuery?

How can i pick values of all Inputs and Label in a DIV dynamically in jQuery?

Update 1: Please consider there are 50 fields which are to be displayed on final tab. If any changes in HTML required then i am open to do that.

score 1 · Accepted Answer · answered Aug 05 '15 at 09:18

1

You can select all the input elements at once and print values like below

//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") );

 });

If you want to select multiple items you can write jquery selector like

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

You can determine type of element using .prop("tagName") method if you are mixing labels and inputs.

answered Aug 05 '15 at 09:18

rahimv

541
4
12

Nice Way. Suppose i want 5 out of 7 elements. Then do you think custom attribute "data-To-FinalTab" is fine way to do it and in this data-To-FinalTab we use ID of that element? – fatherazrael Aug 05 '15 at 12:54
ID should be unique. Giving same id (data-To-FinalTab) to all the form elements will create problems in getting the values later, I would go with class="data-To-FinalTab" instead. Or you can define custom attribute whose name starts with "data-", as it is allowed in HTML5. Refer http://www.w3.org/TR/html5/dom.html for more information on allowed non-visible custom attributes. – rahimv Aug 05 '15 at 13:14
More information and other options for defining custom attributes are given here http://stackoverflow.com/questions/992115/custom-attributes-yea-or-nay – rahimv Aug 05 '15 at 13:19
Thanks. Accepted answer. – fatherazrael Aug 05 '15 at 13:53

score 0 · Answer 2 · answered Aug 05 '15 at 07:39

0

You can fetch any elements value based on it's id in JS/jQuery.

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

answered Aug 05 '15 at 07:39

dpanshu

453
3
14

But say there are 50 Fields. Then Should i use that? – fatherazrael Aug 05 '15 at 07:40
@fatherazrael what do you want to do with them? You can also use a for each loop to retrieve all values. – dpanshu Aug 05 '15 at 07:43
Just to display the values entered by user. – fatherazrael Aug 05 '15 at 07:48

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

2 Answers2