How to extract form element values in a loop?

Question

I have a list of form elements that I want to loop over to get the values of, so if someone typed their name in the input i want their name, if they selected an option from a select box I want the not the numerical value but the string. All these values needs to be outputted as one string.

This is the loop i've created, I however have no idea how to go about this problem..

every form element has a name starting with credit_

if someone could point me in the right direction it would be much appreciated..

$(this).parent().parent().find('[name*=credit_]').each(function( index ){

});

my html is quite simple.

<div class="comp-row">
     <!-- a select -->
     <!-- an input -->
</div>

This is part of the form, there are many other form fields but im only concerned with the ones within "comp-row" which Im manipulating a lot.

I ended up using:

$('.comp-row [name*="credit_"]:not([type=hidden])')
.each(function(index,elem)
{
    console.log($(this).text() != '' ? $(this).find('option:selected').text().trim() : $(this).val());
});
}

I agree with @qwertynl, it would be useful to see this. Could you maybe set up a jsFiddle or similar as a starting point? — Jordan Gray
– Jordan Gray, Commented Nov 27, 2013 at 17:35
you only set the name for the select and the input right? name property is invalid for option tag. — mschr
– mschr, Commented Nov 27, 2013 at 18:04

mschr · Accepted Answer · 2013-11-27 18:08:37Z

1

Youre looking for the $('select[name*="credit_"]>option:selected') selector.

To read the text value for your , issue .text()

Combine this with if($('input[name*="credit_"]').text() != '') evaluation, combined something like this:

var theName = $('input[name*="credit_"]').text() != '' 
   ? $('select[name*="credit_"]>option:selected').text() 
   : $('input[name*="credit_"]').text();

answered Nov 27, 2013 at 18:08

mschr

8,6413 gold badges24 silver badges35 bronze badges

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

Comments

charlietfl · Accepted Answer · 2013-11-27 17:37:01Z

1

Depending on format you want you can use serialize() or serializeArray().

For example to obtain for whole form:

var data=$('#myForm').serialize()

For specific group of elements:

$('[name*=credit_]').serializeArray()

serialize() API docs

serializeArray() API docs

answered Nov 27, 2013 at 17:37

charlietfl

172k14 gold badges125 silver badges154 bronze badges

2 Comments

Iamsamstimpson Over a year ago

ah no this is part of a form, there are many other form fields within the form but im concerned with only a section.

Barmar Over a year ago

.serialize will get the value of a select option, he wants the text of it.

Barmar · Accepted Answer · 2013-11-27 17:43:03Z

1

var result = '';
$(this).parent().parent().find('[name*=credit_]').each(function( index ){
    result += $(this).is("select") ? $(this).text() : $(this).val();
});

answered Nov 27, 2013 at 17:43

Barmar

789k57 gold badges555 silver badges669 bronze badges

Comments

Felipe Miosso · Accepted Answer · 2013-11-27 17:45:49Z

Iterate over all elements that match your criteria (name*=credit_). Check its type and put the value inside a variable.

HTML

<form>
    <input type="text" name="credit_a" value="1" />
    <input type="text" name="credit_b" value="2" />
    <input type="text" name="credit_c" value="3" />
    <select name="credit_d">
        <option value="kk">kk</option>
        <option value="jj" selected>jjjjj</option>
    </select>
    <input name="credit_e type="checkbox" checked value="imchecked" />
</form>

<form>
    <input type="text" name="credit_a" value="55" />
    <input type="text" name="credit_b" value="66" />
    <input type="text" name="credit_c" value="77" />
    <input type="text" name="credit_d" value="88" />
</form>

<p id="result"> </p>

javascript

$(function() {
    var values = '';

    $('form [name*=credit_]').each(function() {
        var $this = $(this);

        if($this[0].tagName == 'TEXTAREA') {
            values += ' ' + $this.text();   
        } 
        else if ($this[0].tagName == 'SELECT') {
            values += ' ' + $this.find(':selected').text();
        }
        else {
            values += ' ' + $this.val();
        }   
    });

    $('#result').html(values);    
});

jsfiddle: http://jsfiddle.net/5tgzr/2/

Collectives™ on Stack Overflow

How to extract form element values in a loop?

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related