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:

Why does thisVal1 not update when the text of the field is updated?
Why does thisVal2 and thisVal4 become undefined?
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!

Possible duplicate of [Get the value in an input text box](https://stackoverflow.com/questions/4088467/get-the-value-in-an-input-text-box) — Heriberto Lugo, Dec 25 '17 at 03:23
@HeribertoLugo the title might be duplicate, but the content (question) is not. he just dont know how tp write the right question — plonknimbuzz, Dec 25 '17 at 05:36
your title question answer is: `$(selector).val();` but if i read this `ut if the user edits the value in the form, then submits again, the original value is returned.` your problem is not your javascript only but maybe your php too — plonknimbuzz, Dec 25 '17 at 05:40
Thanks for the feedback. It's not a duplicate of that question because in my situation I can get the value of the input using `.val()` I just can't get it after editing the field. I'll add more detail to @heriberto-lugo's answer below. — Allen Fuller, Dec 25 '17 at 14:19
i think it might be possible the issue lies with how you are using meteor js. the question isnt tagged with meteor js, maybe it should be. i cant imagine why it would be a server side issue (with your php or whatever you may be using), it seems to more than likely be a client side issue. — Heriberto Lugo, Dec 25 '17 at 22:29
looking through meteor js, it looks like the common way to find values is using your first method and a variation of your second method: template.$( "#" + fieldName).value. and they all seem to have event.preventDefault() as the first line inside your function (after "submit #register_form": function (event, template)) and return false as the last line. since you didnt include the rest of your js, i would check that those 2 lines i mentioned are infact there, and in the correct place. — Heriberto Lugo, Dec 25 '17 at 22:57

Heriberto Lugo · Answer 1 · 2017-12-25T03:38:22.700

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.

Thanks for the thoughtful answer. Completely forgot I had removed `.val()` from the options. But the same thing happens there as with `thisVal2` above. On the first submit, it returns the correct value, Meghan, but when I change the value of the input in the browser and submit again, it returns `undefined`. — Allen Fuller, Dec 25 '17 at 14:20

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

1 Answers1