how to dynamically insert character in middle input text with JS - javascript

I have an input text box to fill in with hours from 00:00 to 23:59
I'd like to dynamically insert the double point ":" after the 2 first characters, something like in http://www.railtime.be/website/home-fr which is even giving an error message when wrong hours are given like 30:66... I can't figure out how it has been done, any idea?
<input type="text" name="time" id="time" placeholder="00:00" maxlength="5" value="">
I think a keypress function has been used but what with?
Thanks in advance!
Resolved with dfsq solution:
$('input#time').on('keyup', function(e) {
if (e.which && this.value.length === 2 && e.which !== 8) {
this.value += ':';
}
});

<input type="time"> isn't supported in Firefox etc.
If you wish to avoid jQuery, just use this simple code wherein your ':' would be inserted at the time of typing itself using the keyup event-
<html>
<head>
<script type="text/javascript">
function insertColon(e){
var unicode=e.keyCode? e.keyCode : e.charCode
if(unicode!=8){// this avoids backspace to spoil your logic
var textval=document.getElementById("time").value;
if(textval.length==3&&textval.charAt(1)!=":"&&textval.charAt(2)!=":"){// this case arises when backspace is used
textval=textval.substring(0,2)+":"+textval.substring(2,3);
document.getElementById("time").value=textval;
}
else if(textval.length==2&&textval.charAt(1)!=":"){// normal case
textval=textval+":";
document.getElementById("time").value=textval;
}
}
else if(unicode==46&&textval.length>=3&&textval.charAt(1)!=":"&&textval.charAt(2)!=":"){
textval=textval.substring(0,2)+":"+textval.substring(2);`document.getElementById("time").value=textval;`
}
}
</script>
</head>
<body>
<input type="text" name="time" id="time" placeholder="00:00" maxlength="5" value="" onKeyup="insertColon(event);">
</body>
</html>
You can yourself add some little code to script to check if the ranges of hours and minutes are falling within range.

This may help you out. http://jsfiddle.net/e2DzT/380/
It checks for the correct format, and if it is empty. It will output the correct response. Format can be only in 15:30 format.
When the correct format is found, the form is submitted.
<form id="login" name="login" method="post" action="#">
Just change it to what you want it to do.

You can try the following Javascript code:
function appendColon(){
var time=document.getElementById("time").value;
var hours=time.substring(0, 2);
var minutes=time.substring(2, 4);
document.getElementById("time").value=hours+":"+minutes;
}
<input type="text" name="time" id="time" onchange="appendColon()" placeholder="00:00" maxlength="5" value="">
In the onchange event of the input, appends : between hours and minutes.

Related

Multiple inputs type date put into a href using jQuery

