Develop Reference

input type number - max value

I have an input
<input type="number" max="100">
However, if the user write manually for example 200, the input accept it. Is it something normal ?
I can validate the entry with javascript but if there is a build in in the html input it would be great :)
Thanks

There is actually no "native" HTML way outside a form post to avoid the faulty manual entry. You could do something like this (here jquery code):
$('input[type="number"]').on('change input keyup paste', function () {
if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
});
This code applies to all inputs of type number in case of keyboard input, pasting, changing a validation method that checks, whether a max value exists and if so Math.min() returns the lowest-valued number passed into it. If the value is not a number 0 is returned.
See a demo at JSFiddle
In Vanilla JavaScript the handler would look like this:
var numElement = document.querySelector('input[type="number"]')
numElement.addEventListener('change', validateMax);
numElement.addEventListener('input', validateMax);
numElement.addEventListener('keyup', validateMax);
numElement.addEventListener('paste', validateMax);
function validateMax() {
if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
}
See a demo of the vanilla version at JSFiddle
This handler should do the trick.

I don't think there is a solution directly with HTML; the max and min attributes only work when clicking the up arrow and down arrow keys. Check out the post in the references section for more information. The image below shows that the input does not change when the up arrow button is clicked, since the max attribute is 100:
In the solution below, when the input event of the <input> element is triggered, the data input is checked by checking the max attribute with the isValid() method. You can change the disabled property of the submit button according to the result returned by the isValid() method.
const inputElement = document.querySelector('input');
function isValid(value){
if(parseInt(value) <= inputElement.getAttribute('max'))
return true;
return false;
}
inputElement.addEventListener('input', function () {
if(isValid(this.value))
console.log("true");
else
console.log("false");
});
<input type="number" max="100">
References
How can I limit possible inputs in a HTML5 "number" element?

If you are using form, you can just mark it as required and the form does the validation for you.
document.getElementById("myForm").addEventListener("submit", function (event) {
event.preventDefault();
console.log(document.getElementById("myNumber").value);
});
<form id="myForm">
<input id="myNumber" name="myNumber" type="number" max="100" required >
<button>Send It</button>
</form>
Now if you want to know if it is valid in JavaScript directly there is built in methods for that
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault();
console.log(document.getElementById("myNumber").value);
});
document.getElementById("check").addEventListener("click", function(event) {
console.log("form: ", document.getElementById("myForm").checkValidity());
console.log("input: ", document.getElementById("myNumber").validity.valid);
});
<form id="myForm">
<input id="myNumber" name="myNumber" type="number" max="100" required>
<button>Send It</button>
</form>
<button type="button" id="check">Check It</button>

Check when an input text change value

How i can detect when an input value change when i'm filling the input with the path of imagen getting from filemanager.
I dont even know how it's called when the input is getting filled that way. (After select the image, automatically the input get the path as value)
I already tried this:
$('#my-input').on('change', function() {
alert("You changed the value of the input");
})
$('#my-input').on('input', function() { alert('some text') })
But this only works when user get interaction with the input i mean on keyup, keydown, etc.
Is that possible to do?
Thanks and sorry for the bad english.

If I understand correctly, you want to do this
document.getElementById('my-element').onchange();
after you fill the value via code as opposed to user entering a value.
Example here
document.getElementById('my-button').onclick = fillInput;
document.getElementById('my-input').onchange = inputChanged;
function fillInput(){
document.getElementById('my-input').value = "Test value";
document.getElementById('my-input').onchange();
}
function inputChanged(){
document.getElementById('my-input').style.border = "1px solid green";
}
<input id="my-input" type="text" />
<input id="my-button" type="button" value="Fill Input" />

Javascript run onChange not onLoad

I have a very simple piece of Javascript that works perfectly onLoad, but I need it to work onChange.
My script;
<form action="" method="post" name="product_search">
<p><strong>Existing Part Number:</strong>
<input name="v_prodref" type="text" id="v_prodref" size="25" maxlength="25" onChange="searchValue()">
<input type="text" name="prodref" id="prodref">
<input type="submit" name="search_Submit" id="search_Submit" value="Submit">
</p>
<div>
<%=(rs_ProductCheck.Fields.Item("prodref").Value)%>
// <%=(rs_ProductCheck.Fields.Item("proddesc").Value)%></div>
<script>
function searchValue() {
var add = "NW";
var c_ProdRef = document.getElementById('v_prodref');
if(c_ProdRef.search(/GST/i) == -1) {
n_ProdRef = c_ProdRef.concat(add) }
else {
n_ProdRef = c_ProdRef.replace(/GST/i,"NWGST") }
document.getElementById("prodref").value = n_ProdRef;
}
</script>
</form>
So, I enter a part number in the first text box, and I want my javascript to run and enter the new value in the second text box, but it doesn't seem to work.
What am I missing?

search does not exist on an HTMLInputElement. You need to use c_ProdRef.value.search.
(Actually, since you're using it in many places as a string, and never as an input, you probably intended to define c_ProdRef as var document.getElementById('v_prodref').value)
You would've seen this error on load as well.

you want onkeyup if it works perfectly onLoad, and you want to start typing in something in textbox 1 and the javascript to run, you dont want onchange
onchange triggers after blur of focused element
onkeyup triggers after you release a keyboard input

Thanks to everyone for their help. After a little tweaking I have managed to get my code working.
function myFunction() {
var add = "NW";
var c_ProdRef = document.getElementById('v_prodref').value;
if (c_ProdRef.search(/GST/i) == -1) {
n_ProdRef = c_ProdRef.concat(add)
} else {
n_ProdRef = c_ProdRef.replace(/GST/i, "NWGST")
}
document.getElementById("prodref").value = n_ProdRef;
}
Along with #indubitablee suggestion of onKeyup and specifying the .value of my first text field it all works.

How to use event onchange on this case javascript?

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"/>

Javascript change hidden field on submit

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