how to copy a value from input to another selector - javascript

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

Related

change textfield with every keyup

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

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/

Jquery Show Input Text Based On Input Value

I facing problem with my jquery, on showing input text based on input value.
Here is the JS fiddle demo :
http://jsfiddle.net/Ltapp/364/
When I try to input #hotmail, the input box will show. But when I want to type some text in the #hotm input box, it will hide again.
JS code :
$(window).load(function(){
var myString = '#hotmail';
$('#hotm').hide();
$("input").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});
});
It's because your selector $("input") affects both input elements. I have updated it to the $("input:first") selector instead. JsFiddle here
$("input:first").keyup(function () {
var value = $(this).val();
if(value.match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});
As many has said, you are binding the event on all the inputs I did a little change:
$(function(){
var myString = /#hotmail/ig;
$("#check").bind('keyup checkvalue', function() {
$('#hotm')[myString.test(this.value) ? 'show' : 'hide']();
}).trigger('checkvalue');
});
using regex if you are using #HoTmAil it will also hit on that, and also added a custom event checkvalue to see if #hotm should be visible on for example a postback on the form you might be using.
demo: http://jsfiddle.net/voigtan/xjwvT/1/
You're affecting all inputs. Either give each one a unique ID / Class or use the jQuery $(this) method.
See JSFiddle Here:
http://jsfiddle.net/Ltapp/366/
<input type="text" id="firstinput"/>
<p id="secondinput"><input type="text"/></p>
var myString = '#hotmail';
$('#secondinput').hide();
$("#firstinput").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#secondinput').show();
} else {
$('#secondinput').hide();
}
});
use this for your if part :
if($(this).val().match($(this).val().substr(0,strlen($(this).val())))
it's because the new box also = "input"; if you give the hotmail textbox it's own id, it won't hide
<input id="hotmail" type="text"/>
and then
$("#hotmail").keyup(function () {...});

jQuery .val() not setting the value of <select>

I would like to know why jQuery's .val() function is not setting the value of the <select> control for me after I called replaceWith, but it is working otherwise.
Please see here for a (not) working example.
<select><option>ABC</option><option>DEF</option></select>
<input type="button" onclick="ControlOff()" value="Turn Off Control" />
<input type="button" onclick="ControlOn()" value="Turn On Control" />
<input type="button" onclick="Test()" value="Value Setting Test" />
function ControlOff() {
$('select').each(function () {
$(this).replaceWith('<span class="select-type">' + $(this).val() + '</span>');
});
}
function ControlOn() {
$('.select-type').each(function () {
var selected = $(this).text();
$(this).replaceWith('<select><option>ABC</option><option>DEF</option></select>');
$(this).val(selected);
});
}
function Test() {
$('select').val('DEF');
}
The problem is, that $(this) in $(this).val(selected) refers to the removed <span> element, not your new element. You need to replace it with:
$('select').val(selected);
to grab the previously inserted new element.
Also, your code is unecessarily complex, this does the same thing, but simpler:
function ControlOn() {
$selectText = $('.select-type');
var selected = $selectText.text();
$selectText.replaceWith('<select><option>ABC</option><option>DEF</option></select>');
$('select').val(selected); // Use an id instead to match: #my-select-id
}
Make sure to give the <select> element an ID, otherwise it's going to mess up once you introduce a new <select> element somewhere else on the page.
See here for a working example.
The problem is that in ControlOn you have an each which is looping over .select-type elements which are span's and spans cannot be set with the val method:
You can fix this by changing the method to this:
function ControlOn() {
$('.select-type').each(function () {
var selected = $(this).text();
var $select = $('<select><option>ABC</option><option>DEF</option></select>');
$(this).replaceWith($select)
$select.val(selected);
});
}
Live example: http://jsfiddle.net/qSYYc/4/
set value of options will solve your problem. jsfiddle
<select><option value='ABC'>ABC</option><option value="DEF">DEF</option></select>
function ControlOn() {
$('.select-type').each(function () {
var selected = $(this).text();
$(this).replaceWith($('<select><option>ABC</option><option>DEF</option></select>').val(selected));
});
}
Rewrite your code like above, it would work!
The element referenced by this won't change to the select element you just created, it will always be the span element inside the scope of that function. Therefore you should set the value to the newly created select instead of the invariant $(this)!
I'd suggest you to use "disabled" attribute to turn select on and off, it, won't mess up the .val() functionality
function ControlOff() {
$("select").attr("disabled", "disabled");
}
function ControlOn() {
$("select").removeAttr("disabled");
}

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