Get all inputs with random ID inside a div

Question

Trying to get the values of all inputs inside a div. The inputs are options with a product.

The product div ID is like this:

<div class="row border" id="p-$productID">

Each unique input id in the (product) list is generated like this:

p-$productID-$otherkeyThatIsNeverTheSame

We get $productID from the data-name value of the button clicked.

Below I am trying to find a way how @RomainGuidoux explains it here: jQuery Selector: Id Ends With?.

Just can't seem to make this work.

$('.btn#add_item').on('click', function () {
        var prod = $(this).attr('data-name');

    var allVal = '';
    $("[id^='p-'+prod+'] > input").each(function() {
        allVal += '&' + $(this).attr('name') + '=' + $(this).val();
    });
    alert(allVal);
});

The iteration is like this:

<select class="form-control" id="p-1-1" name="A">
<option>Type broodje</option>
<option value="Witte pistolette">Witte pistolette</option>
<option value="Bruine pistolette">Bruine pistolette</option>
</select>

<select class="form-control" id="p-1-2" name="B">
<option>Boter</option>
<option value="Met boter">Met boter</option>
<option value="Zonder boter">Zonder boter</option>
</select>

<select class="form-control" id="p-1-3" name="C">
<option>beleg</option>
<option value="Standaard belegd">Standaard belegd </option>
<option value="Dubbel Belegd">Dubbel Belegd</option>
</select>

Look at the colors in your question, the quotes are mismatched — adeneo, Dec 25 '15 at 01:04
Can you provide a sample of input html that you're iterating? — choz, Dec 25 '15 at 01:05
Why do you need all the values, and not just the selected ones ? — adeneo, Dec 25 '15 at 01:12
@KJS Are you getting the values of inputs or options? And what's your expected output for `allVal`? — choz, Dec 25 '15 at 01:12
And yes @adeneo, I'd rather have the selected ones as well, of course! — KJS, Dec 25 '15 at 01:14
@choz: allVal should return all the selected items, including text fields. But I understand input does just that. — KJS, Dec 25 '15 at 01:16
Stick those selects in a form with an ID, and just do `$('#form-id').serialize()` — adeneo, Dec 25 '15 at 01:16
Ok, if I don't get your question wrong, you're trying to extract names and values from inputs and selected options. Am I right? — choz, Dec 25 '15 at 01:21
@adeneo this is so cool! Is there any way to get the names of the inputs as well? Thanks already! Learning here! — KJS, Dec 25 '15 at 01:22

choz · Accepted Answer · 2015-12-25T01:55:27.993

First of all, your selector style is invalid.

If you're trying to get names and values for inputs. Like as in;

<button id="add_item" type="button" data-name="3"> Add Item </button>
<div id="p-3-12">
  <input type="text" name="productName" value="Square" />
  <input type="text" name="productQuantity" value="12" />
</div>
<div id="p-3-5565">
  <input type="text" name="itemName" value="Cup" />
  <input type="text" name="itemQuantity" value="5" />
</div>

You can then try.

$('.btn#add_item').on('click', function () {
    var prodId = $(this).attr('data-name');

    var allVal = '';
    var pres = 'p-' + prodId;

    $("[id^="+pres+"] > input").each(function() {
        allVal += '&' + $(this).attr('name') + '=' + $(this).val();
    });

    alert(allVal);
});

Like in this SAMPLE

But, If also want to iterate with select options as well, you may try to select multiple selectors, like..

$("div[id^="+pres+"] > input, select[id^="+pres+"]").each(function() {
  allVal += '&' + $(this).attr('name') + '=' + $(this).val();
});

Like in this SAMPLE

Update

For empty inputs or selects, I guess this would do..

$("div[id^="+pres+"] > input, select[id^="+pres+"]").each(function() {
  if ($(this).val().length > 0) {
    allVal += '&' + $(this).attr('name') + '=' + $(this).val();
  }
});

Like in this SAMPLE

Or, you can always try to serialize it if you have wrap the inputs and selects in a form tag. (As @adeneo approach), which makes much better practice and code friendly. — choz, Dec 25 '15 at 01:49
Thank you so much for this! It seems it picks up the empty fields and selects as well. Was already looking for an answer for that. Do you know a quick way to skip empty inputs and selects in this? — KJS, Dec 25 '15 at 01:51
Very cool! So if an option has no value, it still sees it as a value. Setting the value to 'value=""' it skips it. Didn't know that. Thanks so much choz! And andeneo of course. One of the best lessons ever here! — KJS, Dec 25 '15 at 02:06

Get all inputs with random ID inside a div

1 Answers1