javascript - 如何通过 jQuery/Javascript 获取更新的表单输入值？

Question

我看到很多关于通过 jQuery 设置和获取字段值的讨论。但我的问题是提交后无法获取值，然后在输入字段中编辑值，然后再次提交。所以第一次有效，第二次无效。

这是我的场景:我有一个用于管理数据集过滤器的表单:

<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>

当我第一次提交表单时，我能够成功获取 ID 为 #filterValue_780b902d 的输入字段的值。但如果用户在表单中编辑值，然后再次提交，则返回原始值。

以下是我尝试检索值的方法(我使用的是 Meteor JS，它在带有 event 参数的点击事件上提供 event map):

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

当我第一次使用输入值“Meghan”提交表单时，这是响应日志:

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

但是当我将输入值更改为“Karen”时，这是我得到的:

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

所以三个问题:

1. 为什么 thisVal1 在字段文本更新时不更新？
2. 为什么 thisVal2 和 thisVal4 变成了 undefined？
3. 获取将在输入字段值更新时更新的字段值的正确方法是什么？

预先感谢您的帮助!

Answer 1

我相信在 jQuery 中获取值的正确方法是使用 val() 函数。

所以你可能应该使用:

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

如这里所述: https://stackoverflow.com/a/15903284/6368401和这里: http://api.jquery.com/val/

在javascript中

document.getElementById("input_id").value

此处解释的其他 javascript 方法: How do I get the value of text input field using JavaScript?

回答您“未定义”的问题:

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

这是从回发中获取原始值。

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

因为我不知道答案，所以我不能回答这个问题

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

属性“值”从未在标记中定义。