如何通过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.