I'm trying to put a script where you can clear the value on inputs and text-area by clicking on a button. I copied a script on the web that can clear my inputs it worked but how can I include textareas on it?
Here's the script:
$("#btnpost").click(function(){
var inp = $("input");
if(inp.val()) {
inp.val('');
}
});
<input type="email" class="form-control" id="inputEmail3" placeholder="Insert Title Here">
<textarea class="form-control " rows="5" placeholder="Insert Content Here"></textarea>
<button type="button" class="btn btn-primary" id="btnpost">
Post
$(document).ready(function(){
$("#btnpost").click(function(){
$('input ,textarea').each(function(){
if($(this).val() !=""){
$(this).val() = "";
}
});
});
});
you can simply do like this. assign id id="textArea" to textarea
$(document).ready(function(){
$("#btnpost").click(function(){
$("#inputEmail3").val("");
$("#textArea").val("");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="email" class="form-control" id="inputEmail3" placeholder="Insert Title Here">
<textarea id="textArea" class="form-control " rows="5" placeholder="Insert Content Here"></textarea>
<button type="button" class="btn btn-primary" id="btnpost">ClearMe</button>
Fiddle
If those elements are inside a form I'd recommend to use .reset()
$("#btnpost").on('click', function() {
$(this).closest('form').reset();
});
Just a preference, it seems 'cleaner' to me.
The simplest would be this one:
$("#btnpost").click(function(){
$("#inputEmail3, #textArea").val("");
});
I suggest you use html reset button. You only need to wrap all your elements inside a form element.
<form>
<input type="email" class="form-control" id="inputEmail3" placeholder="Insert Title Here">
<textarea class="form-control " rows="5" placeholder="Insert Content Here"></textarea>
<button type="reset" value="Reset">Reset</button>
</form>
link
Related
i'm trying to print user inputs to webpage comment section but don't know what do in place value ? It's like autofill comment section
<input id="fname" type="text" size="30" placeholder="Enter name" />
<input id="pageurl" placeholder="Paste here url" type="url" size="30" />
<button class="button1" onclick="eatFood();"> <b>Submit</b> </button>
<script type="text/javaScript">
function eatFood(){
var url =document.getElementById("pageurl").value;`
window.open(url ,"msgwindow")
document.getElementById(' ').value = " what_i_Do_here";
}</Script>
Hi "Sagg" Welcome to Stackoverflow
What i understood from your question you want auto filled valued from your input"Enter Name" So here is solution for that just you can achieve that , if this is not the case please define that what exactly you want Your question is too much ambiguous
<!DOCTYPE html>
<html>
<body>
<input id="fname" type="text" size="30" placeholder="Enter name" />
<br>
<button class="button1" onclick="eatFood();"> <b>Submit</b> </button>
<br><br>
<input id="fnameExample" type="text" size="30" placeholder="Examaple auto fill" />
<script>
function eatFood(){
var url =document.getElementById("fname").value;
document.getElementById('fnameExample').value = (url+' '+"auto filled On Submit");
}
</script>
</body>
</html>
I got this code, that live-update text in a div when user type in a text area.
I'm not sure how to edit it, so i can re-use it for several matching div/input.
Is it possible to use some kind of wildcard?
My working code:
<textarea id="input-address" name="address" rows="5" class="form-control">{{ Auth::user()->address }}</textarea>
<div id="output-address">{{ Auth::user()->address }}</div>
$(function() {
$source=$("#input-address");
$output=$("#output-address");
$source.keyup(function() {
$output.text($source.val());
});
});
I was thinking about something like this, but not sure how to handle it:
<input type="text" id="input-first_name" name="first_name" class="form-control" value="{{ Auth::user()->first_name }}" required>
<textarea id="input-address" name="address" rows="5" class="form-control">{{ Auth::user()->address }}</textarea>
<div id="output-first_name">{{ Auth::user()->first_name}}</div>
<div id="output-address">{{ Auth::user()->address }}</div>
<script type="text/javascript">
$(function() {
$source=$("#input-[name-match]");
$output=$("#output-[name-match]");
$source.keyup(function() {
$output.text($source.val());
});
});
</script>
Yes you could use it as you described above, but you should attach a common dynamic input event like :
$(function() {
//Attach 'input' event to all elements that have an 'id' start with 'input-'
$('[id^="input-"]').on('input', function(){
var source_name = $(this).attr('name');
//Change the element that have 'id' equal to 'output-source_name'
$('#output-'+source_name).text( $(this).val() );
});
});
Hope this helps.
$(function() {
$('.input').on('input', function(){
var source_name = $(this).attr('name');
$('#output-'+source_name).text( $(this).val() );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="first_name" class="form-control input" value="first_name from controller" required>
<br>
<textarea name="address" rows="5" class="form-control input">address from controller</textarea>
<div id="output-first_name">first_name from controller</div>
<div id="output-address">address from controller</div>
$(document).ready(function () {
$(":text").keyup(function () {
$("p").text($(":text").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form>
User Name: <br>
<input type="text" >
<input type="submit" value="Submit">
</form>
<br>
<p>
</p>
Hope this will help to solve your problem.
$('#input-address').keyup(function() {
var address= $('#input-address').val();
$('#output-address').html(address);
});
I am trying to pass values between boxes.
So, When a User types inside of the first text box:
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="submit" name="design1" id="butval" value="Choose Design"></input>
Then they click the 'choose design' button, and what they typed in, gets passed to another
input text box on the same page.
this is the second input box i want to pass it to.
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
Any help would be much appreciated
thank you
Live Demo
Instead of a submit type input use a button type input.
HTML
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="button" name="design1" id="butval" value="Choose Design"></input>
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
JS
window.onload = function(){
document.getElementById('butval').onclick = function(){
document.getElementById('billing_last_name').value = document.getElementById('valbox').value;
}
};
First add a clicklistener for the submit button and inside that callback pass the text through the elements
document.getElementById("butval").addEventListener("click", function(event){
var text = document.getElementById("valbox").value;
document.getElementById("billing_last_name").value = text;
event.preventDefault();
return false;
});
this is by far easiest in jquery given
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="submit" name="design1" id="butval" value="Choose Design"></input>
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
use a simple
$("#butval").click(function(event){
$("#billing_last_name").html("<p>"+$("#valbox").html()+"</p>");
event.preventDefault();
});
but better change type="submit" to type="button" then you can remove the essentially unnecessary line event.preventDefault();
So I have an input box, and when a user types something in it I want a second textarea change its value to match that of the input's, on click. How can I do this using javascript, jquery, or something simpler, or php...
Here's my code:
This is the first input:
<form class="form1" action=../search.php method="post">
<input class="askInput" type="text" name="q" value="Search for tags and users or ask a question" onclick="if(this.value == 'Search for tags and users or ask a question') this.value='';" onblur="if(this.value.length == 0) this.value='Search for tags and users or ask a question';"></input>
<input class="searchEnter" type="image" name="submit" src="../Images/askQuestion.png"></input></form>
This is the textarea:
<div id="askCenter">
<img class="close" src="../Images/closeAsk.png"></img>
<h1><img src="../Images/askQuestionTitle.png" alt="Ask this question"></img></h1>
<textarea></textarea>
<span class="holder"><input type="text" value="add tags" onclick="if(this.value == 'add tags') this.value='';" onblur="if(this.value.length == 0) this.value='add tags';"></input>
<span class="note">∗ Tags are separated by commas</span>
</span>
<input class="askAway" type="image" src="../Images/askAway.png" alt="Ask away"/>
Without seeing your mark-up, something like this would work, albeit it's not tailored to your needs:
$('#first').keypress(
function(e){
var string = $(this).val();
$('#textarea').val(string);
});
$('form').submit(
function(){
return false;
});
JS Fiddle demo.
With your updated question, with the html from your forms:
$('input:text[name="q"]').keypress(
function(e){
$('#askCenter').find('textarea').val($(this).val());
});
TRY IT HERE
HTML MARKUP
<input type="text" id="inputField"></textarea>
<textarea id="textArea"></textarea>
JQUERY
$(document).ready(function(){
$('#inputField').keyup(function() {
$('#textArea').val($(this).val());
});
});
<input type="text" id="txt1" onkeyup="document.getElementById('txt2').value=this.value;"/>
<input type="text" id="txt2" />
I'm trying to figure out how to copy a users text input in one form field to another. Specifically, when someone fills in their email address in the contact form, it will be duplicated in the mailing list form.
Both these forms are using ajax so there's no concerns about the input text being lost on submit.
This is the code I have:
<div id="contact_form">
<form name="contact" method="post" action="">
<input type="text" name="name" id="name" size="30" value="Name" class="text-input" />
<label class="error" for="name" id="name_error">Please enter your name.</label>
<br />
<input type="text" name="email" id="email" size="30" value="Email" class="text-input" />
<label class="error" for="email" id="email_error">I need your email.</label>
<br />
<textarea rows="10" cols="30" type="textarea" name="message" id="message" value="Message" class="text-input" ></textarea>
<label class="error" for="message" id="message_error">A message is required.</label>
<br />
<input type="submit" name="submit" class="button" id="submit" value="Send" />
</form>
</div>
<div id="details">
<p>some details here, not sure what yet</p>
</div>
<div id="mail_list">
<input type="text" id="mail" value="Your email" name="mail_list" /><input type="submit" name="submit" class="button" id="submit" value="Send" />
</div>
I found this in the Jquery documentation, but couldn't get it to work:
$("#email").optionCopyTo("#mail");
Thanks!
You said you want it in real time. I assume that means while the user is typing, the value should be replicated for each keystroke.
If that's right, try this:
var mail = document.getElementById("mail");
$("#email").keyup(function() {
mail.value = this.value;
});
Or if you want more jQuery:
var $mail = $("#mail");
$("#email").keyup(function() {
$mail.val( this.value );
});
This will update for each keyup event.
I'd probably add a redundant blur event in case there's an autocomplete in the field.
$("#email").blur(function() {
$mail.val( this.value );
});
Since all your fields have unique ids, this is quite straight forward:
$(function() { // <== Doc Ready
$("#email").change(function() { // When the email is changed
$('#mail').val(this.value); // copy it over to the mail
});
});
Try it out with this jsFiddle
.change()
.val()
Is $("#mail") another input box ? It doesn't appear in your HTML (Edit: well it does now, but didn't at first :)
$("#mail").val($("#email").val()) should do what you want.
use keyup and change both.
$("#boxx").on('keypress change', function(event) {
var data=$(this).val();
$("div").text(data);
});
here is the example
http://jsfiddle.net/6HmxM/785/
you can simply do this
$('#mail').text($('#email').val())