Can someone help me? I want to use <input type="date"> and insert the value inserted into <a href=""> using jQuery. I have tried my best but I can't solve it please help.
HTML markup:
<input type="date" class="inpDate" value="">
<input type="date" class="inpDate" value="">
Search
Script code :
<script>
$(".inpDate").on("keyup",function(e){
if(e. keyCode === 13){
var address = $('#getDate').attr('href');
window.location = address;
}
$('#getDate').attr("href","?page=d_jurnal_laporan/&date1="+$(".inpDate").val()+"&date2="+$(this).val());
})
</script>
Notes:
Actually it works if the input type is text, but here I want to make the input type date, and here I do more than one input
Since there are multiple targets with same class, you have to use $(".inpDate")[0].value and $(".inpDate")[1].value OR $("inpDate:nth-child(1)").val() and $("inpDate:nth-child(2)").val() combination.
Edit
keyup works only for key events. For the calender pick event this wont trigger. For that use change event rather than keyup so that it triggers for both input methods.
$(".inpDate").on("change",function(e){
if(e. keyCode === 13){
var address = $('#getDate').attr('href');
window.location = address;
}
const url = "?page=d_jurnal_laporan/&date1=" + $(".inpDate:nth-child(1)").val()+"&date2="+$(".inpDate:nth-child(2)").val();
console.log(url);
$('#getDate').attr("href", url);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="date" class="inpDate" value="">
<input type="date" class="inpDate" value="">
Search

Validating input text field using Javascript

I guess I'm doing a trivial error somewhere but will be grateful if someone can spot it.
I am trying to validate a postcode in a form field once it has been typed in. Similar code works fine in PHP but I've spent hours and the JS does not seem to be executing whatever I do.
Here is part of the form (all within body tags):
<form name ="register" method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" autocomplete="off">
...
<script type="text/javascript" src="common.js">
</script>
<input type="text" name="postcode" class="form-control" placeholder="Postcode" maxlength="10" value='' onchange="isValidPostcode(this.form)" required />
Here are versions of the javascript (stuffed with alerts just to print out something).
Version 1:
function isValidPostcode(form) {
alert("called");
var p = document.register.postcode.value;
var postcodeRegEx = '/^([g][i][r][0][a][a])$|^((([a-pr-uwyz]{1}([0]|[1-9]\d?))|([a-pr-uwyz]{1}[a-hk-y]{1}([0]|[1-9]\d?))|([a-pr-uwyz]{1}[1-9][a-hjkps-uw]{1})|([a-pr-uwyz]{1}[a-hk-y]{1}[1-9][a-z]{1}))(\d[abd-hjlnp-uw-z]{2})?)$/i';
if (postcodeRegEx.test(p)) alert("OK");
else alert("This does not look a valid UK postcode...");
}
Version 2 (is called without a parameter):
function isValidPostcode() {
alert("called");
var p = document.getElementById('postcode').value.replace(/\s/g,'');
var postcodeRegEx = '/^([g][i][r][0][a][a])$|^((([a-pr-uwyz]{1}([0]|[1-9]\d?))|([a-pr-uwyz]{1}[a-hk-y]{1}([0]|[1-9]\d?))|([a-pr-uwyz]{1}[1-9][a-hjkps-uw]{1})|([a-pr-uwyz]{1}[a-hk-y]{1}[1-9][a-z]{1}))(\d[abd-hjlnp-uw-z]{2})?)$/i';
if (postcodeRegEx.test(p)) alert("OK");
else alert("This does not look a valid UK postcode...");
}
I tried binding to other events but can't get a single alert out. Even exact reproduction of the examples is not working. Hope someone gives me an idea of what is wrong.
you should replace onchange with keyup and remove quotes from regex :)
<input type="text" name="postcode" class="form-control" placeholder="Postcode" maxlength="10" value='' onkeyup="isValidPostcode(this.value)" required />
function isValidPostcode(value) {
var postcodeRegEx = /^([g][i][r][0][a][a])$|^((([a-pr-uwyz]{1}([0]|[1-9]\d?))|([a-pr-uwyz]{1}[a-hk-y]{1}([0]|[1-9]\d?))|([a-pr-uwyz]{1}[1-9][a-hjkps-uw]{1})|([a-pr-uwyz]{1}[a-hk-y]{1}[1-9][a-z]{1}))(\d[abd-hjlnp-uw-z]{2})?)$/i;
if (postcodeRegEx.test(value)) console.log("OK");
else console.log("This does not look a valid UK postcode...");
}
You should use the keyup event to do that and add the event using JS, not inline it.
postcodeRegEx is a regex, not a string, you need to remove quotes around it.
function isValidPostcode() {
var p = document.getElementById('postcode').value.replace(/\s/g, '');
var postcodeRegEx = /^([g][i][r][0][a][a])$|^((([a-pr-uwyz]{1}([0]|[1-9]\d?))|([a-pr-uwyz]{1}[a-hk-y]{1}([0]|[1-9]\d?))|([a-pr-uwyz]{1}[1-9][a-hjkps-uw]{1})|([a-pr-uwyz]{1}[a-hk-y]{1}[1-9][a-z]{1}))(\d[abd-hjlnp-uw-z]{2})?)$/i;
if (postcodeRegEx.test(p)) alert("OK");
else alert("This does not look a valid UK postcode...");
}
document.getElementById("postcode").addEventListener("keyup", function() {
isValidPostcode();
});
<form name="register" method="post" action="" autocomplete="off">
<input id="postcode" type="text" name="postcode" class="form-control" placeholder="Postcode" maxlength="10" value='' required />
</form>

multiple actions in a form through javascript

I have a requirement where i have a form, Input text and a button. On button click i need to call two URL on condition. Is this possible through JavaScript.
For example -
When i click button, if the input text is India the URL should go to http://google.co.in
If the input text is UK the URL should go to http://google.co.uk
What are the ways we can implement this requirement.
<form name="inputform" action="somewhere" method="post">
<input type="text" value="" />
<input type="button" />
</form>
Thanks in Advance
Regards
you can try something of this sort :
<form name="inputform" action="somewhere" method="post">
<input type="text" value="" id="t"/>
<input type="button" onclick="chkform()" />
</form>
<script type="text/javascript">
function chkform(){
var x = document.getElementById("t").value;
if(x==="India"){
window.location="http://www.google.com";
}
else if(x==="UK"){
window.location="http://www.google.co.uk";
}
}
</script>
$('form').on('submit', function() {
var inputVal = $('input[type="text"').val();
if (inputVal === "India") {
window.location.replace("http://google.co.in");
} else if (inputVal === "UK") {
window.location.replace("http://google.co.uk");
}
});
It would help a lot if these HTML elements were given class or ID attributes to identify them further but this code is a working mashup of JS and jQuery (as you tagged them both) of what I think you want.
N.B: If you are adding mote conditions, (instead of just India and UK) it may be worth using a switch statement as they look more readable
This code assumes that your button is the submit button for your form

Why this code is not generating any alert message

Here i have written some that is for validation on form in html and javascript
<!DOCTYPE html>
<html>
<body>
<form name="registration">
<input style="font-size:16px;" type="text" name="Name" placeholder="Full Name" onchange="checkName()" required />
</form>
<script>
function checkName()
{
var uname=document.registration.Name.value;
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
alert('fg');
}
else
{
alert('Username must have alphabet characters only');
//uname.focus();
}
}
</script>
</body>
</html>
Please describe why it is not working?
The problem is that you're trying to get the value property TWICE. Like such:
var uname=document.registration.Name.value;
if(uname.value.match(letters))
Your uname variable already contains the value, so you don't need to get it again. Change your if statement to this...
if (uname.match(letters))
And it works just fine :)
Using onchange with input type = "text" is quite uncommon
onchange event usually occurs only after you leave (blur) the control.
onchange is mainly associated with change of select element.
For your case it is better to use keydown, keyup and keypress events as well.
HTML
<input style="font-size:16px;" type="text" name="Name" placeholder="Full Name" onkeyup="checkName()" required />
Jsfiddle

