change textfield with every keyup - javascript

I'm trying to fill three fields with the same text but I'm only writing into the first one. This code is only working once and then it isn't (the alert is working fine constantly).
$( 'textarea[name="posting"]' ).on( "keyup", function() {
var text = $('textarea[name="posting"]').val();
$('textarea[name="posting_twitter"]').replaceWith(text);
alert(text)
});

See the working jsfiddle:
JS:
$('#first').on('keyup', function() {
$('#second').val($(this).val());
});
HTML:
<input id="first" type="text">
<input id="second" type="text">
All you need to do is use jQuery's .val() method, which can both set and get the value of an input element. Read the documentation.

Try this:
$( 'textarea[name="posting"]' ).on( "keyup", function() {
var text = $('textarea[name="posting"]').val();
$('textarea[name="posting_twitter"]').val(text);
alert(text);
});

Text area value can be replaced with val()
$('textarea[name="posting_twitter"]').val(text)

like this?
html
<textarea name = "posting"></textarea>
<textarea name = "posting_twitter"></textarea>
jquery
$('textarea[name="posting"]').on("keyup", function(){
var text = $(this).val();
$('textarea[name="posting_twitter"]').val(text);
});

Related

Select Text in Input On Focus Bootstrap 3

I have 4 fields for API keys (test and live, secret and public) all with the class of .key
I'm trying to get a select of the input value on focus of the input.
The input looks like so:
<input
type="text"
name="live_public_key"
class="form-control text-center key"
value="API key here"
readonly>
I've searched all over and the common answer to this seems to be something similar to this:
<script>
$(document).on('focus', '.key', function() {
this.select();
});
</script>
But this doesn't work.
It selects the text for a milli-second the deselects it and seems to move the focus back to the input itself.
I don't know if this is a bootstrap thing or if I've coded something wrong.
The field is geting unselected on mouseup. Try this:
$(document).on('focus', '.key', function() {
this.select();
}).on('mouseup', '.key', function(e) {
e.preventDefault();
});
JSFiddle
Use a workaround:
<script>
$(document).on('focus', '.key', function() {
var that = this;
window.setTimeout (function(){
that.select();
}, 100);
});
</script>

Keyup event fires on document load

jsfiddle
http://jsfiddle.net/m3g6rjok/1/
html
<textarea id="feedback" rows="4" cols="50" name="comment" maxlength="50">Enter text here...</textarea>
<br>
<input type="text" value="10" id="lenbox"></input>
js
$(document).ready(function(){
$( "#feedback" )
.keyup(function() {
var value = $( this ).val();
alert(value)
$( "#lenbox" ).val( value );
})
.keyup();
})
I need to calculate the number of words thats entered on the textarea and need to display it on the text box below..I'm using the keyup event to check but it gets triggered even on the page load. How can I fix it
Remove the .keyup(); from your code. This triggers the keyup event on page load.
The keyup event is raised because you trigger one. Remove the .keyup() after your handler function declaration:
$("#feedback").keyup(function() {
var value = $(this).val();
alert(value)
$("#lenbox").val(value);
})
Because you have .keyup(); at the end of your JQuery statement.
Just remove it
You should not trigger the keyUp again. Also, you should move the code that's updating the value outside of the keyUp function, so you can also trigger the code on page load. After you've done that, it's just taking a string, split on spaces and count the words:
var calculateCount = function() {
var value = $('#feedback').val();
var count = value.split(" ").length;
$( "#lenbox" ).val( count );
};
$(document).ready(function(){
$("#feedback").keyup(calculateCount);
calculateCount();
})
http://jsfiddle.net/qd6aznwa/
DEMO
First, Remove .keyup() as has been pointed out already
Then, use input instead of keyup so that I can also catch pasted text.
Finally, count the number of words by using the split method and the length property.
$(document).ready(function(){
$( "#feedback" ).on('input',function() {
$( "#lenbox" ).val( this.value.split(' ').length );
});
});
If you dont mind using HTML5 use the placeholder property
<textarea id="feedback" rows="4" cols="50" name="comment" maxlength="50" placeholder="Enter text here..."></textarea>

Get text value in jquery?

I have my markup like this
<div class="text-input-area">
<input type="text" id="text-input"/> <br />
<input id="button" type="submit" value="Preview" />
</div><!--.text-input-area-->
In the input area I will type only text. Now when I will click on button Preview it should show the text that I had type. For that I have made my jquery like this
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#button').click(function() {
var textvalue = $( "#text-input").text();
alert('textvalue');
});
});
</script>
But its not working at all. Can someone tell me how to do this?
demo http://jsfiddle.net/gmeEL/
API:
.val() : http://api.jquery.com/val/
Hope this will fit the cause :)
code
jQuery(document).ready(function() {
jQuery('#button').click(function() {
var textvalue = $( "#text-input").val();
alert(textvalue);
});
});
Use $( "#text-input").val() instead of $( "#text-input").text() and alert(textvalue) instead of alert('textvalue')
Complete Code:
jQuery(document).ready(function() {
jQuery('#button').click(function() {
var textvalue = $( "#text-input").val();
alert(textvalue);
});
});
Fiddle Demo
Two problems
need to use .val() to get the value of an input field
need to use the variable textvalue for the alert not a string literal 'textvalue'
Try
jQuery(function ($) {
$('#button').click(function () {
var textvalue = $("#text-input").val();
alert(textvalue);
});
});
for inputs and select use $(selector).val()
for span use $(selector).text()
It should be a val() i.e. a jquery function that returns a value of the element
var textvalue = $( "#text-input").val();
Please note that
The .text() method cannot be used on form inputs or scripts. To set or
get the text value of input or textarea elements, use the .val()
method. To get the value of a script element, use the .html() method.
http://api.jquery.com/text/

how to copy a value from input to another selector

If i change the next input:
<input type="text" value="100000" name="value1" id="value1">
The value should also change in:
<span class="value2">100000</span>
i tried with this, but not working:
(function ($) {
var $change = $(".value2");
$("#value1").keyup(function () {
$change.val(this.value);
});
})(jQuery);
Use .text
$change.text( this.value );
Span does not support .val method
It only works on form elements.
Check Fiddle
spans don't have a value - only input elements do. Use .text(this.value) instead:
(function($) {
var $change = $(".value2");
$("#value1").keyup(function() {
$change.text(this.value);
});
})(jQuery);
$change.val( this.value );
Should be:
$change.text( this.value );
Since <span> doesn't have a .val()

replacing a smallcaps to allcaps text

I'm having trouble to convert all lower case to upper case in a text box:
<body>
<input type="text" id="input_1" class="allcaps"/>
<input type="text" id="input_2" class="allcaps"/>
</body>
$(document).ready(function () {
//trigger ng event
$('.alcaps').live("keyup", function () {
var fin = $('.alcaps').val();
$('.alcaps').val(fin.toUpperCase());
});
});
The first input box transforms its contents to capitals, but the text I put in the first box is also copied to the second input...
When using the class as selector you're selecting all input boxes with that class and setting the value to the same as the first one. Use the this keyword to target only the current textbox :
$(document).ready(function() {
$(document).on('keyup', '.alcaps', function() {
var fin = this.value;
this.value = fin.toUpperCase();
});
});​
FIDDLE
You can use this which refers to your current input, also note than live is deprecated, you can use on instead:
$(document).on("keyup", ".alcaps", function () {
this.value = this.value.toUpperCase()
});
User this inside the handler:
$('.alcaps').live("keyup", function () {
var fin = $(this).val();
$(this).val(fin.toUpperCase());
});

Categories