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

How to show only one reply form in the blog?

I am building a blog app that allows thread comments. The users can reply to other comments by clicking the "reply" button beside the particular comment. By doing that, a comment form will show up, and the user can type in his reply.
I am using jQuery to build this functionality, here is my code:
$(document).ready(function(){
$(".comment-reply").bind("click.a", function(){
// hide all forms
$(".comment-form-reply").hide();
// bind buttons with "click" events again, because one of them is unbinded
$(".comment-reply").bind("click.c", function() {
$(this).parent().siblings(".comment-form-reply").show();
});
// show the comment form for current item
$(this).parent().siblings(".comment-form-reply").show();
// unbind current button with "click" event to prevent multiple forms
$(this).unbind(".a");
});
$(".comment-reply").bind("click.b", function(){
event.preventDefault();
});
});
When I click the first and then the second button, it works well. But if I click the first button again, the two forms are displaying at the same time. I think there should be something wrong here, but I am not able to figure it out.

I can see one mistake. You forgot to define "event" as a parameter:
$(".comment-reply").bind("click.b", function(){
event.preventDefault();
});
Right way:
$(".comment-reply").bind("click.b", function(event){
event.preventDefault();
});
You are talking about a reply-button, so I am going to think you are talking about the other buttons with the same class ".comment-reply".
This example should do exactly what you are looking for with easy code.
$(document).ready(() => {
$(".comment-reply").on("click", evt => { // Use "submit" instead of "click" for form submition !
// Prevent site from updating (this is only needed for submit-buttons inside a form)
evt.preventDefault();
// Define varibles
var elmt = $(evt.target),
elmt_sib_c = elmt.parent().siblings(".comment"),
elmt_sib_cfr = elmt.siblings(".comment-form-reply"),
elmt_sib_exit = elmt.siblings(".comment-form-reply-exit");
if (elmt_sib_cfr.css("display") === "none") {
// Show reply-field
elmt_sib_cfr.show();
elmt_sib_exit.show();
} else if (elmt_sib_cfr.val() != "") {
// Hide reply-field
elmt_sib_cfr.hide();
elmt_sib_exit.hide();
//*//
console.log(
"Posted to DB at comment: '",
elmt_sib_c.text(),
"' with content of: '",
elmt_sib_cfr.val(),
"'"
);
//*//
} else if (elmt_sib_cfr.val() == "") {
elmt_sib_cfr.focus()
}
// Empty reply-field
elmt_sib_cfr.val("");
});
//
$(".comment-form-reply-exit").on("click", evt => {
// Define varibles
var elmt = $(evt.target),
elmt_sib_cfr = elmt.siblings(".comment-form-reply");
function hide () {
// Hide reply-field
elmt_sib_cfr.hide();
elmt.hide();
}
if (elmt_sib_cfr.val() == "") {
hide()
} else if (confirm("Are you sure?")) {
hide()
}
});
});
.comment-form-reply {
display: none;
margin-top: 10px;
margin-bottom: 5px;
}
.comment-form-reply-exit {
display: none;
margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="comment">This is comment '0'.</div>
<form action="/" method="post">
<input type="textfield" placeholder="My reply ..." class="comment-form-reply"><button type="button" class="comment-form-reply-exit">Abort</button>
<br>
<button type="submit" class="comment-reply">Reply</button>
</form>
</div>
<br><br>
<div>
<div class="comment">This is comment '1'.</div>
<form action="/" method="post">
<input type="textfield" placeholder="My reply ..." class="comment-form-reply"><button type="button" class="comment-form-reply-exit">Abort</button>
<br>
<button type="submit" class="comment-reply">Reply</button>
</form>
</div>
<br><br>
<div>
<div class="comment">This is comment '2'.</div>
<form action="/" method="post">
<input type="textfield" placeholder="My reply ..." class="comment-form-reply"><button type="button" class="comment-form-reply-exit">Abort</button>
<br>
<button type="submit" class="comment-reply">Reply</button>
</form>
</div>
<br><br>
<div>
<div class="comment">This is comment '3'.</div>
<form action="/" method="post">
<input type="textfield" placeholder="My reply ..." class="comment-form-reply"><button type="button" class="comment-form-reply-exit">Abort</button>
<br>
<button type="submit" class="comment-reply">Reply</button>
</form>
</div>

Bootstrap jQuery - Issues with empty field validation

I've written some jQuery to validate my Bootstrap forms, however I'm having a few issues.
Firstly, I want a red outline to appear if the user clicks off the input field without typing anything in: JSFiddle example here. In this example I'm using the Bootstrap Validator plugin, however I want to imitate this effect without using the plugin.
Second, and linked to the issue I just mentioned, the green outline only appears once the user clicks the submit button, thus the user only sees it for half a second or so before they are redirected, making it a little pointless. Again, this would be solved by having an error/success outline appear once the user clicks off the input. If anyone could help me out it would be greatly appreciated.
This is the code I have so far:
HTML:
<form id="auth_form" action="action.php" method="post">
<div class="form-group has-feedback" name="auth_code" id="auth_code">
<label for="auth_code" class="control-label">
Authorisation Code</label>
<input class="form-control" id="auth_code_input" name="auth_code_input" type="password">
<span class="form-control-feedback glyphicon" id="iconBad"></span>
</div>
<div class="form-group">
<div>
<button class="btn btn-info" name="submit" type="submit" id="submit">Submit</button>
</div>
</div>
</form>
jQuery:
$(document).ready(function() {
$('#auth_form').on('submit', function(e) {
var auth_code = $('#auth_code_input').val()
if (auth_code=="") {
$('#auth_code').addClass('has-error');
$('#iconBad').removeClass('glyphicon-ok').addClass('glyphicon-remove');
e.preventDefault();
} else {
$('#auth_code').removeClass('has-error').addClass('has-success');
$('#iconBad').removeClass('glyphicon-remove').addClass('glyphicon-ok');
}
})
})
JSFiddle

Try this updated fiddle: jsfiddle.net/xqwsobmo/20/
Need to add input blur event and validate input
$(document).ready(function() {
$('#auth_code_input').blur(function(){
if(!ValidateInput()){
e.preventDefault();
}
});
$('#auth_form').on('submit', function(e) {
if(!ValidateInput()){
e.preventDefault();
}
})
});
function ValidateInput(){
var IsValid=false;
var auth_code = $('#auth_code_input').val()
if (auth_code=="") {
$('#auth_code').addClass('has-error');
$('#iconBad').removeClass('glyphicon-ok').addClass('glyphicon-remove');
IsValid=false;
} else {
$('#auth_code').removeClass('has-error').addClass('has-success');
$('#iconBad').removeClass('glyphicon-remove').addClass('glyphicon-ok');
IsValid=true;
}
return IsValid;
}

jQuery Popup submit not responding

I have created a popup which allows users to edit a value then they can submit it again
Html:
<body>
<input id="submit" type="submit" value="Submit" data-theme="b" data-icon="check" data-rel="popup"/>
<div id="success" data-role="popup">
</div>
<div id="fail" data-role="popup">
<p>Fail</p>
</div>
</body>
jQuery:
$('#submit').click(function(){
var doStuff = true;
if(doStuff === true){
$("#success").empty();
$("#success").append('<p> <input type="text" value="' + doStuff + '" /> <input type="submit" id="popupConfirm" value="Submit" /> </p>');
$("#success").popup("open");
}else{
$("#fail").popup("open");
}
});
$('#popupConfirm').click(function(){
console.log("jhasgd");
});
Currently the click is not working at all that's why I have gibberish in the console.log and also I am not sure how to get the value of the entered input.
So my question is first how can I get the submit click to work and then output what they wrote?
fiddle of the code

$(document).on('click', '#popupConfirm', function(){
console.log("jhasgd");
});

Where are you adding the jQuery code at? If you are adding it all above the HTML, it might be trying to bind the #submit input before it exists in the DOM. Can you try to wrap the code in a document ready so it won't do the click binding before the DOM gets filled up.
$( document ).ready(function()
{
$('#submit').click(function(){
console.log("clicked the button");
});
});
Edit: I just saw the comment where you figured this out above. You didn't really have a code solution provided, so I will just leave this as is.

Add a string of text into an input field when user clicks a button

Basically just trying to add text to an input field that already contains a value.. the trigger being a button..
Before we click button, form field would look like.. (user inputted some data)
[This is some text]
(Button)
After clicking button, field would look like.. (we add after clicking to the current value)
[This is some text after clicking]
(Button)
Trying to accomplish using javascript only..

Example for you to work from
HTML:
<input type="text" value="This is some text" id="text" style="width: 150px;" />
<br />
<input type="button" value="Click Me" id="button" />​
jQuery:
<script type="text/javascript">
$(function () {
$('#button').on('click', function () {
var text = $('#text');
text.val(text.val() + ' after clicking');
});
});
<script>
Javascript
<script type="text/javascript">
document.getElementById("button").addEventListener('click', function () {
var text = document.getElementById('text');
text.value += ' after clicking';
});
</script>
Working jQuery example: http://jsfiddle.net/geMtZ/
​

this will do it with just javascript - you can also put the function in a .js file and call it with onclick
//button
<div onclick="
document.forms['name_of_the_form']['name_of_the_input'].value += 'text you want to add to it'"
>button</div>

Here it is:
http://jsfiddle.net/tQyvp/
Here's the code if you don't like going to jsfiddle:
html
<input id="myinputfield" value="This is some text" type="button">​
Javascript:
$('body').on('click', '#myinputfield', function(){
var textField = $('#myinputfield');
textField.val(textField.val()+' after clicking')
});​

HTML
<form>
<input id="myinputfield" value="This is some text">
<br>
<button onclick="text()">Click me!</button>​
</form>
Javascript
const myinputfield = document.querySelector("#myinputfield");
function text() {
myinputfield.value = myinputfield.value + "after clicking";
}
I know this question is almost ten years old but this answer does not use jquery so it may be useful to others.
https://codepen.io/frog22222/full/oNdPdVB