I want to get a value of text box when it's value chenaged. I am using onchange function to get the value of text box when it changed.Here it's give a result but not changed value.It give's a value of the text box before changed value.How can get changed value.
Here is my script:
function myFunction(id)
{
var id=id;
var quantity = document.getElementById("quantity").value;
alert(quantity);
}
My onchange function:
<input type="text" value="<?php echo $res['quantity']; ?>" name="qty" id="quantity" onChange="myFunction(<?php echo $res['id']; ?>);"/>
Thanks in advance.
For <input> tag you have oninput event, not onchange. Your Javascript should look like this:
document.querySelector('#quantity').addEventListener('input', myFunction);
function myFunction() {
// 'this' refers to the input, because you appended listener to it
console.log(this.value); //to avoid alert spam...
}
Functions gets hoisted so you can use them before they are declared, in case you were wondering.
Another way to add listener (but beware, you can replace or override it if you perform assignment again:
document.querySelector('#quantity').oninput = myFunction;
And your HTML would look like this:
<input type='text' id='quantity' name='qty' value="<?php echo $res['quantity']; ?>">
Use OnKeyUp or blur Event so once you enter text and switch to something from that text box you will get that text use alert to have a check:
<input type="text" onBlur="check(this.value);" />
Function check(id) {
alert(id);
}
hope it will help...
Related
I'm echoing rows of $data inside input boxes. The javascript function below copies the input value to the clipboard upon clicking the input box. The problem is the function only works for the first input box and not subsequent echoed ones. I think I need to assign a unique id to each input box and I'm not sure how to do this.
// for each row it is echoing the following:
echo '<input id="copy-text" type="text" value="'.$data.'" size="50">';
<script>
document.getElementById("copy-text").onclick = function() {
this.select();
document.execCommand('copy');
}
</script>
ID should always be unique. When you have multiple IDs with same value javascript looks for the first match with that id and skips the rest.
If you are looping through each row, use an index like this
echo '<input id="copy-text_'.$i'" type="text" value="'.$data.'" size="50" onclick="copy($i)">';
<script>
function copy(index) {
var elem = document.getElementById("copy-text_" + index);
elem.select();
document.execCommand('copy');
}
</script>
Give the elements a class:
echo '<input class="copy-text" type="text" value="'.$data.'" size="50">';
And have a single script tag that finds all those elements and binds the event handler to them:
function handler() {
this.select();
document.execCommand('copy');
}
Array.from(document.querySelectorAll('.copy-text'))
.forEach(function(element) {
element.addEventListener(handler);
});
I have a textbox the value load from PHP Here is the code
<input type="text" id="fName" value="<?php echo $row['fName']; ?>" disabled/>
<input type="button" value="Edit" onclick="changeValue('fName')" />
my Javascript
function changeValue(id){
var value = "test";
document.getElementById(id).value = value;
}
As soon as I click the function, the value change for a few second and go back to default one from database. Can anyone help me
After clicking on the button, the page will reload so that the value of the database will be restored.
Please change
<input type="button" value="Edit" onclick="changeValue('fName')" />
to
<input type="button" value="Edit" onclick="changeValue('fName'); return false;" />
to avoid submitting the form.
For more information, please have a look at this: What's the effect of adding 'return false' to a click event listener?
If you click on elements like links (a element) or buttons (input[type="button"] or button) page will be redirect. So at the end of onClick action you must write return false to force say to the browser I don't want to redirect this page after click!
For example:
function changeValue(id){
var value = "test";
document.getElementById(id).value = value;
return false;
}
How can i change the PHP value in textbox through Javascript
An alternative to using document.getElementById(id).value would be:
function changeValue(id){
var value = "test";
document.getElementById(id).setAttribute("value", value);
}
How to use event onchange on this case javascript ?
First fill data into input id="one" , And then data in input id="two" will change data like data in input id="one"
But , when data in input id="two" change , Why not call fn_2 function (why not alert) ?
http://jsfiddle.net/A4wxX/111/
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
function fn_1()
{
var aaa = document.getElementById('one').value;
document.getElementById("two").value = aaa;
}
</script>
<script>
function fn_2()
{
var bbb = document.getElementById('two').value;
alert(bbb);
}
</script>
<input type="text" id="one" onchange="fn_1()"/>
<input type="text" id="two" onchange="fn_2()" style="display: none"/>
What you wanted is that on change of value of first input box, get this value and set it for second input box and give alert.
In this case onchange event will not get fired. For this you need to manualy call the onchange event of the second input box.
<script>
function fn_1() {
var aaa = document.getElementById('one').value;
var second_input_elem = document.getElementById("two");
second_input_elem.value = aaa;
second_input_elem.onchange();
}
Try this fiddle http://jsfiddle.net/u09Lurvr/
Its working perfectly.
<script>
function fn_2()
{
var bbb = document.getElementById('two').value;
document.getElementById("one").value = bbb;
}
</script>
onchange does work, try clicking outside of the input box once you enter a new value...
But you probably want the value to update instantly... Using JavaScript's oninput you can accomplish this.
document.getElementById("one").onchange=function(){
document.getElementById("result_one").innerHTML = this.value;
}
document.getElementById("two").oninput=function(){
document.getElementById("result_two").innerHTML = this.value;
}
The element result_one updates whenever the status of the element changes. So focused or blurred... While the result_two element updates whenever there is new input.
Here is a JSFiddle example.
Edit: It appears I misread or misunderstood the question, but it still works regardless.
Edit 2: It seems I misunderstood the question once again...
Why is there no alert?
If you're expecting an alert when you put a value into input one and the changing value of input two, you're looking at it wrong... The onchange function is triggered when the status of an element changes (and for inputs, when the value changes + when the status changes). The onchange function is not triggered when the value itself changes... And for the reason in your example, the alert is not being fired because the status isn't changing, only the value.
But why are you doing this? You're basically creating two inputs, input two just has a value from input one... And you're binding an event on an element where you're creating the value dynamically. It just seems kinda messy... A better alternative would be to just fire the alert in input one's function...
<script type="text/javascript">
function fn_1() {
var aaa = document.getElementById('one').value;
document.getElementById("two").value = aaa;
var bbb = document.getElementById('two').value;
alert(bbb);
}
document.getElementById("one").onchange=fn_1;
</script>
<input type="text" id="one"/>
<input type="text" id="two" style="display: none"/>
onchange event will work when some text is changed in the text field and it becomes off focus.
Hope you want this that way. We are seeing, it is working in that way.
If you want a more automatic way, you can use onkeyup for id="one" field and onkeypress for id="two" field but it should be made visible in that case
e.g.
//no need to include jQuery library when you are not using it
<script type="text/javascript">
function fn_1()
{
var aaa = document.getElementById('one').value;
document.getElementById("two").value = aaa;
}
function fn_2()
{
var bbb = document.getElementById('two').value;
alert(bbb);
}
</script>
<input type="text" id="one" onkeyup="fn_1()" />
<input type="text" id="two" onkeypress="fn_2()" />
Since you have made 2nd field invisible in your example, you will never get an alert as how someone will try onchange event for it? Could you let us know how the data will be handled in 2nd field? Will data be filled into it via some JavaScript event (and thus you want onchange event) or directly by putting cursor into it and changing? If so, then it's already working.
using onchange is useful for select element, in your case it would be better if you use 'onblur':
<script>
function fn_1()
{
var aaa = document.getElementById('one').value;
document.getElementById("two").value = aaa;
fn_2();
}
function fn_2()
{
var bbb = document.getElementById('two').value;
alert(bbb);
}
</script>
<input type="text" id="one" onblur="fn_1()"/>
<input type="text" id="two" onblur="fn_2()" style="display: none"/>
Hi I am trying to install a merchant facility onto my website and it needs to submit a value $vpc_Amount which is the amount purchased in cents.
What I need to do is multiply the amount entered by the user ($amount) by 100 to get $vpc_Amount.
I tried the following but it isn't working.
<input type="text" ID="A1" name="amount"onkeypress="process1()">
<input type="hidden" id="A2" name="vpc_Amount">
And then the javascript
function process1() {
f1 = document.getElementById("A1").value;
total = f1*1000;
document.getElementById("A2").value = total;
}
What is happening is it is occasionally working but most of the time it doesn't. I know there is something wrong with the script so hence asking here.
Try to use onkeyup function -
<input type="text" id="A1" name="amount" value="" onkeyup="process1();" />
<input type="hidden" id="A2" name="vpc_Amount" />
javascript function -
function process1() {
var f1 = document.getElementById("A1").value;
var total = (f1 * 100);
document.getElementById("A2").value = total;
}
Use Jquery. http://jquery.com/
$(function() {
$('#form_id').submit(function(){
$('#form_id').find('#A2').val('New value');
return true;
});
});
Have you tried to use onkeyup event? It might be so that onkeypress event is triggered before the character is added to text field.
<input type="text" ID="A1" name="amount" onkeyup="process1()">
Also, I would suggest that you try to convert the value of the textfield to integer and add other input handling too. Users might enter any kind of data there and it can crash your javascript code.
This code should work:
document
.getElementById('A1')
.addEventListener('keyup', function (e) {
document.getElementById('A2').value = parseInt(this.value) * 1000;
})
keypress event triggers before value changes in text field and keyup after value has changed.
Basically event trigger in order:
keydown (onkeydown)
keypress (onkeypress)
keyup (onkeyup)
Force value to be integer or you will get NaN in some cases.
I will suggest to use onblur this is the best way if you want to use the build in attribute listener if you don't use jquery. Here is example:
<!DOCTYPE html>
<html>
<body>
Enter your name: <input type="text" id="fname" onblur="myFunction()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
And url to the example in w3 school :) http://www.w3schools.com/jsref/event_onblur.asp
First of all, I think you should use onkeypup event and not onkeypress
<input type="text" id="A1" name="amount" onkeyup="process1()" value="" />
<input type="hidden" id="A2" name="vpc_Amount" value="" />
Javascript code -
function process1() {
var f1 = parseFloat(document.getElementById("A1").value);
var total = f1*100; //you said 100 so, I changed to 100
document.getElementById("A2").value = total;
}
jQuery code for the same -
jQuery(document).ready(function($){
$("#A1").keyup(function(){
var total = parseFloat($("#A1").val()) * 100;
$("#A2").val(total);
});
});
Your code can be simplified by making use of the fact that form controls are available as named properties of the form baed on their name. This removes the requirement to add IDs to form controls that must have a name anyway.
Pass a reference to the control in the listener:
<input type="text" name="amount" onkeyup="process1(this)">
<input type="hidden" name="vpc_Amount">
Then use the passed reference to get the form and other controls:
function process1(element) {
element.form.vpc_Amount.value = element.value * 100;
}
You may wish to use the change event instead to save updating the hidden field unnecessarily while the user is typing and also to catch changes that aren't based on key presses (e.g. pasting from the context menu).
You should also do some validation of the values entered so the user doesn't attempt to send the form with invalid values (noting that you must also do validation at the server as client side validation is helpful but utterly unreliable).
my requirement is to save the entire "html" inside a div, but when i load an "html" with text fields to a div and then editing the value of the text box, the newly set value doesn't reflect in the core "html". I tried to inspect the value with fire bug and it remains the same or no value at all.With "jquery" i tried to set attribute but no attribute name value is created. how can i set the value of text fields and then get that "html" with the newly set value.
here is my html
<div class="sub_input_box">
<input type="text" / class="boreder_line">
<input type="text" id="txt" value=""/>
<input type="hidden" id="hid" />
<div class="clear"></div>
</div>
and the jquery i used to set attribute
$("#txt").attr("value", "some value");
Chances are you're calling your jQuery code before the HTML input part. You can either place the jQuery stuff below it, or if you don't want to, you can do something like this:
$(document).ready(function(){
$("#txt").attr("value", "some value");
});
That will only run when the page is fully loaded.
However, it's unclear if you're using AJAX to load those inputs into your DOM. If so, you need to call $("#txt").attr("value", "some value"); in the onSuccess callback function which is fired after the AJAX successfully responds.
You can try something like this:-
<input name="example" type="text" id="example"
size="50" value="MyDefaultText" onfocus="if(this.value=='MyDefaultText')this.value=''"
onblur="if(this.value=='')this.value='MyDefaultText'" />
Have you tried:
$("#txt").val("Hello World!");
For setting the text value, and,
var my_string = $("#txt").val();
For getting the text value.
Let me know if it works.
Excellent question. You would think clone would do this on its own, alas, it doesn't.
Here is a sample than you can hopefully adapt to do what you need
HTML
<div id=divToCopy>
<input name=i1 value=foo><br>
<input name=i2 value=bar>
</div>
<input type=button onclick=copyDiv(); value='Copy the div'>
<div id=newDiv>
the copy will go here
</div>
JavaScript
function copyDiv() {
$('#newDiv').html($('#divToCopy').clone());
$('#divToCopy :input').each(function() {
var child=0;
for (var i = 0; i < this.attributes.length; i++) {
var attrib = this.attributes[i];
var prop=$(this).prop(attrib.name);
$($('#newDiv').find(' :input')[child]).prop(attrib.name,prop);
child++;
}
});
}
But it does work: http://jsbin.com/eXEROtU/1/edit
var html = '<input type="text" id="txt" value=""/>';
$(document).ready(function() {
$("#load").click(function() {
$("#sub_input_box").html(html);
});
$("#inspect").click(function() {
alert($("#txt").val());
});
});
$(document).on('focusout','input[type="text"]',function(a){
console.log(a.target.value);
a.target.setAttribute("value",a.target.value);
});
this is the solution i found, i had to set the value attribute explicitly on loose focus from the text field