I have the following field in my form, where a user should enter a 10 digit number.
I present the number in 3 separate fields (3-3-4):
Phone: [_ _ _]-[_ _ _]-[_ _ _ _]
Code:
<div id="phone-element" class="form-element">
<input type="tel" size="3" name="phone1" id="phone1" maxlength="3" tabindex="3" pattern="[0-9]{3}" title="3 digit phone number. Eg.808" required=""> <span class="wc_sep">-</span>
<input type="tel" size="3" name="phone2" id="phone2" maxlength="3" tabindex="4" pattern="[0-9]{3}" title="3 digit phone number. Eg.789" required=""> <span class="wc_sep">-</span>
<input type="tel" size="4" name="phone3" id="phone3" tabindex="5" pattern="[0-9]{4}" maxlength="4" title="4 digit phone number. Eg.1374" required="">
</div>
But currently between each field, users need to place their mouse in the next field in order to continue to type the number.
How can I make it continuously?
This can be done with jQuery by checking the length of the entered value(on keyup) against the maxlength you have set on the inputs. If the length of the input value matches the maxlength of the input, then focus the next input:
$(function() {
$('input[type="tel"]').keyup(function () {
if (this.value.length === this.maxLength) {
$(this).nextAll('input[type="tel"]').first().focus();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="phone-element" class="form-element">
<input type="tel" size="3" name="phone1" id="phone1" maxlength="3" tabindex="3" pattern="[0-9]{3}" title="3 digit phone number. Eg.808" required="">
<span class="wc_sep">-</span>
<input type="tel" size="3" name="phone2" id="phone2" maxlength="3" tabindex="4" pattern="[0-9]{3}" title="3 digit phone number. Eg.789" required="">
<span class="wc_sep">-</span>
<input type="tel" size="4" name="phone3" id="phone3" tabindex="5" pattern="[0-9]{4}" maxlength="4" title="4 digit phone number. Eg.1374" required="">
</div>
You'll need to use JavaScript.
Attach an event listener to the input elements on keyup. If the length of the field matches your predetermined length, add focus to the next input element.
e.g.
var phone1 = document.getElementById('phone1');
phone1.addEventListener('keyup', function() {
if (phone1.value.length === 3) {
document.getElementById('phone2').focus();
}
});
You might need to cater to any edge cases that you find to make sure the UX is smooth, but this should get you started.
You could use jquery
<html>
<head>
<title></title>
<meta content="">
<style></style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<input type="text" name="" id="field1">
<input type="text" name="" id="field2">
<input type="text" name="" id="field3">
<script type="text/javascript">
$(function(){
var field1 = $("#field1");
var field2 = $("#field2");
var field3 = $("#field3");
field1.on("keyup", function(e){
if(field1.val().length == 3)
{
field2.focus();
}
})
field2.on("keyup", function(e){
if(field2.val().length == 3)
{
field3.focus();
}
})
})
</script>
</body>
</html>
Related
I am currently working on an html5 project in which there is a lot of input fields that I want to replace by textarea.
Example:
<input type="text" id="Questions" name="texte1"/>
<input type="text" id="Questions" name="texte2"/>
<input type="text" id="Questions" name="texte3"/>
There is 200 inputs that I want to change by:
<textarea id="Questions" name="texte1"></textarea>
<textarea id="Questions" name="texte2"></textarea>
<textarea id="Questions" name="texte3"></textarea>
but I can't really use the search and replace tool because the name is different for every input So I was wondering if anyone of you knows a quick way to replace all my inputs by text area without changing the names 1 by 1 on my code.
You need a criterion that tells you which inputs need to be replaced. What do they all have in common? Also note that you cannot have more than one element per page with the same value for id, so the HTML you show is invalid.
So for the example code I'm assuming that all inputs that need to be replaced have a CSS class replace-me:
document.getElementById('replace').addEventListener('click', (e) => {
const toReplace = [...document.querySelectorAll('.replace-me')]
for (const input of toReplace) {
const textarea = document.createElement('textarea')
const parent = input.parentNode
textarea.id = input.id
textarea.name = input.name
textarea.value = input.value
parent.removeChild(input)
parent.appendChild(textarea)
}
})
<div>
<input class="replace-me" type="text" value="1" id="i1" name="foo1" />
<input class="replace-me" type="text" value="2" id="i2" name="foo2" />
<input class="replace-me" type="text" value="3" id="i3" name="foo3" />
<input class="replace-me" type="text" value="4" id="i4" name="foo4" />
<input class="replace-me" type="text" value="5" id="i5" name="foo5" />
</div>
<button type="button" id="replace">Click to replace</button>
I am trying to assign a HTML text attribute's value to a hidden attribute's value.
The text code:
<input type="text" name="number" id="number" maxlength="4" onBlur="myno=this.value; concatno=myno.concat('0001')" />
I've used alert to try the output of the concatno value. For example, if user enter 1010, then the output will be 10100001.
Then my hidden code:
<input type="hidden" id="hide" name="hide" value=concatno>
I want my hidden value to be 1010001, but instead the value became "concatno". How should I assign the value in my hidden attribute?
The problem here is that you never updated your #hide element.
You need to use some javascript, for example:
document.getElementById('hide').value = concatno;
Working snippet:
<input type="text" name="number" id="number" maxlength="4" onkeyup="var myno = this.value; var concatno = myno.concat('0001'); document.getElementById('hide').value=concatno;" />
<input id="hide" name="hide" value=concatno disabled>
Note that even if the event is not the issue here, I suggest you to use another trigger, like onkeyup, so that the value is updated more often.
I've also changed your hidden element to disabled to make it visual.
Moreover, you should learn to avoid inline JavaScript.
Here is how I'll do it:
document.getElementById('number').addEventListener("keyup", function() {
document.getElementById('hide').value = this.value.concat('0001');
});
<input type="text" name="number" id="number" maxlength="4" />
<input id="hide" name="hide" value=concatno disabled>
Documentation: getElementById
Hope it helps.
The issue is that you never actually update the value of your #hide element. You need to set its value inside of your event binding (just made the input visible for reference):
<input type="text" name="number" id="number" maxlength="4" onblur="var myno = this.value; var concatno=myno.concat('0001'); document.getElementById('hide').value = concatno; console.log(concatno)" />
<input type="text" id="hide" name="hide" value=concatno disabled />
It's also worth noting though, that you should generally avoid using obtrusive event handlers. Instead, delegate event handling to external Javascript. This way, your designer doesn't need to understand or even worry about the JS.
Here's an example using unobtrusive handlers:
document.getElementById('number').addEventListener('blur', function() {
document.getElementById('hide').value = this.value.concat('0001');
});
<input type="text" name="number" id="number" maxlength="4" />
<input type="text" id="hide" name="hide" placeholder="concatno" disabled />
Try using name/id instead;
<input type="text" name="number" id="number" maxlength="4" oninput='hide.value=(this.value + "0001")' autofocus=''/>
<input type="hidden" id="hide" name="hide" />
without inline scripts:
document.addEventListener('DOMContentLoaded', function() {
let hide = document.querySelector('#hide');
document.querySelector('#number').addEventListener('input', function() {
hide.value = this.value + '0001';
});
});
<input type="text" name="number" id="number" maxlength="4" autofocus='' />
<input type="hidden" id="hide" name="hide" />
I've been able to change the error message when the user has not typed their email in yet, but how do I change the error message when the user types in their email with the wrong format?
This is my code written in Bootstrap 4 style:
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="" class="form-control" oninvalid="this.setCustomValidity('Please Enter valid email')" oninput="setCustomValidity('')">
</div>
You simply can fix this with adding title to input tag
<input type="email" class="form-control" name="email" id="freeform_email"
placeholder="Enter an email" required="required"
oninvalid="this.setCustomValidity('Enter an email that contains "#". Example: info#roshni.nl')" title="Email: the email contains '#'. Example: info#ros-bv.nl" />
Yours should be then:
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="" class="form-control" oninvalid="this.setCustomValidity('Please Enter valid email')" oninput="this.setCustomValidity('')" title='<your text>'">
</div>
You're welcome.
Here’s an example of how to do it:
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("#");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>
You’ll have to change the text inside alert to include your custom message and action_page.php to include your own and add your desired styles all over!
UPDATE
If you don't want to implement your own JavaScript functions then you can just go ahead and add conditions to the oninvalid as follows:
<input type="email" name="email" required="" class="form-control" oninvalid="if (this.value == ''){this.setCustomValidity('This field is required!')} if (this.value != ''){this.setCustomValidity('The email you entered is invalid!')}" oninput="setCustomValidity('')">
I have two fields which both take numbers. One must always be higher than the other. For example you can have a field for age, and then a field for older sibling age which of course must be greater depending on the first field.
My fields are like this:
<input type="number" ng-model="age" required>
<input type="number" ng-model="olderSiblingAge" required>
I've tried using min="age" in the olderSibling input, but no luck, can still go below it.
You have to interpolate the value like this: min="{{vm.age}}" as specified in the number input documentation regarding to AngularJS.
angular
.module('app', [])
.controller('ctrl', function() {
var vm = this;
vm.age = 1;
vm.olderSiblingAge = 2;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl as vm">
<label> Age </label> <br />
<input type="number" ng-model="vm.age" required ng-change="vm.olderSiblingAge = vm.age">
<br /><br />
<label> Older sibling age </label> <br />
<input type="number" ng-model="vm.olderSiblingAge" required min="{{vm.age}}">
</div>
Note: I've used the controller-as syntax. Of course you can use it as your were doing it with the $scope notation like this min="{{age}}"
TRY USING THIS CODE
<input type="number" ng-model="age" required>
<input type="number" ng-change="olderSiblingAge = (olderSiblingAge < age)?age+1:olderSiblingAge" ng-model="olderSiblingAge" required>
To achieve expected result, use below option of using ng-blur to compare entered values
code sample https://codepen.io/nagasai/pen/XEJpYa?editors=1010
HTML:
<div ng-app="test" ng-controller="testCtrl">
Age <input type="number" ng-model="age" required>
Sibling Age <input type="number" ng-model="olderSiblingAge" required ng-blur="check()">{{olderSiblingAge}}
</div>
JS:
var app = angular.module('test',[]);
app.controller('testCtrl',function($scope){
$scope.check = function(){
if($scope.age > $scope.olderSiblingAge){
$scope.olderSiblingAge = null
alert("older sibling age should be greater than age")
}
}
})
I need to make a JqueryMobile app for college work,
i have that form -
<form name="local_storage_form" method="post" action="#" data-ajax="false" autocomplete="on" data- theme="e" style="padding: 10px;" onsubmit="save_data()">
<label for="id">identity card number</label><input type="text" name="id" id="id" placeholder="identity card number..." data-theme="e" required class="localStore">
<label for="hphone">Home Phone Number</label><input type="tel" name="hphone" id="hphone" placeholder="Home Phone Number..." data-theme="e" class="localStore">
<label for="mphone">Mobile Phone Number</label><input type="text" name="mphone" id="mphone" placeholder="Mobile Phone Number..." data-theme="e" required class="localStore" oninvalid="setCustomValidity('Invaild Phone Number (05********)')">
<label for="bdate">Birth Date</label><input type="date" name="bdate" placeholder="Birth Date..." id="bdate" data-theme="e" required class="localStore">
<label for="email">Email Address</label><input type="email" name="email" id="email" autocomplete="off" placeholder="Email Address..." data-theme="e" required class="localStore">
<button type="button" value="Save" id="Save" data-theme="a">Submit</button>
</form>
i need to store all the details on localstorage and get them after,
how can i do it when i click on the submit button?
btw,it's an offline website so when i click submit it gives me an error.
Have a look into the Jquery API documentation.
$('#local_storage_form').submit(function(e) {
e.preventDefault(); // prevent the form from attempting to send to the web server
var $inputs = $('#local_storage_form :input');
var values = {};
$inputs.each(function() {
values[this.name] = $(this).val();
});
localStorage.setItem('testForm', JSON.stringify(values));
});