Im trying to get extension from intlTelInput plugin on submit, but for some reason it returns empty. Here is an example: https://jsfiddle.net/msfk6top/
And the code:
<link rel="stylesheet" href="https://intl-tel-input.com/node_modules/bootstrap/dist/css/bootstrap.min.css?7">
<link rel="stylesheet" href="https://intl-tel-input.com/node_modules/intl-tel-input/build/css/intlTelInput.css?37">
<form id="my_form">
<input name="phone" type="tel" id="phone" class="form-control">
<input type="submit">
</form>
<!-- use old jquery so demo works in IE -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://intl-tel-input.com/node_modules/intl-tel-input/build/js/intlTelInput.js?60"></script>
<script>
$("#phone").intlTelInput();
$("#my_form").submit(function () {
alert($("#phone").intlTelInput("getExtension"));
});
</script>
Any idea why its not returning the chosen extension?
You need to specify the utilsScript option when initializing the plugin in order for getExtension to work.
In your plunker, do:
$("#phone").intlTelInput({utilsScript:'https://intl-tel-input.com/node_modules/intl-tel-input/build/js/utils.js'});
utilsScript should be the path to the utils.js script that is included with the intl-tel-input plugin.
Try with this working example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="ENVIAR SMS GRATIS CON BACHECUBANO">
<title>ENVIAR SMS GRATIS CON BACHECUBANO</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/intlTelInput.min.css">
<style>
body {
background-color: #fafafa;
}
.intl-tel-input {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="card" style="margin-top:50px;">
<!-- <img class="card-img-top" src="..." alt="SMS GRATIS de Bachecubano"> -->
<div class="card-body">
<form class="" action="send.php" method="POST" id="form">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h3 class="card-title text-center">ENVIAR SMS GRATIS CON BACHECUBANO</h3>
<div class="form-group">
<div class="input-group">
<input class="form-control" type="tel" id="phone" name="phone">
<input type="hidden" id="phone2" name="phone2" />
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<textarea class="form-control input-sm borderRadius" type="textarea" id="message" name="message" placeholder="Su mensaje 👍 SMS GRATIS bit.ly/elBache" maxlength="130" rows="5"></textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<span class="help-block">
<p id="characterLeft" class="help-block"></p>
</span>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 text-right">
<button class="btn btn-success disabled" id="btnSubmit" name="btnSubmit" type="submit">Enviar SMS GRATIS</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/intlTelInput-jquery.min.js"></script>
<script>
$("#phone").intlTelInput({
utilsScript: 'js/utils.js'
});
$("#form").submit(function() {
//alert($("#phone").intlTelInput("getNumber"));
$("#phone2").val($("#phone").intlTelInput("getNumber"));
});
</script>
<script>
$(document).ready(function() {
$('#characterLeft').text('130 caracteres restantes');
$('#message').keyup(function() {
var max = 130;
var len = $(this).val().length;
if (len >= max) {
$('#characterLeft').text('0 caracteres disponibles');
$('#characterLeft').addClass('red');
$('#btnSubmit').addClass('disabled');
} else {
var ch = max - len;
$('#characterLeft').text(ch + ' caracteres restantes');
$('#btnSubmit').removeClass('disabled');
$('#characterLeft').removeClass('red');
}
});
});
</script>
</body>
</html>
Related
I want to multiply the three numbers entered in three seprate textbox id is(PaperHeight & PaperWidth & Rate) and then get the product in fourth textbox id is (FinalRate)
I want to get the output when the submit button is clicked
following is my code
function btnclick() {
var PictureHeight = document.getElementById('PictureHeight').value;
var PictureWidth = document.getElementById('PictureWidth').value;
var Rate = document.getElementById('Rate').value;
var FinalRate = document.getElementById('FinalRate').value;
FinalRate = parseInt(PictureHeight) * parseInt(PictureWidth) * parseInt(Rate);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Calculator</title>
</head>
<body>
<center>
<h1>Rate Calculator</h1>
Enter the Picture dimention and Rate<br/>
<div class="container">
<div class="row">
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Width</label>
<input type="number" class="form-control" id="PictureWidth">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Height</label>
<input type="number" class="form-control" id="PictureHeight">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Rate</label>
<input type="number" class="form-control" id="Rate">
</div>
</div>
<br>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">₹</label>
<input type="number" class="form-control" id="FinalRate">
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="btnclick()">Submit</button>
</center>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
</body>
</html>
get the element and then set the value.
function btnclick() {
var PictureHeight = document.getElementById('PictureHeight').value;
var PictureWidth = document.getElementById('PictureWidth').value;
var Rate = document.getElementById('Rate').value;
var FinalRate = document.getElementById('FinalRate');
FinalRate.value = parseInt(PictureHeight) * parseInt(PictureWidth) * parseInt(Rate);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Calculator</title>
</head>
<body>
<center>
<h1>Rate Calculator</h1>
Enter the Picture dimention and Rate<br/>
<div class="container">
<div class="row">
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Width</label>
<input type="number" class="form-control" id="PictureWidth">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Height</label>
<input type="number" class="form-control" id="PictureHeight">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Rate</label>
<input type="number" class="form-control" id="Rate">
</div>
</div>
<br>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">₹</label>
<input type="number" class="form-control" id="FinalRate">
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="btnclick()">Submit</button>
</center>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
</body>
</html>
for some reason, i cannot set data to firebase realtime database.
the function works as intended, values are stored in the vars, and no error is presented...the data just won't upload to the firebase realtime database.
the js code:
$(document).ready(function(){
document.getElementById('submitEmplyee').onclick = function()
{
idNumberVal = document.getElementById('IDNum').value;
nameVal = document.getElementById('Name').value;
addressVal = document.getElementById('Address').value;
telephoneVal = document.getElementById('telephone').value;
//Ready();
firebase.database().ref('employe/' + nameVal).set({
EmplyeeID: idNumberVal,
NameOfEmp: nameVal,
AddressOfEmp: addressVal,
TelephoneOfEmp: telephoneVal
});
//alert("New HighScore !!!");
}
the sources:
<script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-app.js"></script>
<script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-auth.js"></script>
<script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-database.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="logic.js"></script>
full HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>David Frucht CRUD app</title>
</head>
<body>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<h1>Emplyee Information</h1>
<button id="newEmployeBtn" class="btn btn-primary btn-block">New Emplyee</button><br /><br />
<form id="newForm">
<div class="form-group row">
<label for="IDNum" class="col-sm-2 col-form-label">ID Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="IDNum" placeholder="ID Number">
</div>
</div>
<div class="form-group row">
<label for="Name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Name" placeholder="Name">
</div>
</div>
<div class="form-group row">
<label for="Address" class="col-sm-2 col-form-label">Address</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Address" placeholder="Address">
</div>
</div>
<div class="form-group row">
<label for="telephone" class="col-sm-2 col-form-label">Telephone Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="telephone" placeholder="Telephone Number">
</div>
</div>
<button id="submitEmplyee" type="submit" class="btn btn-primary">Add to DB</button>
</form>
<table id="emplyesTable" class="table table-bordered table-hover">
<thead>
<th>Emplyee ID</th>
<th>Name</th>
<th>Address</th>
<th>Telephone</th>
<!-- <th>DB ID</th>
<th>Controls</th>-->
</thead>
<tbody id="employeBody"></tbody>
</table>
</div>
<script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-app.js"></script>
<script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-auth.js"></script>
<script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-database.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="logic.js"></script>
</body>
I didn't test your code, but the cause of your problem is most probably the fact that your form is submitted before the Firebase set() method is triggered.
As a matter of fact, you declare your button as follows:
<button id="submitEmplyee" type="submit" class="btn btn-primary">Add to DB</button>
As detailed in the W3 specification on button types, "the missing value default is the Submit Button state" and "if the type attribute is in the Submit Button state, the element is specifically a submit button".
So, if you add a button type to your button, as follows, it should solve your problem.
<button id="submitEmplyee" type="button" class="btn btn-primary">Add to DB</button>
I am trying to send values from HTML form to javascript file but I saw that the values for email subject and message were sent as undefined in alert window or console, while the name was correctly fetched from input and transferred to js,I am quite new to javascript so this question might be very silly but I am unable to figure out the reason why undefined is sent and also I don't understand that when in what order the javascript and HTML code is executed, I Sometimes see the javascript is being executed first before the button is clicked
heres my html form stored in temp.html
<!doctype html>
<html lang="en">
<head>
<title>Contact Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<form id="connect-form" method="POST">
<div class="row">
<div class="card-body col-lg-6 col-sm-12 col-md-6">
<div class="md-form mt-3">
<input type="text" id="name" class="form-control" required="required">
<label for="materialContactFormName">Name</label>
</div>
<div class="md-form mb-3" id="email" placeholder="Email">
<input type="text" class="form-control mb-3" id="name" required="required">
<label for="email">Email</label>
</div>
<div class="md-form mb-3" id="subject" placeholder="Subject">
<input type="text" class="form-control mb-3" id="name" required="required">
<label for="subject">Subject</label>
</div>
</div>
<div class="card-body col-lg-6 mt-2 col-sm-12 col-md-6">
<div class="md-form">
<textarea class="form-control md-textarea" name="message" rows="4" id="message"
placeholder="say Hi, and I will probably get back to you in 24 hrs :)" style="resize: none; width: 100%; box-sizing: border-box; height: 100%;" required="required"></textarea>
<label for="message">Message</label>
</div>
</div>
</div>
<div class="form-action" style="text-align: center;margin: auto" >
<button onclick="contactuser()" class="btn btn-elegant btn-block" type="submit" style="height: 50px;width: 50%;" >Submit</button>
</div>
<script type="text/javascript" src="js/file.js"></script>
</form>
</div>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- MDB CORE JAVASCRIPT -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
file.js located in js folder
function contactuser(){
var Name = document.getElementById("name").value;
var Email = document.getElementById("email").value;
var subject = document.getElementById("subject").value;
var message = document.getElementById("message").value;
alert("Button Clicked" + "Name: " + Name + "Email:" +Email + " subject:"+ subject);
}
output image that I get
https://ibb.co/dfjBUU
ID in html are unice you can't use id="name" for 3 inputs.
<!doctype html>
<html lang="en">
<head>
<title>Contact Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<form id="connect-form" method="POST">
<div class="row">
<div class="card-body col-lg-6 col-sm-12 col-md-6">
<div class="md-form mt-3">
<input type="text" id="name" class="form-control" required="required">
<label for="materialContactFormName">Name</label>
</div>
<div class="md-form mb-3">
<input type="text" placeholder="Email" class="form-control mb-3" id="email" required="required">
<label for="email">Email</label>
</div>
<div class="md-form mb-3">
<input type="text" class="form-control mb-3" id="subject" placeholder="Subject" required="required">
<label for="subject">Subject</label>
</div>
</div>
<div class="card-body col-lg-6 mt-2 col-sm-12 col-md-6">
<div class="md-form">
<textarea class="form-control md-textarea" name="message" rows="4" id="message" placeholder="say Hi, and I will probably get back to you in 24 hrs :)" style="resize: none; width: 100%; box-sizing: border-box; height: 100%;" required="required"></textarea>
<label for="message">Message</label>
</div>
</div>
</div>
<div class="form-action" style="text-align: center;margin: auto">
<button onclick="contactuser()" class="btn btn-elegant btn-block" type="submit" style="height: 50px;width: 50%;">Submit</button>
</div>
<script type="text/javascript" src="js/file.js"></script>
</form>
</body>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- MDB CORE JAVASCRIPT -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
and js its ok
function contactuser(){
var Name = document.getElementById("name").value;
var Email = document.getElementById("email").value;
var subject = document.getElementById("subject").value;
var message = document.getElementById("message").value;
alert("Button Clicked" + "Name: " + Name + "Email:" +Email + " subject:"+ subject);
}
Need to give the attribute id to the input element not for the div
function contactuser(){
var Name = document.getElementById("name").value;
var Email = document.getElementById("email").value;
var subject = document.getElementById("subject").value;
var message = document.getElementById("message").value;
alert("Button Clicked" + "Name: " + Name + "Email:" + Email + " subject:"+ subject);
}
<form id="connect-form" method="POST">
<div class="row">
<div class="card-body col-lg-6 col-sm-12 col-md-6">
<div class="md-form mt-3">
<input type="text" id="name" class="form-control" required="required">
<label for="materialContactFormName">Name</label>
</div>
<div class="md-form mb-3" placeholder="Email">
<input type="text" class="form-control mb-3" id="email" required="required">
<label for="email">Email</label>
</div>
<div class="md-form mb-3" placeholder="Subject">
<input type="text" class="form-control mb-3" id="subject" required="required">
<label for="subject">Subject</label>
</div>
</div>
<div class="card-body col-lg-6 mt-2 col-sm-12 col-md-6">
<div class="md-form">
<textarea class="form-control md-textarea" name="message" rows="4" id="message"
placeholder="say Hi, and I will probably get back to you in 24 hrs :)" style="resize: none; width: 100%; box-sizing: border-box; height: 100%;" required="required"></textarea>
<label for="message">Message</label>
</div>
</div>
</div>
<div class="form-action" style="text-align: center;margin: auto" >
<button onclick="contactuser()" class="btn btn-elegant btn-block" type="submit" style="height: 50px;width: 50%;" >Submit</button>
</div>
<script type="text/javascript" src="js/file.js"></script>
</form>
</div>
I am trying to add jQuery datepicker function here. But I am getting an error like 'Datepicker is not a function'. please let me know what went wrong. I went through other questions and tried rectifying but didnot work.
<script>
$(function () {
var $j = jQuery.noConflict();
$j("#From").datepicker();
});
//$(function () {
// $('#datetimepicker2').datetimepicker({
// });
//});
</script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Reports</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.12.4.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
</head>
<body>
<div class="container">
<!-- Form Starts-->
<form name="PTTReport" style="padding-top:20px">
<div class="panel panel-primary">
<div style="padding-bottom:25px" class="panel-heading fixed_panel">
<span>Report Filters</span>
</div>
<div class="panel-body">
<div class="row pb-20px">
<label id="From1" class="col-sm-1">From</label>
<input type="text" class="col-sm-2" id="From" />
<label id="To" class="col-sm-1">To</label>
<input type="text" class="col-sm-2" id="To" />
</div>
<div class="row">
<div class='col-sm-5'>
<div class="form-group">
<label id="From1" class="col-sm-2">From</label>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Entire cshtml page,
<!DOCTYPE html>
<script>
$(function () {
var $j = jQuery.noConflict();
$j("#From").datepicker();
});
//$(function () {
// $('#datetimepicker2').datetimepicker({
// });
//});
</script>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Reports</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.12.4.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
</head>
<body>
<div class="container">
<!-- Form Starts-->
<form name="PTTReport" style="padding-top:20px">
<div class="panel panel-primary">
<div style="padding-bottom:25px" class="panel-heading
fixed_panel">
<span>Report Filters</span>
</div>
<div class="panel-body">
<div class="row pb-20px">
<label id="From1" class="col-sm-1">From</label>
<input type="text" class="col-sm-2" id="From" />
<label id="To" class="col-sm-1">To</label>
<input type="text" class="col-sm-2" id="To" />
</div>
<div class="row">
<div class='col-sm-5'>
<div class="form-group">
<label id="From1" class="col-sm-2">From</label>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Did you include datepicker JS file in the DOM? Can you update latest code?
check below snippet. its working
$(function () {
var $j = jQuery.noConflict();
$j(".datepicker").datepicker();
});
//$(function () {
// $('#datetimepicker2').datetimepicker({
// });
//});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Reports</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<!-- Form Starts-->
<form name="PTTReport" style="padding-top:20px">
<div class="panel panel-primary">
<div style="padding-bottom:25px" class="panel-heading fixed_panel">
<span>Report Filters</span>
</div>
<div class="panel-body">
<div class="row pb-20px">
<label id="From1" class="col-sm-1">From</label>
<input type="text" class=" datepicker col-sm-2" id="From" />
<label id="To" class="col-sm-1">To</label>
<input type="text" class="datepicker col-sm-2" id="To" />
</div>
<div class="row">
<div class='col-sm-5'>
<div class="form-group">
<label id="From1" class="col-sm-2">From</label>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control datepicker" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Try this instead :
$(function() {
var j = jQuery.noConflict();
j("#From").datepicker();
});
I'm using eonasdan datetimepicker. I chose default date via using options. I opened the page using chrome, firefox 47.0, and microsoft edje 25.1.
Firefox Case: The date appears in the textfield. But, if I go to
the address bar and hit 'enter', the date shown in the textfield
disappears.
Chrome and edje Case: When the page opens, the date is not shown
in the textfield.
I created a fiddle for this question fiddle, what happens in the fiddle is the same as what happens in the google chrome and internet explorer case.
I tried using the 'viewDate: true' option for datetimepicker which fixed the problem. But it created another problem -- the calendar is not shown when I click the calendar icon.
I have no idea why this is happening. Any help is greatly appreciated.
The same code in the fiddle is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>
Example
</title>
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
</head>
<body>
<div class="container">
<form id="j_idt11" name="j_idt11" method="post" action="/myPage.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt11" value="j_idt11" />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary">
<div class="panel-heading text-center">
My Panel
</div>
<div class="panel-body">
<div class="form-group text-right">
<label class="text-right">My Date</label>
<div class="form-group">
<div class='input-group date' id='d0'>
<input type="text" name="j_idt11:j_idt15:0:j_idt21" value="2016-09-03" class="form-control text-right" onkeydown="return false" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
var cID = "#";
cID = cID.concat('d0');
var t = '2016-09-03'
var options = {
format: 'L',
defaultDate: moment(t)
};
$(cID).datetimepicker(options);
});
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
You don't need value attribute for datetimepicker input in your HTML. If you remove it, your code will work as showed in the following example:
var cID = "#";
cID = cID.concat('d0');
var t = '2016-09-03';
var options = {
format: 'L',
defaultDate: moment(t)
};
$(cID).datetimepicker(options);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<div class="container">
<form id="j_idt11" name="j_idt11" method="post" action="/myPage.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt11" value="j_idt11" />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary">
<div class="panel-heading text-center">
My Panel
</div>
<div class="panel-body">
<div class="form-group text-right">
<label class="text-right">My Date</label>
<div class="form-group">
<div class='input-group date' id='d0'>
<input type="text" name="j_idt11:j_idt15:0:j_idt21" class="form-control text-right" onkeydown="return false" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
If you want to use data attributes you can use data-date-* to set an option or data-date-options setting an option object. In your case you can use data-date-default-date instead of value.
You can find more about data-* initialization here and here.
CDN :
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css"></script>
HTML :
<div class="row">
<div class="col-md-12">
<h6>datetimepicker1</h6>
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
<h6>datetimepicker2</h6>
<input type="text" class="form-control" id="datetimepicker2" />
</div>
</div>
JavaScript :
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
Use This Code..
This will useful for you..