Why is a HTML form field showing the calculations in the output field

I've created a basic profit calculator which is pretty much working fine. My issue is that every time I enter a number into each of the relevant fields, you can see the workings out in the "Total profit" field. It first tells me my entry is NaN, then -infinity, and then shows the workings. Once I click on my calculate button, I am then finally displayed with the correct number.
For this post I am not concerned with why it is producing the NaN (not a number), but why am I seeing it populated in the field in the first place. I want this field to remain blank until I click Calculate, and then see the resulting number. I suspect it's to do with my JavaScript code but I am a complete newbie - and very stuck.
Your thoughts are most appreciative.
<form id="profitCalculator" action="" class="dark-matter">
<h1>Profit Calculator</h1>
<fieldset>
<p><label>Case Cost:<br />£
<input name="casecost" type="text" value="" size="14" maxlength="8" /></label></p>
<p><label>Units per case:<br /> <input name="packs" type="text" value="1" size="14" maxlength="8" /></label></p>
<p><label>Sell price:<br /> £ <input name="sell_price" type="text" value="" size="14" maxlength="8" /></label></p>
<p><input type="button" class="button" OnClick="Circle_calc(this.form);" value="Calculate"></p>
<p>Total Profit:<br /> £ <input name="profit" type="text" value="0" autocomplete="off" SIZE=14></p>
<p><input type="reset" class="button" value="Reset"></p>
</fieldset>
</form>
And the JavaScript
<script type="text/javascript">
document.getElementById('profitCalculator').onclick = function () {
var casecost = this.elements['casecost'].value || 0;
var packs = this.elements['packs'].value || 0;
var sell_price = this.elements['sell_price'].value || 0;
var profit = (sell_price - casecost) / packs;
this.elements['profit'].value = profit.toFixed(2);
}
</script>
Thank you
You've set a click handler on the form element. Since click events bubble, clicks on the elements inside the form bubble to the form as well. So that's triggering an update to your profit element on anything that any element considers a click.
This diagram from the DOM3 events spec (which has since been folded into the DOM4 spec's events section) may help clarify how bubbling works:
You have a Onclick event on your button that calls Circle_calc function.
Change your function passing the form element as a parameter, and it will work.
Circle_calc = function (form) {
var casecost = form.elements['casecost'].value || 0;
var packs = form.elements['packs'].value || 0;
var sell_price = form.elements['sell_price'].value || 0;
var profit = (sell_price - casecost) / packs;
form.elements['profit'].value = profit.toFixed(2);
}
JsFiddle here

Categories

Resources