How to send AJAX request from a <form> created by jQuery - php

Question

I have a jQuery textarea from where I am posting form values with a button. I don't want to refresh the page and use AJAX for this purpose so that the page does not get refreshed. I have tried a lot but the solution does not seem to be coming out. Here is my code for the same. Any insight will be really helpful.
Here is my code,
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.click_notes').on('click',function(){
var tid = $(this).data('question-id');
$(this).closest('ul').find('.demo').html("<div class='comment_form'><span onclick='$(this).parent().hide()'><b>X</b></span><form id = 'contactForm1' action='submit.php' method='post'><textarea required cols ='50' class='span10' name='notes' rows='6'></textarea><br><input class='btn btn-primary' id = 'submitnotes' name= 'submit_notes' type='submit' onclick = 'submitform()' value='Add Notes'><input type='hidden' name='submitValue' value='"+tid+"' /></form><br></div>");
});
});
</script>
<script type="text/javascript">
function submitform() {
e.preventDefault();
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
console.log('Submission was successful.');
console.log(data);
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
},
});
}
</script>

Answer 1

To achieve this hook to the submit event of the form itself, not the click event of the submit button. Also note that you shouldn't be using on* event attributes. As the HTML content of the form is dynamically appended to the DOM you can use a delegated event handler on both the form and span instead. Try this:
$(document).ready(function() {
$('.click_notes').on('click', function() {
var tid = $(this).data('question-id');
$(this).closest('ul').find('.demo').html('<div class="comment_form"><span><b>X</b></span><form id="contactForm1" action="submit.php" method="post"><textarea required cols="50" class="span10" name="notes" rows="6"></textarea><br><input class="btn btn-primary" id="submitnotes" name="submit_notes" type="submit" value="Add Notes"><input type="hidden" name="submitValue" value="' + tid + '" /></form><br></div>');
});
$(document).on('submit', '#contactForm1', function(e) {
e.preventDefault();
$.ajax({
type: this.method,
url: this.action,
data: $(this).serialize(),
success: function(data) {
console.log('Submission was successful.');
console.log(data);
},
error: function(xhr) {
console.log('An error occurred.');
console.log(xhr);
},
});
}).on('click', 'span', function() {
$(this).parent().hide()
});
});
Also note that you're including two versions of jQuery, one of which (1.6.1) is getting nearly 8 years out of date. I'd suggest using a single reference to jQuery 3.3.1 instead.