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());
});
});

use a dynamic jQuery function for more than one Field and div

I have a jQuery code that gets the value of the text input and add its value to a div class. while following code works fine, i am trying to find out how to make this function work more dynamic for more than one text input and more than one divs, without copying the same script for each input and div again and again.
jQuery(document).ready(function($) {
function checkForInput(element) {
var value = $('.my-input-1').val();
$("#myDiv_1").removeClass().addClass(value);
}
$('input.my-input-1').on('change keyup', function() {
checkForInput(this);
});
});
jQuery(document).ready(function($) {
function checkForInput(element) {
var value = $('.my-input-2').val();
$("#myDiv_2").removeClass().addClass(value);
}
$('input.my-input-2').on('change keyup', function() {
checkForInput(this);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="my-input-1" value="">
<input type="text" class="my-input-2" value="">
<div id="myDiv_1" class=""> First Div </div>
<div id="myDiv_2" class=""> Second Div </div>

You can use an attribute for each input that its value represents the id of the div
jQuery(document).ready(function($) {
$('input.class-input').on('change keyup', function() {
const $this = $(this);
const value = $this.val();
const divId = $this.data('for');
$(`#${divId}`).removeClass().addClass(value);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="class-input" value="" data-for="myDiv_1">
<input type="text" class="class-input" value="" data-for="myDiv_2">
<div id="myDiv_1" class=""> First Div </div>
<div id="myDiv_2" class=""> Second Div </div>

In case if you don't want to have identical classes for input elements.(As per your code.) Hope it helps.
jQuery(document).ready(function($){
function checkForInput(elementClass,elementValue) {
var inputNumber= elementClass.substr(elementClass.length-1);
var divclass='#myDiv_'+inputNumber;
$(divclass).removeClass().addClass(elementValue);
}
$('input.my-input-1').on('change keyup', function() {
checkForInput($(this).attr('class'),$(this).val());
});
$('input.my-input-2').on('change keyup', function() {
checkForInput($(this).attr('class'),$(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="my-input-1" value="">
<input type="text" class="my-input-2" value="">
<div id="myDiv_1" class=""> First Div </div>
<div id="myDiv_2" class=""> Second Div </div>

How to get textarea value from many different textarea with the same IDs

How can I get a value from many different textarea tags with same IDs using jQuery? I also need to allow the user a choice of which textarea he/she wants to add a comment, and then get the comment.
This is my HTML
<div class="container">
<div class="wall_post">
<p>First Post</p>
<textarea id="user_comment" class="form-control" placeholder="Type your comment here"></textarea>
</div>
<div class="wall_post">
<p>Second Post</p>
<textarea id="user_comment" class="form-control" placeholder="Type your comment here"></textarea>
</div>
<div class="wall_post">
<p>Third Post</p>
<textarea id="user_comment" class="form-control" placeholder="Type your comment here"></textarea>
</div>
<div class="wall_post">
<p>Fourth Post</p>
<textarea id="user_comment" class="form-control" placeholder="Type your comment here" ></textarea>
</div>
</div>
And this is my jQuery so far
This jQuery only prints out the first textarea value, but is ignoring the others.
$(document).on('keydown', function(e) {
var targetInput = $('#user_comment');
if(!targetInput.is(document.activeElement)) {
alert('Typed while not focused on #myInput!');
}else{
if(e.which == 13){
alert(targetInput.val());
targetInput.val('');
}
}
});
Thank you in advance!

Ids must be unique. You can rather use classname.
Also you can use target to get current keydown element:
$(document).on('keydown', function(e) {
var targetInput = $(e.target);
if(!targetInput.is('textarea')) {
alert('Typed while not focused on #myInput!');
}else{
if(e.which == 13){
alert(targetInput.val());
targetInput.val('');
}
}});
Working Demo

As ID's are expected to be unique jQuery will return the first element, not a list of all with that ID.
To access all of your textareas you could use this selector (assuming there is only a single text area with each wall_post div:
$('.wall_post textarea')
You could bind your keydown event to this instead as well:
$(document).on('keydown', '.wall_post textarea', function(e) {
// do whatever you need to with this textarea
});

Clicking textarea hides label value

Is there a way to delete the label when I click into the textarea?
http://jsfiddle.net/1smvym84/4/
HTML:
<li id='field_1_9' class='gfield' >
<label class='gfield_label' for='input_1_9'>Place this inside the textarea</label>
<div class='ginput_container'>
<textarea name='input_9' id='input_1_9' class='textarea medium' tabindex='8' rows='10' cols='50'></textarea>
</div>
</li>
JQUERY:
$(document).ready(function(){
$('.textarea').text($('.gfield_label').text());
$('.gfield_label').remove();
});
Many thanks for any help :-)

If you want to delete it on focus:
$("#input_1_9").focus(function() {
$(this).parent("div").prev("label").remove();
});

I think what you are looking for is HTML's placeholder attribute:
<textarea name="input_9" id="input_1_9" class="textarea medium" tabindex="8" rows="10" cols="50" placeholder="Your text goes here"></textarea>

I think it will be better if you will use placeholders. Like this:
<textarea placeholder="Place this inside the textarea"></textarea>
But, if you want do it in JS it will be like this:
$('.textarea').on('click', function() {
$('.gfield_label').remove();
});

Try this:
$(document).ready(function(){
//work for all elements which have the css class textarea
$('.textarea').click(function(){
$('.textarea').val($('.gfield_label').html());
//if you want to remove all elements having gfield_label css class
$('.gfield_label').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<label class="gfield_label">this is label</label>
<textarea class="textarea"></textarea>
</form>

You probably want to delete it when entering then add it back if nothing is written. There are 2 ways to accomplish this:
The HTML5 way:http://jsfiddle.net/1smvym84/8/
$(document).ready(function(){
var placeholderText = $('.gfield_label').text();
$('.textarea').attr("placeholder",placeholderText);
$('.gfield_label').remove();
});
The jQuery way: http://jsfiddle.net/1smvym84/7/
$(document).ready(function(){
var placeholderText = $('.gfield_label').text();
$('.textarea').text(placeholderText);
$('.gfield_label').remove();
$('.textarea').focus(function(){
var $this = $(this);
if ($this.text() === placeholderText){
$(this).text("");
}
}).blur(function(){
var $this = $(this);
if ($this.text() === ""){
$(this).text(placeholderText);
}
})
});

If you are using the for attribute on the labels consistently, looking up the appropriate label to delete should be fairly easy:
$('.textarea').on("focus", function() {
var areaId = $(this).attr("id");
var areaLabel = $("label[for='" + areaId + "']");
// Get the content from the label
$(this).text(areaLabel.text());
// Remove the label
areaLabel.remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class='gfield_label' for='input_1_9'>Place this inside the textarea</label>
<div class='ginput_container'>
<textarea name='input_9' id='input_1_9' class='textarea medium' tabindex='8' rows='10' cols='50'></textarea>
</div>

Disabled button on click with jquery mobile

html:
<script src="http://zurb.com/playground/javascripts/plugins/jquery.textchange.min.js"></script>
<form>
<input type="text" name="comment" id="comment" placeholder="Comment" maxlength="140" value=""/>
<div id="charactersLeft"></div>
<input type="submit" id="commentButton" data-icon="edit" data-inline="true" data-mini="true" data-theme="b" value="Send" disabled="disabled"/>
</form>
<div id="actionList">
</div>
js:
$('#comment').bind('hastext', function () {
$('#commentButton').button('enable');
});
$('#comment').bind('notext', function () {
$('#commentButton').button('disable');
});
$('#comment').bind('textchange', function (event, previousText) {
$('#charactersLeft').html( 140 - parseInt($(this).val().length) );
});
$('#commentButton').click(
function(){
$('#actionList').prepend('<p class="item">' + $('input[name=comment]').val().trim() + '</p>');
$('#commentForm').each (function(){ this.reset(); });
//document.getElementById('commentForm').reset();
$(this).button('disable');
}
);
On Fiddle its works another, that on my machine. So, test local. The problem is: when I write a comment, than I click on the button, comment apears in #actionList, the button blocked. Nice. But. If I want to write a new comment, the button will be disabled. I have text in input, but I cant click button. I deleted my new text in input, and than I can write something and button finally enabled.
Its very strange, how to fix it? Thanks.

I added the line, to remove comment once posted:
$('#comment').val("");
I also replaced your hastext and notext functions with this code, added in the textchange function:
var tb_value = this.value;
if (tb_value == "") {
$('#commentButton').button('disable');
} else {
$('#commentButton').button('enable');
}
See the Fiddle.