[Solved] Issue getting a form input value after a first submit and editing the value

help
1

Have run into an issue with getting a form input value after an initial submit that’s really driving me nuts.

Here goes: I am able to submit a form and get the field values using normal jQuery val(). However, if I edit an input field, then submit again, the field value is returned as undefined.

Here’s the details: 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:

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:

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

But when I change the input value to “Karen”, here’s what I get:

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

So three questions:

  1. Why does thisVal1 not update when the text of the field is updated?
  2. Why do 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!

2

Can we see your template’s events code, please?

3

Sorry, I should have posted an update. After going deep down this rabbit hole, I realized the whole thing was wrapped in an if/else statement that was triggering the wrong value, so the value I was getting back was from a different block, hence the undefineds. Good times.

1 Like