jquery getting form data

Question

I am trying to create a submit form that shows after clicking on a div and then retreive the filled in form data. Below is a test that I'm playing with for a day now. The variable "term" is always printed as undefined. Could anybody help me with this?

$(document).ready(function () {
    $("#nexttable").on("click", "#addcomment", function () {
        document.getElementById("nexttable").innerHTML = "<form  action='maindatabase.php'   id='commentform' method='post'><textarea name='newcomment' placeholder='Start typing your comment... (required)' rows='5' cols='50' required></textarea><br />"
        + "<span id='sbutton'><input type='button' value='Submit'></span><input type='hidden'     name='inputtype' value='3'></form>";
    });
});

$(document).ready(function () {
    $("#nexttable").on("click", "#sbutton", function () {
        var $form = $(this);
        var term = $form.find("input[name='newcomment']").val();
        document.getElementById("nexttable").innerHTML = term;
    });
});

OJay · Accepted Answer · 2014-04-04 02:19:39Z

1

No input on the page with the name newcomment, its a textarea ie

$form.find( "input[name='newcomment']" ).val();

will not find anything, it should be

$form.find( "textarea[name='newcomment']" ).val();

There is also a problem with the this in the event handler, as it is a delegated event handler

    $(document).ready(function () {
        $("#nexttable").on("click", "#sbutton", function () {
            var $form = $(this); // <-- HERE, the this I do believe is in reference to the #sbutton element, not anyting to do with a form
            var term = $form.find("input[name='newcomment']").val();
            document.getElementById("nexttable").innerHTML = term;
        });
    });

I would change it to something more like

    $(document).ready(function () {
        $("#nexttable").on("click", "#sbutton", function () {
            var $form = $(this).parents('form'); // <-- HERE, actually get the form element, which will be a prent of this element clicked ont
            var term = $form.find("input[name='newcomment']").val();
            document.getElementById("nexttable").innerHTML = term;
        });
    });

edited Apr 4, 2014 at 2:19

answered Apr 4, 2014 at 2:01

OJay

4,9313 gold badges29 silver badges47 bronze badges

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

4 Comments

user1967599 Over a year ago

Thanks for the answer. I certainly did miss this problem, but even after correcting it the printout says that the variable "term" is undefined. Anything else you think might be wrong with the code?

OJay Over a year ago

Ah. I think it might be the context of the this in your handler, I will add some more code to my answer

user1967599 Over a year ago

It still says "undefined". Thanks for trying to help though.

OJay Over a year ago

hmmm... that is strange, as I copied your code exactly, and made the changes I recommended, and everythings works fine. I'll do a fiddle for you

Collectives™ on Stack Overflow

jquery getting form data

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related