I am trying to store the value of an input into a variable. For now, I want to just paste the input value into a span element so I can know that it works. However I cannot get it work in my JSFIDDLE. Any suggestions?
HTML:
<label>Advertising Budget:</label>
<input id="advertising" onchange="updateAdvertising(this.value)"> </input>
<span id="test">xxx</span>
Javascript:
function updateAdvertising(adv){
document.getElementById('test').innerText = adv;
}
JSFIDDLE: http://jsfiddle.net/6J4MN/
innerHTML is more compatible, also change fiddle to head instead of onload
Here is a neater solution
Live Demo
window.onload=function() {
document.getElementById("advertising").onchange=function(){
document.getElementById('test').innerHTML = this.value;
}
}
Since onchange needs a blur to trigger, use onkeyup for immediate change:
Live Demo
window.onload=function() {
document.getElementById("advertising").onkeyup=function(){
document.getElementById('test').innerHTML = this.value;
}
}
Note the "OnChange" event for the text box will fire once you hit enter or leave the text box. If you change the event to, say keyup, it will update the span after every letter you type.
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
function addEvent(element, evnt, funct){
if (element.attachEvent)
return element.attachEvent('on'+evnt, funct);
else
return element.addEventListener(evnt, funct, false);
};
addEvent(document.getElementById('advertising')
, 'change'
, function () { updateAdvertising(this.value); }
);
var updateAdvertising = function(adv){
document.getElementById('test').innerText = adv;
};
};
</script>
Related
How to call javascript function when value in textarea was change ?
When fill data into textarea id="yyyy", textarea id="xxxx" will change value too. This function are work good.
When textarea id="xxxx" change value, i want to call function check2 , how can i do ?
please do not change code in function check and id="yyyy"
https://jsfiddle.net/9b6h897d/3/
<textarea id="yyyy" onkeyup="check(this.value)"></textarea>
<textarea id="xxxx" onchange="check2(this.value)" ></textarea>
<script>
function check(value){
document.getElementById("xxxx").value = value;
}
function check2(value){
alert(value);
}
</script>
The standard events for <textarea> are keypress, keydown, or keyup. To do what you want you'll have to trigger the onchange in one of the functions. This makes most sense inside the first function called check.
document.getElementById("textarea2").addEventListener("change", function(event) {
console.log("Textarea two was changed.");
});
function check(element) {
var textarea2 = document.getElementById("textarea2"),
event = new Event('change');
textarea2.value = element.value;
textarea2.dispatchEvent(event);
};
<textarea id="textarea1" onkeyup="check(this);"></textarea>
<textarea id="textarea2" onkeyup="check(this);"></textarea>
Updated fiddle : https://jsfiddle.net/9b6h897d/6/
When you change the value in check call the check2 method like :
function check(value){
document.getElementById("xxxx").value = value;
check2(value).
}
i think it's better to use oninput if you want to track the user changes.
if you don't want to change the content of check() you have to call the both function in the oninput :
<textarea id="yyyy" oninput="check(this.value);check2(this.value)"></textarea>
New fiddle : https://jsfiddle.net/9b6h897d/9/
Hope this will help you.
Create just one function that both use, within the function check to see what textarea called the function and then write your separate code for each.
This is just sudo code that I'm writing off my phone, so it may have minor errors you need to fix.
var userEdit = true;
function(ta) {
if (ta.Id == 'xxx')
{
// Do code for xxx text area
userEdit = false;
// update yyy via code
userEdit = true;
} else if (ta.Id == 'yyy' && userEdit) {
// Do code for yyy text area change only when a user edits it
} else if (ta.Id == 'yyy' && !userEdit) {
// Do code for yyy text area change only when your code edits it
}
}
You could also use onblur instead of onchange, onblur gets called when a user changes the focus out of a object. Like after they type in a input and then tab or click into another input or button it will get fired.
HTML
<input id="testinput" type="text"></input>
JS
$('#testinput').change(function (){
change();
});
function change(){
alert();
}
$('#testinput').val('new val');
Link
By typing in input and losing focus it works, but if a change of the input field is triggered by jquery, it does not work.
$('#testinput').val('new val').trigger('change'); not required.
From MDN (bolded by me):
The change event is fired for input, select, and textarea
elements when a change to the element's value is committed by the
user. Unlike the input event, the change event is not necessarily
fired for each change to an element's value.
You will need to manually trigger the change event if you are changing the value programmatically.
I suppose if you are hellbent on not manually firing the change event, you could override jQuery's val ($.fn.val) method to do it for you:
var originalVal = $.fn.val;
$.fn.val = function() {
if(arguments.length) {
originalVal.apply(this, arguments);
this.trigger('change');
return this;
}
return originalVal.call(this);
}
http://jsfiddle.net/ybj1zjhk/4/
will fire the alert whenever you type something
$('#testinput').keyup(function (){
change();
});
function change(){
alert();
}
$('#testinput').val('new val');
Or you can trigger the change event whenever you do something that requires you to have the change event fire https://jsfiddle.net/owoemcg2/
$('#testinput').change(function (){
change();
});
function change(){
alert();
}
$("#mybutton").click(function(){
$('#testinput').val('new val');
$("#testinput").trigger("change");
});
<table>
<tbody id="add_weight" >
<tr></tr>
</tbody>
</table>
<a onClick="maira()" >+Add more Weights.</span></a>
here i am having a anchor tag..i have called a function when user clicks on anchor tag..that is
<script type="text/javascript">
var b=1;
function maira()
{
if(b==10)
{
alert("can't Add more than 10 Weight Rates");
return false;
}
var table=document.getElementById("add_weight")
var row=table.insertRow(b);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
cell1.innerHTML="<input type='text' id='rate"+b+"' name='rate"+b+"' onkeyup='alert(hi)'/>";
cell2.innerHTML="<input type='text' id='flat"+b+"' name='flat"+b+"' />";
b=b+1;
}
</script>
here when a user clicks a new row gets added with two fields namely rate and flat....this is working fine now the problem is that...i want when user enters anything in flat textbox than it should come simultaneously in rate textbox...probably using onkeyup even...can anyone help me with this??
You can use a class to attach event handler or attach handlers individually.
But you'll have to use data- attribute to store the index of the row, so that the handler can know the index and the "id" of the target element in which you want to copy the text
Attach event handler to your class/id. You can go with any libraries or below utility code would work fine. You are attaching the element to onkeyup event.
function addEvent(element, evnt, funct){
if (element.attachEvent)
return element.attachEvent('on'+evnt, funct);
else
return element.addEventListener(evnt, funct, false);
}
// example
addEvent(
document.getElementById('myElement'),
'keyup',
function () { alert('hi!'); } // update your other text field value.
);
Here is a working fiddle for you.
http://jsfiddle.net/bmArj/
I have a text input that is updated as a result of a button event. I would like to detect when the value in the text input has changed. See the example below:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#text').bind("input change paste", function(){
console.log("text changed");
// do something
});
$('#click').click (function(){
$('#text').val('something');
});
});
</script>
<body>
<input id='text' type='text'>
<input id='click' type='button' value='click'>
</body>
Later on, that button will trigger a calender so the user select a date/time which will update the text input. Since the calender is part of a library we I don't want to change it. I would like to detect when the text field gets a new value.
thanks!
I think what you're referring to is
$("#text").on("change", function(){});
take a look at this post
Since the date/time picker library you are using doesn't raise any sort of change or input event, the only way to reliable tell if the value has changed is to watch with a timer and raise the change event yourself. The following is one way to do this:
// check for changes every 100 ms
setInterval(function() {
var lastVal = $('#text').data('last-value');
if (typeof lastVal === 'undefined') {
lastVal = $('#text').val();
$('#text').data('last-value', lastVal);
}
if (lastVal !== $('#text').val()) {
$('#text').change(); // trigger the change event
}
}, 100);
// setup your change handler
$('#text').on("input change paste", function() {
// before doing anything else, set the last-value data property
$('#text').data('last-value', $('#text').val());
// do something ...
console.log('changed!');
});
// now programmitically updating the $('#text') element will result
// in your change handler being triggered
$('#click').click (function(){
$('#text').val('something');
});
It is possible to check if a input was not changed using change() event?
I'm working with <input type='file' /> and i want to warning the user that no changes was made on his own action.
Right now, i just made a normal change() event:
// fire the thumbnail (img preview)
$("#file-input").on("change", function () {
readURL(this); // create the thumbnail
});
what i'm missing ?
Prev Solutuib:
well, i found a workaround for this, the real problem is that i give a option to the user to hide the thumbnail, and if he wants, open again...
but the thumbnail will only open when the user select a image, that's the problem, because the change event fire this option to open, so, if no change, no thumbnail open.
so, when i hide the thumbnail, i change the input file for a new one, making the change event always fire.
Use a variable to store the last value of the input, and compare to the current value on change event, if they are the same, no change was made :
var last_value = $("#file-input").val();
$("#file-input").on("change", function () {
if (this.value === last_value) alert('no change');
last_value=this.value;
});
EDIT: Or you can always just replace the input tag with another, like this SO answer suggest :
var $c = $("#container");
var $f1 = $("#container .f1");
function FChange() {
alert("f1 changed");
$(this).remove();
$("<input type='file' class='f1' />").change(FChange).appendTo($c);
}
$f1.change(FChange);
<input type="file" id="file-input" data-url="intial-value" />
$("#file-input").on("change", function () {
if($(this).val() != $(this).data('url'){
//value has changed
$(this).data('url', $(this).val())
}
else{
return false;
}
});
$("#file-input").on("change", function () {
if($(this).data('last-val')){
// do something
} else {
$(this).data('last-val',$(this).val());
//do something else
}
});