We Keep Coding

How do you set the text from an input to another element after clicking submit?

For example when somebody inputs text and presses submit I want the text to be displayed in an h1 tag.
<div>
<label for="message"> Message:</label>
<input type="text" id="message" name="message" class="m3">
<button id="btn1" class="butt">Ready to Send?</button>
<h1 id="test">Header</h1>
</div>
$(document).ready(function() {
$('btn1').click(function() {
$('#test').text($("#message").val());
});
});

$(document).ready(function() {
$('#btn1').click(function() {
$('#test').text($("#message").val());
//--> if you want to remove the value of the input after parsing the code, simply check if
//--> not `null` or not `undefined` by placing the selector.val() in your if conditional...
if($("#message").val()){
$("#message").val('');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label for="message"> Message:</label>
<input type="text" id="message" name="message" class="m3">
<button id="btn1" class="butt">Ready to Send?</button>
<h1 id="test">Header</h1>
</div>
You did not add the # selector in JQuery for ID
$(document).ready(function() {
$('#btn1').click(function() {//<-- Make sure to add the ID selector # in Jquery
$('#test').text($("#message").val());
});
});

$(document).ready(function () {
$('#btn1').click(function (e) {
e.preventDefault();
$('#test').html($("#message").val());
});
});
This would work fine, but like #Teemu says this removes the form functionality. If you want to add a check mechanism you can use something like this:
$(document).ready(function () {
$("#message").keyup(function() {
$("#test").html($("#message").val());
});
});

Why is "this.getAttribute()" returning null?

I'm working with dynamic fields and I want to sort the fields into a JS object. But when I call getAttribute, it returns null.
Here, q2 is the ID that I want to print off for testing. It prints off the value successfully (and its children for some reason), but getAttribute is null.
<div class="input-group" data-question-id = nVar id = q2>
----
$( "#qForm" ).submit(function( event ) {
$('#q2 input').each(function () {
console.log(this.value);
console.log(this.getAttribute("data-question-id"))
nVar is a variable ID that I iterate when I add a field.
Thanks!

$('#q2 input') doesn't point to the element that has the data-question-id attribute. Assuming the input is a direct child, you need to use this.parentNode instead:
$(document).ready(function() {
$('#q2 input').each(function() {
console.log(this.value);
console.log(this.parentNode.getAttribute("data-question-id"));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group" data-question-id="5" id="q2">
<input type="text" value="hello world!">
</div>
Note that it's generally considered better not to mix JS and jQuery constructs where you can remain consistent. For example, staying with jQuery:
$(document).ready(function() {
$('#q2 input').each(function() {
console.log($(this).val());
console.log($(this).parent().data("question-id"));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group" data-question-id="5" id="q2">
<input type="text" value="hello world!">
</div>
or in pure JS:
window.onload = function() {
document.querySelectorAll('#q2 input').forEach(function(el) {
console.log(el.value);
console.log(el.parentNode.getAttribute("data-question-id"));
});
};
<div class="input-group" data-question-id="5" id="q2">
<input type="text" value="hello world!">
</div>

how to get value of one of the input elements from the same class?

Here's my snippet.
Is there any other way other than appending event listener to every element of the class?
I would like to avoid loops if possible.

I couldn't add comment to Jason Cemra.
In addition to His/Her answer the target element as required by PhoxKiD is the input with the class 'inp'. So place a condition
document.getElementById("parent").addEventListener("keyup", function (event){
if(event.target.className == 'inp') {
//your code
}
else{ //for other inner elements
event.preventDefault(); //prevents the default action
event.stopPropagation(); //stop bubbling up
}
}

You could attach a single listener to a parent element (in this case <body>) and use the event.target attribute to get the DOM node that the event fired off.
This works because the event bubbles up through the DOM hierarchy. It's called "Event Delegation"
See these links:
https://developer.mozilla.org/en-US/docs/Web/API/Event/target
https://davidwalsh.name/event-delegate
Example Code:
HTML:
<div id="parent">
<input type="text" class="inp">
<input type="text" class="inp">
<input type="text" class="inp">
</div>
JavaScript:
document.getElementById("parent").addEventListener("keyup", function (event) {
console.log(event.target.value)
}

Use [].forEach.call() to iterate HTMLCollection
var user_input = document.getElementsByClassName('inp');
[].forEach.call(user_input, function(el) {
el.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode == 13) {
console.log(this.value); //this keyword in the handler function refers to element on which event is invoked!
}
});
});
<input type="text" class="inp">
<input type="text" class="inp">
<input type="text" class="inp">

Short syntax for multiple selectors of one HTML element

I have the following code:
<form id="form">
<input type="checkbox" name="foo" />
<input type="checkbox" name="bar" />
</form>
<form>
<input type="checkbox" name="foo">
<input type="checkbox" name="bar">
</form>
And this jQuery:
$(document).ready(function(){
$('#form input[name=foo], input[name=bar]').change(function (){
alert('foo');
});
});
Now, if I check #form foo, 'foo' will be displayed. This happens not if I check the other checkbox "foo", but by both 'bar' checkboxes.
What I want is, that only the action will be recognized that was taken in the form with the id 'form'. I can do that by modifying this line to:
$('#form input[name=foo], #form input[name=bar]').change(function (){
I was just wondering if there is a 'short' syntax possibility?
Best regards

If I were you, I would assign the same class for them and apply the jquery for that class like this:
$('#form .classname').change(function (){
alert('foo');
});

Well, not really shorter, but you can avoid using #form twice by doing:
$('#form').find('input[name=foo], input[name=bar]').change(function () {
Slightly shorter:
$('#form input').filter('[name=foo], [name=bar]').change(function () {

You can use select the #form and then use find on the element:
Example:
$(document).ready(function () {
$('#form').find('input[name=foo], input[name=bar]').change(function () {
alert('foo');
});
});
Fiddler: http://jsfiddle.net/5LH7G/
Documentation find:
Get the descendants of each element in the current set of matched
elements, filtered by a selector, jQuery object, or element.

You can use selector by attribute value :
$('form [name=foo], form [name=bar]').change(function (){
alert('foo');
});

jQuery each field inside parent

I'm trying to build a common clear fields button that has the following html structure:
<td colspan="2">
<input type="text" name="unpublish_date" id="unpublish_date" class="calendar" />
<img class="clear_date" src="ico_delete.gif" title="Reset date field"></span>
<input type="hidden" name="_unpublish_date" id="_unpublish_date" />
</td>
So I though that the right way to do the function is by working with the inputs, inside the parent of .clear_date
What I would like to know is how to select each input after $(this).parent
$('.clear_date').click(function(){
$(this).parent().each() ... ?
});

Just use .siblings with a filter:
$(this).siblings('input').each()...;

You can use this:
$(this).parent().find("input").each(function(){
$(this).val("");
});

Try this:
$(this).parent().find('input').each() ...
See jQerty .find()

$('.clear_date').click(function(){
$(this).siblings().each(function() {
$(this).val("");
});
});

$('input', $('.clear_dates').parent()).each(function
{
...
});
or
$('.clear_dates').parent().find('input').each(function
{
...
});
You can of course replace $('.clear_dates') with $(this) so:
$('input', $(this).parent()).each(function
{
...
});
or
$(this).parent().find('input').each(function
{
...
});