I am making a Web application that validates passkeys and displays some values there are four passkeys for a file to be entered Validate it, I am entering the passkeys just like we enter the Credit Card Number in the Payment gateway. In my present application I have enter one Passkey then have to press Tab or using the Mouse I have to select the Next Textbox to enter next Passkey, How do I Make the mouse Cursor to Jump automatically from one Textbox to Another Textbox after its maximum value filled like in Payment gateways
You can do pure javascript like this:
<script type="text/javascript">
function ValidatePassKey(tb) {
if (tb.TextLength >= 4)
document.getElementById(tb.id + 1).focus();
}
}
</script>
<input id="1" type="text" onchange="ValidatePassKey(this)" maxlength="4">
<input id="2" type="text" onchange="ValidatePassKey(this)" maxlength="4">
<input id="3" type="text" onchange="ValidatePassKey(this)" maxlength="4">
<input id="4" type="text" maxlength="4">
In my present application I have enter one Passkey then have to press Tab or using the Mouse I have to select the Next Textbox to enter next Passkey
Don't do that. Just use the Control.Focus() method.
When in HTML, you can use jQuery's focus():
$("#textbox").focus();
You can use JavaScript's Onchange Event (or JQuery may be) on the Textbox which calls a method, where You can check the value of the Textbox if it equals the Maximum value , then setFocus on the next Textbox.
Use the TextBox.Focus() method on the next TextBox.
Use the first TextBox's TextBox.TextChanged event to test if focus should be changed and to call the Focus method on the next TextBox.
you can create a directive also to get the position move
directive 1
directive 2
<script type="text/javascript">
$(document).ready(function(){
$("#1").keyup(function(){
var text_lenght = $('#1').val().length;
if (text_lenght == 3) {
$('#2').focus();
}
});
$("#2").keyup(function(){
var text_lenght = $('#2').val().length;
if (text_lenght == 3) {
$('#3').focus();
}
});
});
</script>
<input id="1" type="text" class="form-control" name="phone1" maxlength="3" >
<input id="2" type="text" class="form-control" name="phone2" maxlength="3" >
<input id="3" type="text" class="form-control" name="phone3" maxlength="4">
Related
I have a landing page with two forms, only one form visible at a tme. The first form is an age-verification form and if the conditions are met I use jQuery .toggle() to switch to the next form. On page load, for good UX I am using .focus() to put the cursor in the first form field with this line of code: $("input[name='month']").focus();
// Focus cursor on first input field
$("input[name='month']").focus();
var age = 19;
// After calculating age based on user input, toggle the elements
if (age >= 18) {
$('#age-verification').toggle();
$('#subscribe').toggle();
} else {
$('#age-verification').html('<h2>Sorry, you must be at least 18 years old.</h2>');
}
<div id="age-verification">
<h2>Must be 18, please verify age</h2>
<input type="number" name="month" />
<input type="number" name="day" />
<input type="number" name="year" />
<button id="age-gate-submit">Submit</button>
</div>
<form id="subscribe" action="#" method="post">
<input type="text" name="email" />
<input type="text" name="zip" />
<button id ="subscribe" type="submit">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
How can I use either .select(), focus() or other method to place the cursor in the first field of the second form <input type="text" name="email" /> after the .toggle() event? I've tried placing a .focus() event direct after the .toggle() which seemed logical but not successful.
You need to first hide the subscribe form:
$('#subscribe').hide();
Working demo: http://jsbin.com/kihepujewi/edit?html,js,output
I am trying to convert text first text field value entered in inr to cad but i am unable to do so,
suppose for example:
if the text entered in first field is 1000 the it should display 20 in text field two
i have tried something like this
<label>Price</label>
<input id="price_inr" name="price_inr" type="text" class="validate" required placeholder="Price in INR" />
<input id="price_cad" name="price_cad" type="text" class="validate" required readonly="readonly" placeholder="Price in CAD" />
<!-- Script coverts INR to CAD -->
<script>
$('#price_inr').change(function() {
$('#price_cad').val($(this).val());
});
$("#price_cad").on("change", function() {
$(this).val(function(index, value) {
return value.replace(price_cad.value, price_cad.value/50);
});
});
</script>
Works fine using jquery 1.11.
The second part $("#price_cad").on("change", function() will not work because of the "readonly" attribute.
Changing it and editing will allow change back and forth
$('#price_inr').change(function() {
$('#price_cad').val($(this).val());
});
$("#price_cad").change(function() {
$('#price_inr').val($(this).val()/50);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>Price</label>
<input id="price_inr" name="price_inr" type="text" class="validate" required placeholder="Price in INR" />
<input id="price_cad" name="price_cad" type="text" class="validate" required placeholder="Price in CAD" />
There is no need to use two change events, you can do this in one step.
$('#price_inr').change(function () {
$('#price_cad').val($(this).val() / 50);
});
Don't forget to add prover validation to the first input field which checks if entered values is a valid number.
One more thing to note here is that change will be triggered when input looses focus. You can try using keyup instead, maybe it will better fit your requirements.
Best of luck.
In page 1 I have this html
<input value="creditCard" name="creditCard" maxlength="16">
<input value="name" name="name" maxlength="4">
<input type="button" name="submit">
DISPLAY:
1234567891234568
Name
button
If I click the button, I will go to page 2 and in page 2 I have an edit button. If I click edit, I will be directed to page 1 again with the credit card in masked form
DISPLAY:
XXXX-XXXX-XXXX-4568
Name
button
If for example, I click the creditCard input and then the name input, the display will look like:
DISPLAY:
XXXX-XXXX-XXXX-4
Name
button
Since I added "-" it counts as a character and the maxlength is 16 so the value of the input is trimmed to 16 characters only.
Is there a way I can make to not consider "-" as a character to be counted? I can't adjust the maxlength attribute of the input. It's a business rule. Thank you very much!
Why don't you use JQuery Mask Plugin for this purpose:
https://igorescobar.github.io/jQuery-Mask-Plugin/
It gives you lot of patterns to handle.
I hope you can solve it within this code.
<!DOCTYPE html>
<html>
<body>
<form id="myForm">
<input type="text" size="4" tabindex="1" maxlength="4" onkeyup="myFunction(this,this.value)"> -
<input type="text" size="4" tabindex="2" maxlength="4" onkeyup="myFunction(this,this.value)"> -
<input type="text" size="4" tabindex="3" maxlength="4" onkeyup="myFunction(this,this.value)">
</form>
<script>
function myFunction(x, y) {
if (y.length == x.maxLength) {
var next = x.tabIndex;
if (next < document.getElementById("myForm").length) {
document.getElementById("myForm").elements[next].focus();
}
}
}
</script>
</body>
</html>
This code is showing 0 but i want show enter location with back end hidden value 0
<input type="text" name="location" value="0" placeholder="Enter Location" />
How to do this please help me to fix the small issue.
Thanks
The value attribute refers to the value inside the text-field.
The placeholder is only visible if the text-field has no value.
because of this there is no way to set the value attribute and still see the
placeholder.
try using a custom attribute for your back-end code:
data-value
Remove value="0" from your markup and it will work. value="0" is like you typed 0 into it, so it does not show the placeholder
Unfortuntaly, any value added to the input, makes the placeholder dissapear. What you could do is add a value in the forms onsubmit handler if no value was entered
<form id="myForm">
<input type="text" name="location" placeholder="Enter Location" />
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function() {
var input = this.getElementsByName('location')[0];
if (input.value.length === 0) input.value = '0';
})
</script>
That way a zero is sent to the server if no value was inputted.
It would probably be easier to just check serverside if the input is part of the form data.
I think one of the solutions would be to put only the place-holder in the html & assign the default value in JS(if null).
$('form').submit(function(){
var input = $('#test').val();
if(input == ''){
$('#test').val('empty');
}
alert($('#test').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form>
<input id="test" type="text" placeholder="Type here" />
<input type="submit" />
</form>
I have a question regarding JSP. I have two textboxes. When I type the value in the first text box, it should replicate automatically in the second text box.
<input type="text"
class="formtext"
name="List.lItemList<c:out value='[${status.index}]'/>.value1"
value="0.0"
onChange="validateOnChange(this,'desc','minvalue','maxValue','float')">
<input type="text"
class="formtext"
name="List.clItemList<c:out value='[${status.index}]'/>.value2"
value="0.0"
onChange="validateOnChange(this,'desc','minvalue','maxvalue','float')">
Assuming that the first box has ID input1 and the second input2 (so you'll have to add those IDs), you can do it like this:
document.getElementById('input1').onkeyup = function () {
document.getElementById('input2').value = this.value;
};
You can do this using JavaScript. Attach an keyup event handler on the first textbox which should copy its value to the second one.
<input type="text" id="t1" onkeyup="document.getElementById('t2').value=this.value" />
<input type="text" id="t2" />