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" />
Related
I am using Ajax to submit forms in serial. I am trying to make the first s_referee_email + s_referee_fname pair required while the second or others not - there will be up to five of these pairs. I cant seem to figure how to make just the first pair required without breaking the form. I have tried using HTML5 and some answers from stack but havent been able to get anything to work. Any advice is greatly appreciated!
fiddle: https://jsfiddle.net/badsmell/gcrvqbna/
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!--serial submit ajax-->
<script>
function mySubmit(){
var myForms = $("form");
myForms.each(function(index) {
var form = myForms.eq(index);
var serializedForm = form.serialize();
serializedForm += '&s_referer_fname='+$('#s_refererFname').val();
$.post("http://post.aspx", serializedForm, function (data, status) {
if (status === "success"){
window.location.href= "http://redirect";
}
});
});
}
</script>
<title>Forward a copy to a friend</title>
<style type="text/css">
*[class=hide] {
display: none
}
</style>
</head>
<body>
<!--hidden iframe-->
<iframe class="hide" id="myIframe"></iframe>
<form method="post" action="post.aspx" target="myIFrame">
<input type="hidden" name="s_referer_email" value="test#test.com" />
<input type="text" size="30" maxlength="255" name="s_referee_email" value="" required >
<input type="text" size="22" maxlength="50" name="s_referee_fname" value="" required >
</form>
<form method="post" action="post.aspx" target="myIFrame">
<input type="hidden" name="s_referer_email" value="test#test.com" />
<input type="text" size="30" maxlength="255" name="s_referee_email" value="" >
<input type="text" size="22" maxlength="50" name="s_referee_fname" value="" >
</form>
<label for="s_referer_fname">Your name:</label> <br /> <input type="text" name="s_referer_fname" value="" size="20" id="s_refererFname" ><br>
<p><button onclick="mySubmit();">Submit</button> </p>
</body>
</html>
Adding required="required" to the tags can let you make any field compulsory to be filled by user.
You should never use .onclick(), or similar attributes from a userscript.
Userscripts operate in a sandbox, and onclick operates in the target-page scope and cannot see any functions your script creates.
Always use addEventListener() (or an equivalent library function, like jQuery .on()).
So instead of code like:
something.outerHTML += '<input onclick="func()" id="button_id" ...>'
You would use:
something.outerHTML += '<input id="button_id" ...>'
document.getElementById ("button_id").addEventListener ("click", func, false);
And for your answer, one method is to perform a check before actually submitting the forms. Check if the required fields have been filled, if yes, go ahead and submit the form, or else don't submit and show an error message instead.
In my web application I have edit profile page. In editprofile page their is many fields like
Name : <input type="text" name="name"/>
Location : <input type="text" class="geolocation" name="location">
Birthdata : <input type="date" name="dob">
Profile Picture : <input type="file" name="photo"/>
I want to send back the data of only the fields which are edited and not all the fields.
I'd normally do something like this on the backend.... but for your requirement you could remove the inputs that haven't changed. When you generate the html you can define an extra data attribute. Here's how I would do that:
HTML:
<form id="myform">
<input type="text" id="Name" data-initial="Foo" value="Foo" />
<input type="text" id="Location" data-initial="Bar" value="Bar" />
<input type="submit" value="Submit" />
</form>
JS:
$("#myform").submit( function() {
$(this).find("input").filter( function() {
$this = $(this);
return $this.data("initial") == $this.val();
}).remove();
});
http://jsfiddle.net/uLe7T/
I added an alert in the fiddle so you can see that they are removed before the form is submitted
jsFiddle
HTML
<input id="test" type="text" value="Some Text" data-value="Some Text">
JS
$('#test').blur(function() {
el = $(this);
if (el.val() != el.attr('data-value')) {
console.log('Edited');
} else {
console.log('Not Edited');
}
});
I've created a form using Google Docs which sends data to a google spreadsheet. I've taken the html code and reformatted it to my css/style and it works perfectly. It also displays a custom thankyou page and the only problem I'm facing is that it doesn't validate the data.
So, I'm thinking of disabling the submit button if the user hasn't entered anything in the required fields. Or, you could suggest a way to prevent blank form submission?
Currently My form has 2 text fields, and 4 checkboxes. I require both the text fields, but not the checkboxes. The text fields are currently populated/cleared with html/script:
value="Your Email or Phone No."
onfocus="if (this.value=='Your Email or Phone No.') this.value='';"
I require my form to disable the submit button if no data has been entered.
Here's my full code:
<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='thankyou.htm';}"></iframe>
<form action="Google_Form_ID_Here_(removed-for-stackoverflow-post)" method="POST" target="hidden_iframe" onsubmit="submitted=true;">
<ol style="padding-left: 0">
<div dir="ltr"><label for="entry_145">Name
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
</label>
<input type="text" name="entry.145" value="Enter Full Name" id="entry_145" dir="auto" aria-required="true" onfocus="if (this.value=='Enter Full Name') this.value='';">
</div>
<div dir="ltr" ><label for="entry_624">Contact Info
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
</label>
<input type="text" name="entry.624" value="Your Email or Phone No." id="entry_624" dir="auto" aria-required="true" onfocus="if (this.value=='Your Email or Phone No.') this.value='';">
</div>
<div align="center">
<div dir="ltr"><label for="entry_755"><br>Checkboxes
</div><br>
<div dir="ltr">Check which of the functions you'll be attending.</label><br><br>
<table align="center" width="248" height="128" border="0">
<span>
<tr>
<td align="center"><input id="group_418_1" name="entry.418" type="checkbox" value="Event 1"/>
<label class="vis_hide">Event 1</label></td>
<td align="center"><input id="group_418_2" name="entry.418" type="checkbox" value="Event 2"/>
<label class="vis_hide">Event 2</label></td>
<td align="center"><input id="group_418_3" name="entry.418" type="checkbox" value="Event 3"/>
<label class="vis_hide">Event 3</label></td>
<td align="center"><input id="group_418_4" name="entry.418" type="checkbox" value="Event 4"/>
<label class="vis_hide">Event 4</label></td>
</tr>
</span>
</table>
<input type="hidden" name="draftResponse" value="[]">
<input type="hidden" name="pageHistory" value="0">
<div dir="ltr">
<input type="submit" name="submit" value="Confirm" class="sbutton">
</div></ol></form>
Please can someone provide help regarding this? Or a suggestion for alternative to prevent blank submissions or provide a link to the solution? Can this be done with some jquery script too?
Thanks for any help.
EDIT:
I tried this script but that didn't help too...
<script>
$(function () {
// give the <form> the ID "myform" (or whatever you want) before using this code!
var form = $("#myform");
var input1 = $("#entry_145"); //for name
var input2 = $("#entry_624"); //for contact
form.addEventListener("submit", function (evt) {
if (input1.val() == "" || input2.val() == "") {
evt.preventDefault();
}
}, false);
});
</script>
Use it or leave it ,Dirty code
<script src="http://code.jquery.com/jquery-1.10.1.min.js" ></script>
<input type="text" class="req" id="name" />
<input type="text" class="req" id="post" />
<input type="submit" class="btn" id="button" onClick='alert("hi");' disabled/>
<script>
$(function (){
$('.req').change(function(){
if ($('#name').val() == '' || $('#post').val() == '')
{
$('#button').attr('disabled',true);
}
else
{
$('#button').attr('disabled',false);
}
});
});
</script>
There are two ways for client-side "validation":
Use JavaScript and add a submit event listener to your <form> tag.
Add the required attributes to your text boxes:
<input type="text" required="required" />
But these won't prevent users with an old browser (when using second option) or computer savvy people who just send the form manually.
You have to perform server-side validation, too!
Try this for the change event listeners:
$(function () {
// give the <form> the ID "myform" (or whatever you want) before using this code!
var form = $("#myform");
var input1 = $("#my-input1-name");
var input2 = $("#my-input2-name");
form.submit(function (evt) {
if (input1.val() == "" || input2.val() == "") {
evt.preventDefault();
}
});
});
The problem: I have a page with many <input> fields (just say all are text fields)
I would like to have a button, when click on it, all input fields will become plaintext only.
e.g. <input type="text" value="123" /> becomes 123
and if I click on another button, the text will change back to
e.g. 123 becomes <input type="text" value="123" />
Is there an automatic way to scan for all the <input>s and change them all at once using javascript and jquery.
Thank you!
Edited
Seems you guys are getting the wrong idea.
Read what I have written again: e.g. <input type="text" value="123" /> becomes 123
I have value="123" already, why would I want to set the value again???
What I want is e.g.
<body><input type="text" value="123" /><input type="text" value="456" /></body> becomes <body>123456</body> and later <body>123456</body> back to <body><input type="text" value="123" /><input type="text" value="456" /></body>
Use this to go one way,
$('input').replaceWith(function(){
return $('<div />').text(this.value).addClass('plain-text');
});
and this to go the other.
$('.plain-text').replaceWith(function(){
return $('<input />').val($(this).text());
});
Check this link http://jsfiddle.net/Evmkf/2/
HTML:
<div id='divInput'>
<input type="text" value='123' />
<br/>
<input type="text" value='456' />
<br/>
<input type="text" value='789' />
</div>
<div id='plainText' style='display:none'></div>
<div>
<input type="button" id='btnPlain' value='Make It Plain' />
<input type="button" id='btnInput' value='Make It Text' />
</div>
Javascript:
$("#btnPlain").bind('click',function(){
$("#plainText").html('');
$("#divInput input[type=text]").each(function(index){
$("#plainText").append('<span>'+$(this).val()+'</span>');
$("#divInput").hide();
$("#plainText").show();
});
});
$("#btnInput").bind('click',function(){
$("#divInput").html('');
$("#plainText span").each(function(index){
$("#divInput").append('<input type="text" value="'+$(this).text()+'"/><br/>');
$("#plainText").hide();
$("#divInput").show();
});
});
Try this FIDDLE
$(function() {
var arr = [];
$('#btn').on('click', function() {
var $text = $('#inp input[type="text"]');
if( $text.length > 0){
$text.each(function(i) {
arr[i] = this.value;
});
$('#inp').html(arr.join());
}
else{
if(arr.length <= 0){
}
else{ // Add Inputs here
var html = '';
$.each(arr, function(i){
html += '<input type="text" value="' + arr[i]+ '"/>'
});
$('#inp').html(html);
}
}
});
});
You need to create a hidden element for each input, then use jquery to hide the input, show the hidden element and give it the inputs value.
<input type="text" value="123" id="input_1" />
<div id="div_1" style="display:none;"></div>
$("#div_1").html($("input_1").val());
$("#input_1").hide();
$("#div_1").show();
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())