I am trying to display age on the text field when I change the date picker. When I choose a date the value doesn't show up on the age text field. How can I display the age when I pick a date? Is there a better way of doing this?
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-id-card-o"></i> </span>
</div>
<input name="age" class="form-control" placeholder="Age" type="text" id="age">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-birthday-cake"></i> </span>
</div>
<input name="birthDate" class="form-control" type="date" id="birthDate">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
$(document).ready(function() {
$(document).on('change', '.birthDate', function() {
var a = moment($(this).val(), "MM/DD/YYYY").month(0).from(moment().month(0));
$('#age').val(a);
});
})
You have a couple of issues. Firstly, the element has no birthDate class, it's an id. As such the selector needs to be #birthDate, not .birthDate.
Secondly, the format of the date will depend on the user's locale. For example, mine displays in YYYY-MM-DD format. As such your explicit instruction to momentJS to parse the date in DD/MM/YYYY format caused it to be read incorrectly. You're better off not specifying the format and letting momentJS determine for itself.
With those issues addressed, try this:
jQuery($ => {
$(document).on('change', '#birthDate', function() {
var a = moment($(this).val()).month(0).from(moment().month(0));
$('#age').val(a);
});
})
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-id-card-o"></i> </span>
</div>
<input name="age" class="form-control" placeholder="Age" type="text" id="age">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-birthday-cake"></i> </span>
</div>
<input name="birthDate" class="form-control" type="date" id="birthDate">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script>
Related
How can I add an icon of font awesome to the end of my input element?
<input id="someId" type="text" class="some-class" data-bind="textInput: myVariable">
Is it possible to keep the icon also when there is text inside?
I am using knockoutJS. Thanks guys!
here is a sample code :
<div class="input-container">
<input class="input-field" type="text" placeholder="Username" name="usrnm">
<i class="fa fa-user icon"></i>
</div>
And a working jsfiddle link : http://jsfiddle.net/newzy08/aq9Laaew/77753/
You can try using Bootstrap or any other CSS library like Semantic UI, Materialise etc.
In Bootstrap, this can look like this:
<form class="form-inline">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-at"></i> <!-- Use of font awesome icon -->
</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
</form>
To add icon at the end of input field:
<form class="form-inline">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-at"></i>
</div>
</div>
</div>
</form>
See an example at Codepen
I am currently working on a website and this particular section requires the user to enter their details in a form. What I am trying to achieve is the following;
If the user hits the submit button and any fields are empty, I want a span element, which is initially set to CSS display none, to show up for each respective input field which has not been filled.
However, nothing seems to be happening when I click on the button. When I go to the console, it does not display any error message.
Can someone please assist? Many thanks.
HTML:
<!-- START OF 'YOUR DETAILS' FORM-->
<section>
<div class="container">
<h3>Step 3: Your Details</h3>
<!-- SLIDE-IN DIV TO REPRESENT DAY PASS -->
<div class="row chosenmembership">
<div class="col-md-12 text-center" id="yourdetails">
<form action="" method="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" placeholder="Email Address" id="email" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Email is required!</span>
</div>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" placeholder="Full Name" id="name" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Name is required!</span>
</div>
<div class="form-group">
<label for="number">Contact Number:</label>
<input type="tel" placeholder="Contact Number" id="number" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Contact Number is required!</span>
</div>
<div class="form-group">
<label for="postcode">Post Code:</label>
<input type="text" placeholder="Post Code" id="postcode" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Post Code is required!</span>
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="tel" placeholder="DD/MM/YYYY" id="dob" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
DOB is required!</span>
</div>
</form>
<div class="form-group">
<input type="submit" id="submit" value="CONTINUE">
</div>
</div>
</div>
</div>
</section>
<!-- END OF YOUR DETAILS FORM -->
JS / JQUERY:
$("#submit").click(function(){
var $formValues = $(".your-details");
var $warning = $(".warnings");
$($formValues).each(function(index){
if ($(this).val("")){
$($warning[index]).css("display","block");
}
})
})
When your running this code $($formValues).each(function(index){if ($(this).val("")){ console.log(this) and see in which context your function is running, the issue is that every time you write a function declaration it creates a new this context and thus the previous this is lost.
Your selectors are kind of redundant, keep the form from submission and show the warnings when any are empty seems to be your intent.
$("#submit").click(function(e) {
$(".your-details").each(function(index) {
if ($(this).val() =="") {
e.preventDefault();// no submit if not filled out
$(this).next('.warning').css("display", "block");// next sibling show
}
});
});
Thought about this for a bit and believe you might handle the form submit instead
$("form").on('submit', function(e) {
$(this).find('.warning').css("display", "none");// hide in case they fix input values
$(this).find(".your-details").each(function(index) {
if ($(this).val() =="") {
$(this).next('.warning').css("display", "block");// next sibling show
}
});
});
Alternately you might use a filter.
$("form").on('submit', function(e) {
$(this).find('.warning').css("display", "none");// hide in case they fix input values
var emptyInputs = $(this).find(".your-details")
.filter(function() {
return ($(this).val() =="");
});
if(!!emptyInputs) {
e.preventDefault();
emptyInputs.next('.warning').css("display", "block");
}
});
Except typo, there was one problem more, you are actually setting value, instead of checking it: if ($(this).val("")) If you change it, and fix typo, something like this should work. Simplified, your code could look like this:
$("#submit").click(function(){
var $formValues = $(".your-details");
$($formValues).each(function(index){
if ($(this).val()==''){
$(".warning").eq(index).css("display","block");
}
else {
$(".warning").eq(index).css("display","none");
}
})
})
Demo:
$("#submit").click(function(){
var $formValues = $(".your-details");
$($formValues).each(function(index){
if ($(this).val()==''){
$(".warning").eq(index).css("display","block");
}
else {
$(".warning").eq(index).css("display","none");
}
})
})
.warning {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- START OF 'YOUR DETAILS' FORM-->
<section>
<div class="container">
<h3>Step 3: Your Details</h3>
<!-- SLIDE-IN DIV TO REPRESENT DAY PASS -->
<div class="row chosenmembership">
<div class="col-md-12 text-center" id="yourdetails">
<form action="" method="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" placeholder="Email Address" id="email" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Email is required!</span>
</div>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" placeholder="Full Name" id="name" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Name is required!</span>
</div>
<div class="form-group">
<label for="number">Contact Number:</label>
<input type="tel" placeholder="Contact Number" id="number" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Contact Number is required!</span>
</div>
<div class="form-group">
<label for="postcode">Post Code:</label>
<input type="text" placeholder="Post Code" id="postcode" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Post Code is required!</span>
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="tel" placeholder="DD/MM/YYYY" id="dob" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
DOB is required!</span>
</div>
</form>
<div class="form-group">
<input type="submit" id="submit" value="CONTINUE">
</div>
</div>
</div>
</div>
</section>
<!-- END OF YOUR DETAILS FORM -->
P.S. You can keep your: $($warning[index]) vars, but you should hide warnings, anyway (else block), if field is not empty.
I use bootstrap-datepicker and want to have a second addon with a checkbox.
I don't want trigger the show of datepicker when i click in the checkbox addon.
I tested the stopPropagation, return false on the onclick event of the second addon but it doesn't work :(
<div class="container">
<div class ="form-group">
<label class="col-sm-2 control-label" >Received Date</label>
<div class="col-sm-2 input-group date" data-date-format="mm-dd-yyyy" id="ARDT">
<input class="text-input form-control" type="text" name="ARDT" maxlength="10" />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<span class="input-group-addon test"><input type="checkbox"/></span>
</div>
</div>
</div>
with this javascript :
$(document).ready(function() {
$('#ARDT').datepicker();
$('.date .test').click(function(e){
e.stopPropagation();
});
});
you can view live on this jsfiddle : http://jsfiddle.net/5a5xzz10/4/
Can you help me ?
Thanks
Whiletrue
EDIT : Found a solution :
<div class ="form-group">
<label class="control-label" >Received Date OK</label>
<div class="input-group">
<div class="input-group date" data-date-format="mm-dd-yyyy" id="ARDT2">
<input class="text-input form-control" type="text" name="ARDT" maxlength="10" />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
<span class="input-group-addon"><input type="checkbox"/></span>
</div>
</div>
embbed the input-group for the datepicker inside another and put the second input-group-addon just after
like here : http://jsfiddle.net/5a5xzz10/6
I have an answer but it doesn't seems very elegant.
I added the checkbox after started the datepicker generation.
$(document).ready(function() {
$('#ARDT').datepicker();
$("div.date").append($('<span class="input-group-addon test"><input type="checkbox"/></span>'));
});
I have a date field in my application. By clicking it, a calendar appears. So after selecting a date, the date field must be shown as 'YYYY-MM-DD' but it shows as 'MM-DD-YYYY'.
<div class="control-group">
<label class="control-label" for="from">From</label>
<div class="input-group " >
<span class="add-on input-group-addon"><i class="fa fa-calendar"></i></span>
<input id="startdate" name="startdate" type="date">
</div>
</div>
<div class="control-group">
<label class="control-label" for="to">To</label>
<div class="input-group " >
<span class="add-on input-group-addon"><i class="fa fa-calendar"></i></span>
<input id="enddate" name="enddate" type="date">
</div>
</div>
<script type="text/javascript">
$(function () {
$('#startdate,#enddate').datepicker({dateFormat: "yyyy-mm-dd"});
});
</script>
Change the yyyy to yy. Here you have the doc http://api.jqueryui.com/datepicker/#utility-formatDate
In my experience format of the date depends on language which set for browser.
In browser js console you can see it with
navigator.languages
Hope it helps.
I am using date and time picker that not used for getting current date and time instead that is to for user want to select some date and time so for...
This is my code for date and time picker.
<form class="form-horizontal" id="myForm">
<label for="from" class="col-sm-1 col-md-1 col-xs-3 control-label">From:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"> <i
class="fa fa-time"></i>
</span> <input type="text" name="from_time" id="from_time"
class="form-control" placeholder="" readonly="" />
</div>
</div>
<label for="to" class="col-sm-1 col-md-1 col-xs-3 control-label">To:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"><i
class="fa fa-time"></i> </span> <input type="text"
name="to_time" id="to_time" class="form-control" placeholder=""
readonly="">
</div>
</div>
<label for="date" class="col-sm-1 col-md-1 col-xs-3 control-label">Date:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"><i
class="fa fa-cal"></i> </span> <input type="text"
name="date" id="date" class="form-control" placeholder="" />
</div>
</div>
<input type="button" onclick="getresult()" value="Submit">
</form>
</div>
</div>
</div>
and my script code for date and time picker
<script type="text/javascript">
$(document).ready(function(){
$('#from_time').timepicker({showMeridian: false});
$('#to_time').timepicker({showMeridian: false});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#date').datepicker({ dateFormat: 'mm-dd-yy' }).datepicker("setDate", new Date());
});
</script>
and here is how i try to get that result of date and time from text box id
function getresult(){
var Date=$("date").val();
var From_Time=$("from_time").val();
var To_Time=$("to_time").val();
alert(Date+" "+From_Time+" "+To_Time);
}
but this gives result like "undefined" "undefined"..in don't know what to do plzzz help me out from this
You have to use ID selector # sign to get value.
function getresult(){
var Date=$("#date").val();
var From_Time=$("#from_time").val();
var To_Time=$("#to_time").val();
alert(Date+" "+From_Time+" "+To_Time);
}
Manual