Submitting a dynamically created form in jQuery

Question

I am trying to submit a form that I dynamically created. I am using the .submit, but it is not working. Here is my code

var $message = $('.message');



$message.submit(function(e){
    console.log("Test");
});


$(document.body).on('click','.button', function(e) { 
    console.log($(this).val());
    var $input = '';
    $input = $('<p>Chat with '+$(this).val()+'</p>');
    $input.append('<div class = "chat" style="height:200px"></div>');
    $input.append('<form class="message">');
    $input.append('<input size = "35" class="messages">');
    $input.append("<br><input type='submit' class='send_message' value = 'Send' />");
    $input.append('</form>');

    $input.appendTo($("#contentWrap"));
 });

The code for document.body created the form. However, when I click the submit button nothing happens.

I also tried

$('#contentWrap').on("submit", ".message", function(e){
            console.log("Test")
});

$(parent).on(event, child, function) is what most of the posts I read say to do. However, I must be doing something else wrong.

Here is the fill front end code in js fiddle https://jsfiddle.net/55Ln0wgu/

I tried $('#contentWrap').on("submit", ".message", function(e){ console.log("Test") }); Still does not print out Test — Aaron, Sep 22 '16 at 20:24
*"However, when I click the submit button nothing happens."* are you sure the page isn't reloading after posting to the server? because that's what it should be doing. If you're not paying close attention you might not even notice it. — Kevin B, Sep 22 '16 at 20:32
It would, but then it would almost instantly go away unless you have the preserve log checkbox checked. — Kevin B, Sep 22 '16 at 20:35
@KevinB I added e.preventDefault();, to make sure the page is reloading. However, that did not fix the problem — Aaron, Sep 22 '16 at 20:39
In the log with that checkbox checked, do you see "navigating to " in the console after submitting? — Kevin B, Sep 22 '16 at 20:42
Also, to be clear, your "i also tried" portion is the correct way, your original way won't work. — Kevin B, Sep 22 '16 at 20:43

score 1 · Accepted Answer · answered Sep 22 '16 at 20:44

The problem is that the submit button isn't in the form. You're appending each <input> element to the <p>, not the <form>. The result is equivalent to this HTML, which has an empty <form>.

<p>Chat with 
    <div class="chat" style="height:200px"></div>
    <form class="message"></form>
    <input size="35" class="messages"><br>
    <input type="submit" class="send_message" value="Send">
</p>

Remember, .append() operates on the DOM hierarchy, it's not concatenating strings to the HTML.

Your code would work if you built $input as a string.

You also need to use event delegation for the Submit button, since it's being added dynamically.

$(document.body).on('click', '.button', function(e) {
  console.log($(this).val());
  var $input = '<p>Chat with ' + $(this).val();
  $input += '<div class = "chat" style="height:200px"></div>';
  $input += '<form class="message">';
  $input += '<input size = "35" class="messages">';
  $input += "<br><input type='submit' class='send_message' value = 'Send' />";
  $input += '</form></p>';

  $("#contentWrap").append($input);
});

$('#contentWrap').on("submit", ".message", function(e) {
  alert("Test");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Form should appear here:
<div id="contentWrap">

</div>
Chat with:
<input type="button" class="button" value="Fred">
<input type="button" class="button" value="Joe">

score -1 · Answer 2 · edited Sep 22 '16 at 20:17

-1

Try this

$('#contentWrap').on('click', '.button', function(e) { 
    console.log($(this).val());   `

edited Sep 22 '16 at 20:17

Chris Forrence

9,648
11
43
59

answered Sep 22 '16 at 20:12

Reuben Gomes

866
8
13

It does not seem to change anything – Aaron Sep 22 '16 at 20:18
1

This is in the code that creates the form, he said that this part works. His problem is with the code that submits the form. – Barmar Sep 22 '16 at 20:20

Submitting a dynamically created form in jQuery

2 Answers2