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);
    });

You should give your <div> an "id" or a "class", not a "name". — Pointy
– Pointy, Commented Feb 3, 2017 at 0:37
I switched from "name" to "class" and am now getting this error: Uncaught TypeError: Cannot read property 'toLowerCase' of undefined — cianz
– cianz, Commented Feb 3, 2017 at 0:55
Why not give the DIVs a unique ID in the script that dynamically creates them? — Obsidian Age
– Obsidian Age, Commented Feb 3, 2017 at 0:56

josephting · Accepted Answer · 2017-02-03 00:57:46Z

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>

answered Feb 3, 2017 at 0:57

josephting

2,6763 gold badges33 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cianz Over a year ago

Thank you, it makes perfect sense after your explanation. I feel a bit silly now!

Collectives™ on Stack Overflow

Submit a single dynamically generated input with jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related