Javascript get data-validate value from input - javascript

I want to use a value from the data-validate in some javascript, how can i pick up the minAllowed
<input type="number" name="qty" id="qty" maxlength="12" value="0.5" title="Aantal" class="input-text qty" data-validate="{"required-number":true,"validate-item-quantity":{"minAllowed":0.5,"maxAllowed":10000}}" />
I can get the value like this, is there some way to do the same with minAllowed?
var currentVal = parseInt($(this).parents('form').find('input[name="qty"]').val());

Yes, you can take the value of that attribute by using the data method:
const validate = $('input').data('validate');
const minAllowed = validate['validate-item-quantity'].minAllowed;
console.log(minAllowed);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number"
name="qty"
id="qty"
maxlength="12"
value="0.5"
title="Aantal"
class="input-text qty"
data-validate="{"required-number":true,"validate-item-quantity":{"minAllowed":0.5,"maxAllowed":10000}}" />

try this:
let validate = $("#qty").data("validate"); // get the value "data-validate"
let minAllowed = validate['validate-item-quantity'].minAllowed; // because the value is json, so you can just call it
console.log(minAllowed);

Try This
var minValue = parseInt(document.getElementById("qty").min)

Related

How to set value of input without locking user input

I have multiple inputs and i want to display result in input and change it freely.
When i type 5 in first input it should display 5 in the second. But how to change the value of second input and display it in the first? I want to be able to constantly change the values.
function calc(){
var val1 = document.getElementById("val1");
let val2 = document.getElementById("value2");
val2.value = 2;
}
<html>
<head>
</head>
<body>
<input id="value1" type="number" value="" oninput="calc()">
<input id="value2" type="number" value="" oninput="calc()">
</body>
</html>
You can pass an additional parameter to your function and change the values as per the parameters.
function calc(num){
var val1 = document.getElementById("value1");
let val2 = document.getElementById("value2");
num ? val1.value = val2.value : val2.value = val1.value;
}
<input id="value1" type="number" value="" oninput="calc(0)">
<input id="value2" type="number" value="" oninput="calc(1)">
I have replaced the if else condition with a ternary operator. I hope that you are familiar with it.
<html>
<head>
</head>
<body>
<input id="value1" type="number" value="" oninput="document.getElementById('value2').value =this.value">
<input id="value2" type="number" value="" oninput="document.getElementById('value1').value =this.value">
</body>
</html>
Use like this

sum between one form to another form [duplicate]

This question already has answers here:
Number input. HTML
(3 answers)
Closed 3 years ago.
i make the sum between one form to another form and the number entered has a comma. I want to make an alert that cannot be input by letters. how can i do this?
input code
<input id="weight" class="form-control form-control-sm" type="text" name="weight" onkeyup="sum();" required />
<input id="runner" class="form-control form-control-sm" type="text" name="runner" onkeyup="sum();" required />
<input id="gross" class="form-control form-control-sm" type="text" name="gross" value="0" readonly />
this is my script
function sum() {
var txtFirstNumberValue = document.getElementById('weight').value;
var txtSecondNumberValue = document.getElementById('runner').value;
var result = parseFloat(txtFirstNumberValue) + parseFloat(txtSecondNumberValue);
if (!isNaN(result)) {
document.getElementById('gross').value = result;
}
}
Supposing that you are using modern web browser you will only need to do this:
<input id="weight" class="form-control form-control-sm" type="number" name="weight" onkeyup="sum();" required />
type="number" is sufficient.

Change html numeric min and max with javascript

changeI have two numeric inputs and would like to limit the max or min of the second one based on the changes of the first one. So....
<input id="input1" type="number" min="0" max="10" value="5" change="OnChangeNumeric()" >
<input id="input2" type="number" min="0" max="10" value="1" >
<script>
function OnChangeNumeric() {
//how to actually change the values is where i am stuck
$('#input2').max = 5;
}
</script>
how to actually change the values is where i am stuck
Thanks for your suggestions
$(function() {
$('#input1').on('change',function() {
var thisVal = this.value;
/*calculate newMin, and newMax for #input2 according to your rules
based on thisVal ........
$('#input2').attr('min', newMin).attr('max', newMax);*/
console.log( $('#input2')[0] );
});
});
No need for inline JS:
<input id="input1" type="number" min="0" max="10" value="5"/>
<input id="input2" type="number" min="0" max="10" value="1"/>
JS FIDDLE DEMO

How to change the max value for input type number on HTML5 with Javascript?

I need change the max attribute of an input element with JavaScript. For example:
<input type="number" name="miname" min="0" max="MyVar" value="0"/>
You can assign an id to your input :
<input id="myInput" type="number" name="miname" min="0" max="MyVar" value="0"/>
then access it via javascript:
var input = document.getElementById("myInput");
input.setAttribute("max",100); // set a new value;
Note you can also access it directly if your input is in a form
document.formName.miname.setAttribute("max",newValue);
sharing the angular way of doing it. Use [attr.max].
<input matInput type="number" min="0" [attr.max]="totalOrders" placeholder="Total Skybridge Orders" formControlName="totalSkybridge" (change)="onTotalSkybridgeOrders($event)"

Can not pass html array to JS

Hi I'm having trouble sending html form array to JS. I have dynamic html form and some fields:
<div id="fields">
<input type="text" name="ppav[]" id="p" />
<input type="text" name="quantity[]" id="q" size="3" />
<input type="text" name="price[]" id="pr" size="10" />
<input type="text" name="sum" id="su" size="10" disabled="disabled"/>
<br />
</div>
in JS i tried using this function but getting undefined alert instead of result:
var welements = document.getElementsByName('ppav[]');
for (var i = 0, j = welements.length; i < j; i++) {
var an_element = welements[i];
alert(an_element.selectedIndex);
}
What did you expect? the selectedIndex property returns the index of the selected option in a select element. If you want the value of your input fields, try alert(an_element.value);

Categories

Resources