How to get updated form input value via jQuery/Javascript?

Question

I see lots of discussion about setting and getting a field value via jQuery. But my issue is that I am unable to get a value after I submit, then edit the value in an input field, then submit again. So the first time it works, the second time it doesn't.

Here's my scenario: I have a form that is used to manage filters for a dataset:

<form id="filtersForm">
  <div class="row">
    <div class="col-md-12">
      <div id="addContactFilter">
        <div class="row filterRow" id="contact_filter_780b902d">
          <div class="col-md-4">
            <!-- Selectize dropdown of fields to query by -->
            <div class="control-group">
              <select id="filterField_780b902d" class="selectizeField selectized" name="filterField_780b902d" placeholder="Select field..." tabindex="-1" style="display: none;">
                <option value="firstName" selected="selected">First Name</option>
              </select>
              <div class="selectize-control selectizeField single">
                <div class="selectize-input items has-options full has-items">
                  <div data-value="firstName" class="item">First Name</div>
                  <input type="text" autocomplete="off" tabindex="" style="width: 4px; opacity: 0; position: absolute; left: -10000px;">
                </div>
                <div class="selectize-dropdown single selectizeField" style="display: none; visibility: visible; width: 248px; top: 34px; left: 0px;">
                  <div class="selectize-dropdown-content">
                    <div data-value="firstName" data-selectable="" class="option selected">First Name</div>
                    <div data-value="lastName" data-selectable="" class="option">Last Name</div>
                    <div data-value="organization" data-selectable="" class="option">Organization</div>
                    <div data-value="jobTitle" data-selectable="" class="option">Job Title</div>
                    <div data-value="city" data-selectable="" class="option">City</div>
                    <div data-value="state" data-selectable="" class="option">State</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <select id="filterOperator_780b902d" class="form-control">
              <option value="=">equals</option>
              <option value="contains">contains</option>
            </select>
          </div>
          <div class="col-md-4">
            <div id="contact_filter_value_780b902d">
              <!-- THIS IS THE FIELD IN QUESTION -->
              <input class="form-control" type="text" name="filterValue_780b902d" id="filterValue_780b902d" data-type="String" placeholder="Input Value">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row filterCriteria">
    <div class="col-md-12">
      <input class="btn btn-default" type="submit" value="Submit">
    </div>
  </div>
</form>

When I first submit the form, I am able to successfully get the value for the input field with id #filterValue_780b902d. But if the user edits the value in the form, then submits again, the original value is returned.

Here's how I try to retrieve the value (I am using Meteor JS, which provides an event map on the click event with an event parameter):

var target    = event.target,
    fieldName = 'filterValue_' + fieldId;
    thisVal1  = target[fieldName].value,
    thisVal2  = template.find( "[name='" + fieldName + "']" ).value,
    thisVal3  = $( '#' + fieldName ).attr('value'),
    thisVal4  = $( '#' + fieldName ).val();

When I submit the form the first time with the input value "Meghan", here's the response logs:

contactFilters.filtersForm submit
contactFilters.filtersForm.fieldId: 780b902d
contactFilters.filtersForm.fieldName: filterValue_780b902d
contactFilters.filtersForm.thisVal1: Meghan
contactFilters.filtersForm.thisVal2: Meghan
contactFilters.filtersForm.thisVal3: undefined
contactFilters.filtersForm.thisVal4: Meghan

But when I change the input value to "Karen", here's what I get:

contactFilters.filtersForm submit
contactFilters.filtersForm.fieldId: 780b902d
contactFilters.filtersForm.fieldName: filterValue_780b902d
contactFilters.filtersForm.thisVal1: Meghan
contactFilters.filtersForm.thisVal2: undefined
contactFilters.filtersForm.thisVal3: undefined
contactFilters.filtersForm.thisVal4: undefined

So three questions:

1. Why does thisVal1 not update when the text of the field is updated?
2. Why does thisVal2 and thisVal4 become undefined?
3. What's the proper way to get the field value that will update when the input field value updates?

Thanks in advance for your help!

Answer 1

i believe the correct way to get value in jQuery is to use the val() function.

so you should probably be using:

var target    = event.target,
    fieldName = 'filterValue_' + fieldId;
    myValue  = $( '#' + fieldName ).val();

as stated here: https://stackoverflow.com/a/15903284/6368401 and here: http://api.jquery.com/val/

in javascript

document.getElementById("input_id").value

other javascript methods explained here: How do I get the value of text input field using JavaScript?

to answer your 'undefined' questions:

var target    = event.target,
    fieldName = 'filterValue_' + fieldId;
    thisVal1  = target[fieldName].value,

this is getting the original value from the postback.

thisVal2  = template.find( "[name='" + fieldName + "']" ).value,

i cant answer this one, as i dont know the answer

thisVal3  = $( '#' + fieldName ).attr('value');

the attribute "value" was never defined in the markup.