Submit a single dynamically generated input with jQuery

Question

I have a form which contains dynamically created text input (they have the class serialNumber). Once text is entered into one of these inputs, the script below is meant to check the text and return the result into a dynamically created DIV (serialNumberSearchResults).

The code below will submit, however the posted serialNumber value is blank. I have been searching for a solution, however they all seem to require the use of a unique ID, which I can't do as the inputs and DIVs are dynamically generated.

<div name="serialNumberBox">
  <table width="100%" border="0" cellspacing="0" cellpadding="5">
    <thead>
      <tr>
        <td>Serial number</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" class="serialNumber" name="serialNumber[]" placeholder="enter serial number">
          <div class="serialNumberSearchResults"></div></td>
      </tr>
    </tbody>
  </table>
</div>



    // check serial number
    $(document).on('keyup', '.serialNumber', function () {
        // wait 0.5 second before acting
        delay(function() {
            // submit the form
            $.ajax({
                type: 'POST',
                url: 'assetProcess.php',
                data: { serialNumber: $(this).val() },
                success: function(response) {
                    if (response != undefined) {
                        $(this).closest('.serialNumberSearchResults').html(response);
                    }
                },
                error: function() {
                    $(this).closest('.serialNumberSearchResults').html('Error! Plese try again.');
                }
            });
            return false;
        }, 500);
    });

Answer 1

You are trying to reference this within a closure. In that context, this will return window.

To get around this, define .serialNumber outside of the closure with a variable first like so.

$(document).on('keyup', '.serialNumber', function () {
    var $this = $(this);
    // wait 0.5 second before acting
    delay(function() {
        // submit the form
        $.ajax({
            type: 'POST',
            url: 'assetProcess.php',
            data: { serialNumber: $this.val() },
            success: function(response) {
                if (response != undefined) {
                    $this.closest('td').find('.serialNumberSearchResults').html(response);
                }
            },
            error: function() {
                $this.closest('td').find('.serialNumberSearchResults').html('Error! Plese try again.');
            }
        });
        return false;
    }, 500);
});

Another thing to note is how you use $.closest(). It will search for the current element's ancestors only by traversing up.

Alternative function to get what you want in this case is to use $.siblings().

However, $.siblings might return multiple elements. Another way to achieve what you want is to first traversing up 1 level and then use $.find().

There will also be no problem with using class so feel free to change your result div to:

<div class="serialNumberSearchResults"></div>