If say i am having a textbox input and a integer value A then how to check at time of typing the data itself that the value entered in textbox does not exceed A.
Textbox :
<input type="textbox" name="mynumber">
My script :
(According to answer by Felix)
<script type="text/javascript">
<%int n=(Integer)request.getAttribute("n");%>
var A=<%=n%>;
$('input[name^=txtDynamic_]').keyup(function () {
if (+this.value > A) {
$(this).next().html('Greater than Total shares');
flag=1;
}
else{
$(this).next().html('');
}
});
</script>
FORM :
<FORM METHOD=POST ACTION="stegnographyonshares" enctype="multipart/form-data">
<c:forEach var="i" begin="1" end="${myK}">
Enter The ${i} share number: <input type="text" name="txtDynamic_${i}" id="txtDynamic_${i}" /><span></span>
<br />
<br>
</br>
</c:forEach>
<br></br>
<INPUT TYPE="file" NAME="file" value="file">
<br></br>
<INPUT TYPE="submit" value="SAVE">
</form>
Whats problem in this ? the script code is not running and not printing the error message.Please help
You can use .keyup() event:
$('input[name=mynumber]').keyup(function() {
if(this.value.length > A) {
console.log('Toal characters exceed A')
}
});
Fiddle Demo
Based on your comment, you can do:
$('input[name=mynumber]').keyup(function() {
if(+this.value > A) {
console.log('Number exceed A');
}
});
Fiddle Demo
//length of text
var Count = 10;
//set id of your input mynumber
$("#mynumber").keyup(function(){
if($(this).val().length() > Count) {
$(this).val().subString(0,Count);
}
});
Do this:
var A = 10;
$('[name="mynumber"]').keyup(function () {
if (parseInt($(this).val(), 10) > A) {
alert("More than A");
} else {
alert("Less than A");
}
});
Demo
Can even be done using HTML5 output tag
<form oninput="x.value = parseInt(a.value) > 10 ? 'Greater than 10' : 'Less than 10' ">
<input type="range" id="a" value="">
<output name="x" for="a"></output>
</form>
Fiddle
Reference
Related
Fiddle.
I have a text field, I want to restrict showing negative values to this text field, if I got negative value then I dont want to display that value in the text box.But my ng-model should contain that negative value.
function LoginController($scope) {
$scope.number = -10;
$scope.number1 = -20;
$scope.number2 = -30;
}
<div ng-app ng-controller="LoginController">
<input ng-model="number"></input>
<input ng-model="number1"></input>
<input ng-model="number2"></input>
<input type="submit" ng-click="login()" value="Login"></input>
</div>
<html>
<body>
<input type="text" onkeypress="OnlyNumber(this);"></input>
</body>
<script>
function OnlyNumber(i)
{
if(i.value.length>0)
{
i.value = i.value.replace(/[^\d]+/g, '');
}
}
</script>
</html>
Use this javascript code.
I have used onkeypress javascript attribute
You can use ng-keyup angularjs directive
check here
function cleanInput(selector){
var elements = document.querySelectorAll(selector);
for(element in elements){
if(parseInt(element.value) < 0 ) {element.value = '';}
}
}
Provided that this is your HTML:
<div id="clean-div" ng-app ng-controller="LoginController">
<input ng-model="number"></input>
<input ng-model="number1"></input>
<input ng-model="number2"></input>
<input type="submit" ng-click="login()" value="Login"></input>
Then,
cleanInput('#clean-div input');
EDIT: Solution by using HTML, is only valid for newer browsers. If you don't care, go ahead with input type=number solution. Else JavaScript is needed.
//try using conditional expression like this.
function LoginController($scope) {
let num=-10
$scope.number = num<0?'':num;
}
No need to use javascript at all.
Convert
<input ng-model="number"></input>
to
<input type="number" min="0" ng-model="number"></input>
for every input tag you need.
P.S: This will not perform not-showing when onLoad and copy/paste is the action but issue a warning that the value is not eligible for the input.
<form action="" method="post">
<input type="number" id="numval" min="0" />
</form>
// Select your input element.
var number = document.getElementById('numval');
// Listener for input element.
number.onkeydown = function(e) {
if(!((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCode > 47 && e.keyCode < 58)
|| e.keyCode == 8)) {
return false;
}
}
95, < 106 corresponds to Numpad 0 through 9;
47, < 58 corresponds to 0 through 9 on the Number Row; and 8 is Backspace.
HTML :
<div ng-app ng-controller="LoginController">
<input ng-model="number" ng-change="onNumberChange('number')">
</input>
<input ng-model="number1" ng-change="onNumberChange('number1')">
</input>
<input ng-model="number2" ng-change="onNumberChange('number2')">
</input>
<input type="submit" ng-click="login()" value="Login"></input>
</div>
Controller :
function LoginController($scope) {
$scope.number = -10;
$scope.number1 = -20;
$scope.number2 = -30;
$scope.onNumberChange = function(valueName){
var number = parseInt($scope[valueName]);
if(number < 0){
$scope[valueName] = 0
}
}
}
I have pieced together a script that adds the values in text boxes and displays the sums in a span. I have tried a ton of things, but I can not get it to display the sums in a input textbox. Here is a fiddle that I have been working in ..
http://jsfiddle.net/elevationprint/MaK2k/17/
Basically I want to change the spans to input text boxes. If anyone can take a look and let me know what I am missing, I would appreciate it!
The code is this
HTML
Red<br>
12x12<input class="qty12" value="" /><br/>
12x24<input class="qty24" value="" /><br>
<br>
Blue<br>
12x12<input class="qty12" value="" /><br/>
12x24<input class="qty24" value="" /><br>
<br><br>
Total = <span class="qty12lable"></span> x $.95<br>
Total = <span class="qty24lable"></span> x $1.40<br>
SCRIPT
$('.qty12').keyup(function(){
var qty12Sum=0;
$('.qty12').each(function(){
if (this.value != "")
qty12Sum+=parseInt(this.value);
});
// alert('foo');
$(".qty12lable").text(qty12Sum);
//console.log(amountSum); });
$('.qty24').keyup(function(){
var qty24Sum=0;
$('.qty24').each(function(){
if (this.value != "")
qty24Sum+=parseInt(this.value);
});
// alert('foo');
$(".qty24lable").text(qty24Sum);
//console.log(amountSum); });
You can target the input fields like so:
Total = <input class="qty12lable" value=""> x $.95<br>
Total = <input class="qty24lable" value=""> x $1.40<br>
$("input.qty12lable").val(qty12Sum);
$("input.qty24lable").val(qty24Sum);
To set the text (value) of a textbox you have to use .val() not .text(). Like this:
$('.qty12').keyup(function() {
var qty12Sum = 0;
$('.qty12').each(function() {
if (this.value != "")
qty12Sum += parseInt(this.value);
});
$(".qty12lable").val(qty12Sum);
});
$('.qty24').keyup(function() {
var qty24Sum = 0;
$('.qty24').each(function() {
if (this.value != "")
qty24Sum += parseInt(this.value);
});
$(".qty24lable").val(qty24Sum);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Red
<br>12x12
<input class="qty12" value="" />
<br/>12x24
<input class="qty24" value="" />
<br>
<br>Blue
<br>12x12
<input class="qty12" value="" />
<br/>12x24
<input class="qty24" value="" />
<br>
<br>
<br>Total = <input class="qty12lable"/> x $.95
<br>Total = <input class="qty24lable"/> x $1.40
<br>
This snippet has some logic about how you can attach event listeners on input fields and how you can get their values. It's not perfect and has quite a few bugs from production level perspective but this will give a hint about how you can listen and manipulate DOM using Jquery. Which is what Jquery is all about.
$( "input" )
.change(function () {
var prevVal = ($('#total').html() !== '') ? $('#total').html() : 0;
if(parseInt($(this).val()) === NaN) {
return;
}
$('#total').html(parseInt($(this).val()) + parseInt(prevVal));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="1"></input><br>
<input type="text" id="2"></input><br>
<hr>
Total = <span id="total" class="qty12lable"></span> <br>
My form is loaded with different input fields like radio button , text field ,numeric field which are generated dynamically while iterating through a list.
<c:forEach var="Item" items="${listBean.nameList}" varStatus="status">
<input type="number"name="nameList<c:outvalue='[${status.index}]'/>.initialWeight" onchange="checkOnChange(this,'<c:out value='${Item.personId}'/>','<c:out value='${Item.minWeight}'/>','<c:out value='${Item.maxWeight}'/>','<c:out value='[${status.index}]'/>')">
<br><br>
<input type="number" name="nameList<c:out value='[${status.index}]'/>.finalWeight" onchange="checkOnChange(this,'<c:out value='${Item.personId}'/>','<c:out value='${Item.minWeight}'/>','<c:out value='${Item.maxWeight}'/>','<c:out value='[${status.index}]'/>')">
<br><br>
<input type="text" class="formtext" name="nameList<c:out value='[${status.index}]'/>.Reason" id ="reason<c:out value='[${status.index}]'/>" value="" maxlength="255" >
<br><br>
<input type="submit" value="submit" id="submit" />
</c:forEach>
The numeric fields will be validated against minimum and maximum values.if any of the numeric fields fails in the validation , submit button needs to be disabled .
JSFIDDLE
Any ways to achieve this using jquery or javascript?
Thanks for your valuable time and suggestions
Give IDs to your inputs and then use jQuery's .change() function.
Example:
HTML
<input id="test" type="number"/>
<input id="test2" type="number"/>
<input id="submit" type="submit" value="Submit"/>
JS
var testVal = $('#test'),
testVal2 = $('#test2'),
submit = $('#submit'),
minVal = 22,
maxVal = 33;
testVal.change(function() {
if((testVal.val() > maxVal || testVal.val() < minVal) ||
(testVal2.val() > maxVal || testVal.val() < minVal)) {
submit.prop('disabled', true);
} else {
submit.prop('disabled', false);
}
});
jsfiddle
So, you could do something like below.
var flag = true;
if (nameVal > maxVal) {
alert(id + ' Enter the reason before proceeding');
//var reason = nameList[index].Reason;
document.getElementbyId("reason" + index).focus();
flag = false;
}
if (itemVal < minVal) {
alert(id + ' Enter the reason before proceeding');
//var reason = nameList[index].Reason;
document.getElementbyId("reason" + index).focus();
flag = false;
}
document.getElementById("submit").disabled = !flag;
return flag;
I have an html form, and I want to only show the last section of the form if the value of all the other inputs is <= 500. Here is some simple html, mine is slightly more complicated, but it should be the same idea:
<div id="addSection">
<input type="text" id="retire" />
<input type="text" id="child" />
<input type="text" id="military" />
<input type="text" id="nurse" />
<input type="text" id="other" />
</div>
<div id="random" class="hidden">
<input type="text">
</div>
And here my jQuery that doesn't get close to working :)
$('#addSection :input').keyup(function(){
$('#addSection').each(function(){
var totalAmt = 0;
$(this).find('input').each(function(i,n){
totalAmt += parseInt($(n).val(), 10)
});
});
});
//if totalAmt <= 500 then $('#random').show();
Any ideas on how to get it to add as the user goes through the form? Thanks for the help, if you ahve any questions, I will answer quickly.
I'd suggest (on reviewing and subsequently rewriting my previous attempt):
$('#addSection').on('keyup', function(){
var total = $(this).children().map(function(){
return parseInt(this.value,10) || 0;
}).get().reduce(
function(a, b){
return parseInt(a,10) + parseInt(b,10);
});
$('#random').toggle(total <= 500);
}).trigger('keyup');
JS Fiddle demo.
References:
Plain JavaScript:
Array.prototype.reduce().
parseInt().
jQuery:
children().
get().
on().
toggle().
This should do the trick:
$('#addSection :input').keyup(function(){
var totalAmt = 0
$('#addSection :input').each(function(){
totalAmt += parseInt($(this).val(), 10) || 0
});
$('#random').toggle(totalAmt <= 500);
});
Live example: http://jsfiddle.net/ZL3q4/2/
Try this:
<div id="addSection">
<input type="text" id="retire" />
<input type="text" id="child" />
<input type="text" id="military" />
<input type="text" id="nurse" />
<input type="text" id="other" />
</div>
<div id="random" style="display: none;">
<input type="text">
</div>
$('#addSection :input').keyup(function () {
var totalAmt = 0;
$('#addSection :input').each(function (i, n) {
if (parseInt($(n).val(), 10)) totalAmt += parseInt($(n).val(), 10);
});
if (totalAmt > 500) $("#random").show();
else $("#random").hide();
});
<label class="user-reg-label fl">Percentage:<span class="required">*</span></label>
<input class="user-reg-input fl" type="text" name="Percentage[]" id="Percentage1" value="" maxlength="5" />
this is my html code.
i need to validate this input field with javascript to enter only 5 values like 99.99
This is formatting, not validating, but it seems to be what the OP is really looking for ( I think ).
var input = document.getElementById("Percentage1"),
onlyNumbers = input.value.replace(/\D/g,""), // Remove all nondigits
cleanNumbers = onlyNumbers.substr( 0, 4 ); // Limit to four digits
// Add decimal if more than two digits in length
if( cleanNumbers.length > 2 )
{
cleanNumbers = cleanNumbers.substr( 0, 2 ) + "." + cleanNumbers.substr( 2 );
}
input.value = cleanNumbers;
Using Jquery something like the below works.
Textbox
<input class="user-reg-input fl" type="text" name="Percentage[]" id="Percentage1" value="" onpaste="return false"
onkeypress="if(event.keyCode<48 || event.keyCode>57)event.returnValue=false;" maxlength="6" />
Jquery
$(document).ready(function ()
{
$('#Percentage1').keyup(function (event)
{
var currentValue = $(this).val();
var length = currentValue.length;
if (length == 2)
{
$(this).val(currentValue + ".");
}
else if (length == 5)
{
$(this).val(currentValue + "%");
}
});
});
This works for your basic requirements however there are a few things that need to be improved. If a user tries to delete multiple numbers it doesn't work or if they try to use the backspace key
You can use keyup or keypress function for this
<input onkeyup="myFunction()" class="user-reg-input fl" type="text" name="Percentage[]" id="Percentage1" value="" maxlength="6" />
function myFunction()
{
var input = document.getElementById("Percentage1");
if( input.value.length > 6 )
{
alert( "too many characters" );
return false;
}
}
UPDATED:
<input type="text" id='text_field' onkeyup="check()"/>
<script>
function check()
{
var len=document.getElementById('text_field').value.length;
if (len==2)
document.getElementById('text_field').value=document.getElementById('text_field').value+".";
if (len==5)
document.getElementById('text_field').value=document.getElementById('text_field').value+"%";
}
</script>
Okay then there is a text field where only if you put "99.99%" type pattern it will validate
<script type="text/javascript">
function fnc(){
pattern=/\d+[.]+\d+[%]/g;
text=document.getElementById("atext").value;
x=pattern.test(text);
alert(x);
}
</script>
<input type="text" maxlength="6" id="atext">
<input type="button" onClick="fnc()" value="click me">
Try this one,
With Script portion
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#test').blur(function() {
if ($(this).val().match('(^100(\.0{1,2})?$)|(^([1-9]([0-9])?|0)(\.[0-9]{1,2})?$)')) {
alert("Percentage Matched");//Any thing which you want
}
else
alert("Not Valid Input");
});
});
</script>
And Code for Textbox
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="test" runat="server"></asp:TextBox>
</div>
</form>