Loop through elements in a form using Jquery

Question

How can i loop through every elements in a form. i want to store the name if any update happens for the element. My code working correctly for input types. But i didn't get desired output incase of select field.

<html>
<form method="post" action="" id="basic_profile" class="basic_profile">
    <fieldset class="lang_content" dir="ltr" id="fieldset-en">
        <legend>English</legend>
        <dl>
            <dd>
                <select id="cardtype" name="cardtype">
                    <option value="debit-0.00-50.00">Debit1</option>
                    <option selected='selected' value="debit-0.00-50.00">Debit2</option>
                    <option value="debit-0.00-50.00">Debit3</option>
                    <option value="Credit-1.00-50.00">CreditCard</option>
                </select>
            </dd> 
            <dt id="business_name_en-label"><label class="optional" for="business_name_en">Profile Name / Business Entity Name</label></dt>

            <dd id="business_name_en-element">
                <input type="text" value="New Tesr" id="business_name_en" name="business_name_en">
            </dd> <dt id="description_en-label"><label class="optional" for="description_en">Description</label></dt>

            <dd id="description_en-element">
                <textarea cols="50" rows="4" id="description_en" name="description_en">new test description</textarea>
            </dd> <dt id="contact_person_en-label"><label class="optional" for="contact_person_en">Contact Name</label></dt>

            <dd id="contact_person_en-element">
                <input type="text" value="New test" id="contact_person_en" name="contact_person_en">
            </dd> <dt id="street_en-label"><label class="optional" for="street_en">Street</label></dt>

            <dd id="street_en-element">
                <input type="text" value="" id="street_en" name="street_en">
            </dd> <dt id="area_en-label"><label class="optional" for="area_en">Area</label></dt>

            <dd id="area_en-element">
                <input type="text" value="" id="area_en" name="area_en">
            </dd>
        </dl>
    </fieldset>
    <input type="submit" value="Save" id="save" name="save">
</form>

</html>

And my jquery is:

<script type="text/javascript">
$("#save").click(function() {
    var info = '';
    $("#basic_profile dl dd ").each(function() {
        if (this.defaultValue !== this.value)
            if (info === '')
                info += this.name;
            else
                info += ',' + this.name;
    });

    alert(info);
    $('#form_info').val(info);
    return false;

 });
</script>

Santosh Joshi · Accepted Answer · 2013-11-22 07:34:17Z

6

you can try:

$('#basic_profile').find(':input').each(function(){

});

This will select all input ,selects, textarea etc.

answered Nov 22, 2013 at 7:34

Santosh Joshi

3,3405 gold badges40 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Prajila V P Over a year ago

is there any way to compare select field default value and selected value?

Santosh Joshi Over a year ago

i don't thing there is a way, all you need is to store the selected value in some variable and the on change of the select box check against the stored value

Apul Gupta · Accepted Answer · 2014-09-16 21:18:57Z

1

Try using defaultValue attribute on input/select tag.

$('#basic_profile').find(':input').each(function(){

    var defaultValue = $(this).prop('defaultValue);
});

answered Sep 16, 2014 at 21:18

Apul Gupta

3,0344 gold badges24 silver badges30 bronze badges

Collectives™ on Stack Overflow

Loop through elements in a form using Jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related