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

Posted 2021-05-06

我看到很多关于通过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 map参数在click事件上提供event）：

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. 获取输入字段值更新时将更新的字段值的正确方法是什么？

在此先感谢您的帮助！

答案

我相信在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');

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