difficulty getting list of values from series of input elements inside table rows

Question

I'm completely stumped. Granted, in java script i'm like that kid trying to jam a square peg into a round hole.

My high level objective: The admins want the ability to edit text surrounding some text boxes, as well as the ability to add and remove 'paragraph'. The reporters and users want the values that are in the textboxes to be used in comparisons, etc (which is the original functionality).

My Solution: This project uses a pretty messy value - attribute table (called an EAV?), which now has fields with associated fields and is self referencing. I decided to leverage this to minimize changes to the database, so the admin essentially creates a string, denotes the places a text box belongs using '{}', and assigns a name to the attribute into text boxes that appear directly below the paragraph.

My Problem: Textboxes generate fine, as soon as the admin stops typing the "{}" count is checked client side, and the correct number of textboxes are added/removed in rows below. However, when the "change" mode (and thereby save the new string) I also want to save the attribute names they selected. I can't seem to get the actual value out of the input. The java script below sends null to elementList. Closer inspection indicates that var fieldNames is getting two elements of "undefined" so it makes sense that I'm getting null. Its also apparent that Its hitting something, becuase the number aligns with there being two 'nameField' rows.

DOM (Hemed down to the essentials)

<tr data-editMode="TextMode" data-ordinal="0"> 
   ....
    <td>
        <a class="changeMode">
<tr class="nameField">
   <td colspan='4'>
   <input type="text" value="Testing">
<tr class="nameField">
  ....

Javascript

function getAssociatedTr(row) {
    var associatedRows = [];
    associatedRows.push(row);
    row = row.next('tr');
    var hasAnother = true;
    while (hasAnother == true) {
        if (row != null && row.hasClass("nameField")) {

            associatedRows.push(row);
            row = row.next('tr');
        } else {
            hasAnother = false;
        }
    }

    return associatedRows;
}


  $(".changeMode").live("click", function () {
            var options = $(this).data("options");
            var theRow = $(this).closest('tr');
            var rows = getAssociatedTr(theRow);
            var fieldNames = new Array();
            rows.splice(0, 1);
            for (var index = 0; index < rows.length; index++) {
                {
                    fieldNames.push(rows[index].next('.nameField').val());
                }
            }


            $(".modal-header", c.rowsModal).html("<h3>Changing edit mode" + options.table + "</h3>");
            c.rowsModal.modal("show");

            $.ajax({
                type: "POST",
                traditional: true,
                data: { "Name": options.table, "Ordinal": options.row, "EditMode": options.editMode, "ElementNames": fieldNames },
                url: "/contracts/changeeditmode/" + c.id.val(),
                success: function (data) {
                    theRow.replaceWith(data);
                    $.validator.unobtrusive.parse("#supplementForm");
                    c.rowsModal.modal("hide");

                    for (j = rows.length - 1 ; j >= 0; j--) {
                        rows[j].remove();
                    }
                }
            });

        });

Server side

public ActionResult ChangeEditMode(long id, AddTrackedRowViewModel model, 
      string editMode, List<string> elementNames)
    {
    }

As a side note, I'm open to constructive criticism on the JavaScript.

EDIT

I have updated the line to

     fieldNames.push(rows[index].nextAll('input').first().val());

But still getting undefined.

SOLUTION

    fieldNames.push(rows[index].find("input[type=text]").val());

Some may ask why I add the original row since I just remove it: I use that function in several places in which its necessary to include that row. — Seth
– Seth, Commented Jan 16, 2014 at 13:24

Carlos Corral Carvajal · Accepted Answer · 2014-01-16 13:37:28Z

2

In this line:

fieldNames.push(rows[index].next('.nameField').val());

you are using the selector ".nameField", but this get a "tr" element, if you want the textbox you need this:

fieldNames.push(rows[index].next('.valid').val());

or using other selector that give you the textbox.

answered Jan 16, 2014 at 13:37

Carlos Corral Carvajal

5264 silver badges14 bronze badges

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

2 Comments

Seth Over a year ago

Good catch, though still having issues. Actually the .valid is not on there, that was a mistake. .next('input') is not getting the next input, nor is .nextAll('input').first()

Seth Over a year ago

The syntax didn't play well, but the primary error was I was looking at the wrong syntax so I'll go ahead and give credit.

Collectives™ on Stack Overflow

difficulty getting list of values from series of input elements inside table rows

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related