Develop Reference

How to get the text written in text input

I'm trying to grab the txt I wrote inside the my <input type="text"> but it is returning undefined , I tried many ways such as .text() or .html() or e.target.value , all of them returned undefined including this innerHTML too
$('input[type=text]').keyup(function(e){
if(e.which == 13){
alert($('input[type=text]').innerHTML);
}
});

You are mixing jQuery with Vanilla and they aren't the same. First of all, this was not going to work either way because form elements have values, not HTML. However, lets say you had tried this: alert($('input[type=text]').value);
value is a property of an html input element, but does not exist in a jQuery object. The jQuery object represents the form element, but wraps it in an extra set of properties and methods. If you truly wanted to mix them you could reference the form element from the jQuery object like:
alert($('input[type=text]')[0].value);
But it's better for legibility and consistency to stay with one or the other, which in jQuery would be
alert($('input[type=text]').val());
but as you're inside a jQuery event handler for that element, you can get it with
alert($(this).val());

Find related element using jQuery

Based on this DOM tree below when a comment reply button is clicked I need to use $(this) and then navigate to the next comment textarea .task-modal-cmt-reply-textarea
I am using jQuery and tried to use .parent().parent().closest('.task-modal-cmt-reply-textarea') and a few other combination without luck so far.
Can someone show me an efficient way to get this element into a var?
What I am trying to accomplish...
I have a click even on a comment reply button which insert a reply form into the DOM below a parent comment when the reply button is clicked using...
$document.on('click', '.cmt-reply-btn', function(e) {}
In this click event the reply form is put into the DOM with...
$parentCmtDomNode.after(cmtReplyFormTemplateHtml);
After the form is in the DOM I try to attach a jQuery plugin to it for #mention style capability using...
$('.task-modal-cmt-reply-textarea').mentionsInput({});
The problem
The #mention library works for the 1st clicked on comment form but all other reply forms do not work

another way to get a reference to that element, would be to do this:
var el = $(this).parent().parent().next().find('.task-modal-cmt-reply-textarea').eq(0);
note that the eq(0) just gives a single object back instead of an array with one element, which may or may not be necessary depending on what you want to do with it.

You need to do another .parent(), the two parent() you did only bring you up to the level of class "Activity-item Activity-comment" with data-activity-id = 12. Do another parent and you should be fine.

try this
var textarea_value=$(this).closest('.Activity-item').next('.Activity-item').find('form .task-model-cmt-reply-textarea').val();
or if its related with data-activityid = "12" so you can use
$(document).on('click','.cmt-reply-btn',function(){
var textarea_value = $(form[data-comment-parent-id = "'+$(this).attr('data-activityid')+' .task-modal-cmt-reply-textarea"]).val();
});

A more efficient way would be to use the parents api from jQuery then followed by your .closests
.parents('div')
The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree. Also, $( "html" ).parent() method returns a set containing document whereas $( "html" ).parents() returns an empty set.
Then add the following sub selector to your closest chain.
.closest('textarea[name=^"task-modal-cmt-textarea"]')
This looks for the closest textarea with the name starting with task-modal-cmt-textarea. This is more efficient than what you have as this will eliminate any lookups on non textarea elements then it will only filter out the textareas that have that particular name.
EDIT: Updated Answer to the OP's recent edit.
$('.task-modal-cmt-reply-textarea').mentionsInput({});
This will select all of the ".task-modal-cmt-reply-textarea" that are on the screen at the time, it will not account for future ones. To achieve what you are looking for you should put a sub selector on this chain to allow it to attach to the newest form that was created.
$('.task-modal-cmt-reply-textarea',$($parentCmtDomNode).next('textarea')).mentionsInput({});
This should be placed after the
$parentCmtDomNode.after(cmtReplyFormTemplateHtml);

Try this:
var txt_html = $(this).parents('.Activity').children("textarea:first").html();
var txt_val = $(this).parents('.Activity').children("textarea:first").val();
In the parents() function you need to use the closest parent class/ id.

var el = $(this).parents('.Activity-item').next().find('.task-modal-cmt-reply-textarea').eq(0);

How to access elements from a certain form and certain type with jquery

so I have a page with multiple forms and I would like to be able to access input elements of type="datetime" within a particular form. I know I can do $('input[type="datetime"]') but that would give me all input tags on the page. I also cannot use the "form" attribute because not all browser use it (Sigh IE). Worse scenario for me is to do something like:
$(document.forms["..."].elements).each(function() {
if (this.type="datetime") {.....}
});
but I am sure this can be done in jQuery with one selector. Can someone tell me how do this with one selector?

Add id to your form and then select DOM inside of that form as below.
$('#form input[type="datetime"]')

Without seeing some HTML this is just a shot in the dark. But if you give your forms an id you can do:
$("#yourFormId input[type='datetime']");
If you do not have ids, but you know the number, then this might do it:
$("form:eq(4) input[type='datetime']");

There are multiple ways to do it
Solution 1.
use descendant selector
ex:
$('#yourform input[type="datetime"]') //or
$('.yourform input[type="datetime"]') //or
$('form:eq(3) input[type="datetime"]')
Solution 2:
Use context based look up
Ex:
$('input[type="datetime"]', yourform)

this.is(":checked") not working

I'm using the following code to loop through all the checkboxes in my form. The boxes are gerenated dynamicaly from a php script so I won't know the names or the number of check boxes.
I need to find out which checkboxes have been ticked so I only pass those ones to the php script that handles the form.
$("#panelform input:checkbox").each(function () {
if(this.is(":checked")){
fields = fields+"&"+this.name+"="+this.value;
}
});
When the script gets to the this.is(":checked") it errors but being jquery my console doesn't show me any error messages just stops.
if I alert or console.log "this" after the first line I get the form field so I know that that much works.

try with
if($(this).is(":checked")){
since this is just a reference to the node in the DOM (and you need instead to use the jQuery wrapper to chain the method is().

Try this:
if( this.checked)
this is the plain DOM node, checked is its property to tell you if it's checked or not. Creating a whole new jQuery object just to see if a property is set is redundant.

In that contect, this refers to the DOM element, not the jQuery object - and DOM elements have no method is(). You can wrap it in a jQuery object if you want to use is method:
if($(this).is(":checked")){
or use the DOM Element's checked property:
if(this.checked){

$(this).is(':checked')
if you want to serialize your form try this
$('your-form-selector').serializeArray()

Get all elements contained in document and their current values using jquery or any preferred library

Im trying to grab the entire DOM from a page using
document.getElementsByTagName('html')[0].innerHTML
but I noticed that it does not get the current values for any inputs, textareas, selects, etc...
Is there a way that I can grab their current values as well? essentially I want to take a snapshot of the page in its current state.
I have looked at .each and .serialize in JQuery, but it seems like both are not ideal solutions..

First move the values of all form inputs to the value attribute :
$(':input').each(function(){
$(this).attr('value', this.value);
});
Then use your code:
document.getElementsByTagName('html')[0].innerHTML
// Or the jQuery way:
$('html').html()
Live DEMO

You could try something like this to select all the elements contained on the DOM through jQuery
$(document).Ready(function(){
//select all the document in the DOM
$("*");
});