Cfrgtkky

I am trying to troubleshoot a bug written from another developer, and I do not understand the way the Attribute starts with selector is being used.

Inside a dialog box there are input fields with uniquely set id's.

And then when the user submits, the function is attached like so,

$('#dialogform').dialog({

             autoOpen: false,

             height: 925,

             width: 1025,

             modal: true,

             buttons: {

                 Submit: function () {

 var JQuerycollection = $('#dialogform').data();

                     if (JQuerycollection.isClosed.val() == "False") {



                         JQuerycollection["msg"] = "Submit";

                         JQuerycollection[$('[id^="ETI"]').prop('id')] = $('[id^="ETI"]').val();

and then stringified and sent through ajax to the backend:

data: JSON.stringify({ JSONcollection: JQuerycollection, dlgMsg: "Submit" })

There are two input elements that start with "ETI" for its ID, ETI_1234 and ETI_1235. When I use the debugger in FireFox, I can see only the first one is being added as a property (This is the bug), "ETI_1234 = 17"

Referencing the JQuery API: https://api.jquery.com/attribute-starts-with-selector/

From the API, I understand the example and how the selector works when the right side is not using another Selector, but I do not understand how it is being used in the code I am troubleshooting.

If you want to add all the elements to the object, you need to change:

JQuerycollection[$('[id^="ETI"]').prop('id')] = $('[id^="ETI"]').val();

to:

$('[id^="ETI"]').each(function(){

  JQuerycollection[this.id] = this.value;

});

$('[id^="ETI"]').prop('id') will return only a single value as prop() only returns a single value. If the result stack of the selector has multiple elements, it will get only the value of the first result, not all of them.

The bug here is that $('[id^="ETI"]') is a selector that might return more than one item, but when used with methods like .prop() or .val() will only return the value of the first item of the multiple items.

To fix this, you should iterate through the possible multiple elements $('[id^="ETI"]') and then on each to do the value assignment.

Something like:

$.each($('[id^="ETI"]'), function(i, el) {

    JQuerycollection[$(el).attr('id')] = $(el).val();

});