I have recently starting playing around with html and css, and I am stuck with time selector.
Basically, I am creating a form for my website which includes selecting time and date. My date selector works fine (it diplays the calender), however my time selector drop-down does not do anything at all. I have tried many solution but none has worked yest. When i pasted my code to snippet i got following error;
$()... time-picker is not a function
I have tried many solutions, including adding bootstrap.min.js and jquery-1.11.1.min.js as suggested in This but no luck.
Many Thanks,
Hassam
$(function() {
$( "#datepicker1" ).datepicker();
});
$( "#timepicker" ).timepicker();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title>Javascript</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="styleshee" type="text/css" href="jquery.timepicker.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-datepicker.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/fontAwesome.css">
<link rel="stylesheet" href="css/hero-slider.css">
<link rel="stylesheet" href="css/tooplate-style.css">
<link rel="stylesheet" type = "text/css" href="new.css">
<link rel="stylesheet" href="hr-timePicker.min.css">
<script type="text/javascript" src ="script.js"></script>
</head>
<body>
<div class = "bgImage">
<form>
<div class="formWrap">
<p class = "text">Please Enter Your details</p>
<input type="text" name="firstname" placeholder="firstname*" required autofocus />
<input type="text" name="lastname" placeholder="lastname*" required />
<input type="email" name="email" placeholder="email*" required />
<input type="text" class="js--datePicker" id="datepicker1" value="Date*">
<input id="timepicker" class = "timepicker" name="datetime" type="text" required>
<input type="submit" id="submit" class="submit" value="Submit" />
</body>
</html>
enter code here
I updated your code to use absolute reference to timepicker js code in a cdn using:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
and added the following before your </body> tag:
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
Here is the working snippet:
$(function() {
$("#datepicker1").datepicker();
});
$(function() {
$('#timepicker').timepicker();
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title>Javascript</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="styleshee" type="text/css" href="jquery.timepicker.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-datepicker.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/fontAwesome.css">
<link rel="stylesheet" href="css/hero-slider.css">
<link rel="stylesheet" href="css/tooplate-style.css">
<link rel="stylesheet" type="text/css" href="new.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="bgImage">
<form>
<div class="formWrap">
<p class="text">Please Enter Your details</p>
<input type="text" name="firstname" placeholder="firstname*" required autofocus />
<input type="text" name="lastname" placeholder="lastname*" required />
<input type="email" name="email" placeholder="email*" required />
<input type="text" class="js--datePicker" id="datepicker1" value="Date*">
<input id="timepicker" class="timepicker" name="datetime" type="text" required>
<input type="submit" id="submit" class="submit" value="Submit" />
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
</body>
</html>
Related
I am using jQuery for button click event and trying to show alert in ejs file but alert message is not showing below is my code:
register.ejs
<!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">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title><%= title %></title>
<style>
h1 {
text-align: center;
margin-top:50px;
}
.form{
margin-top:50px;
margin-left:30%;
margin-right:30%;
}
input{
margin-top:10px;
}
button{
margin-top:20px;
}
</style>
</head>
<body class="container">
<h1><%= title %></h1>
<div class="form">
<form>
<input name="nam" class="form-control" type="text" placeholder="Name" aria-label="default input example">
<input name="mail" class="form-control" type="text" placeholder="Email" aria-label="default input example">
<button class="btn btn-primary">SUBMIT</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<script type="text/javascript">
$('.btn').click(function(){
alert('Hello');
});
</script>
</body>
</html>
Someone let me know what's wrong in above code.
You have not implemented the JQuery library into your code. Here is the code to implement:
<!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" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous"
/>
<title><%= title %></title>
<style>
h1 {
text-align: center;
margin-top: 50px;
}
.form {
margin-top: 50px;
margin-left: 30%;
margin-right: 30%;
}
input {
margin-top: 10px;
}
button {
margin-top: 20px;
}
</style>
</head>
<body class="container">
<h1><%= title %></h1>
<div class="form">
<form>
<input
name="nam"
class="form-control"
type="text"
placeholder="Name"
aria-label="default input example"
/>
<input
name="mail"
class="form-control"
type="text"
placeholder="Email"
aria-label="default input example"
/>
<button class="btn btn-primary">SUBMIT</button>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js"
integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
crossorigin="anonymous"
></script>
<script type="text/javascript">
$(".btn").click(function () {
alert("Hello");
});
</script>
</body>
</html>
I want to prevent my form from being cleared on a post request in flask.
Here is my code:
predictor.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="static/vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/perfect-scrollbar/perfect-scrollbar.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/css/util.css">
<link rel="stylesheet" type="text/css" href="static/css/main.css">
</head>
<body>
<form method="POST" id="Formid">
<div class="form-group" onsubmit="return false">
<input type="text" class="form-control input-sm" id="input" name="data_input" style="width:100%" maxlength="500"placeholder="Sepal length">
<input type="text" class="form-control input-sm" id="input" name="data_input" style="width:100%" maxlength="500"placeholder="Sepal Width">
<input type="text" class="form-control input-sm" id="input" name="data_input" style="width:100%" maxlength="500"placeholder="Petal length">
<input type="text" class="form-control input-sm" id="input" name="data_input" style="width:100%" maxlength="500"placeholder="Petal Width">
<button type="submit" class="btn btn-success" value="Submit" method="get"><i class="fa fa-search" aria-hidden="true"></i></button>
{{predictions}}
</div>
</form>
</body>
</html>
This is the sample on submitting the form i get the output but the form values get cleared
If I get you right, you need to preserve the values of other input fields in the form, if the form is unable to be processed due to one or more input(s) being invalid.
After the post request, store the values of the valid input fields in variables and pass them in the value attribute in the input tags so that the inputs of the form are prefilled on next reload.
Like this <input type="text" value="{{ some_variable }}" />
You can set these variables as empty strings initially for first-time input from users.
So I'm a bit new to web programming, and I'm trying to include a jQuery widget (pop-up calender when you click on the textbox) on my website. When I open the html script in chrome locally the widget works fine, but on my website it doesn't work at all.
When I visit my website as a regular user, Chrome says "Not Secure" before the https://________ . Maybe this has something to do with it?
Sorry for the big block of code but I don't know where the mistake in my script is.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="appointment">
</head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
<body>
<h2 class="content-head is-center">SET UP AN APPOINTMENT <em>(Optional)</em></h2>
<aside>
<p> We can meet you on campus or at our office!
<br>
<br>
Please use the form below to schedule an appointment.
</p>
</aside>
<!-- START FORM -->
<form id="gform" method="POST" class="pure-form pure-form-stacked"
action="https://script.google.com/macros/s/AKfycbyFvR4QUsL6wSpQbv283kcZuyKDM_vTGbSeqvM91UykoFah9s4/exec">
<fieldset class="pure-group">
<label for="name">Name* : </label>
<p>
<input id="name" firstNname="firstName" placeholder="First Name" /> </p>
<br>
<p><input id="name" lastNname="lastName" placeholder="Last Name" /></p>
</fieldset>
<fieldset class="pure-group">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<p>Date: <input type="text" id="datepicker"></p>
</fieldset>
<input type="submit" value="Submit" action="https://script.google.com/macros/s/AKfycbyFvR4QUsL6wSpQbv283kcZuyKDM_vTGbSeqvM91UykoFah9s4/exec" >
</form>
<!-- POST SUBMISSION -->
<div style="display:none;" id="thankyou_message">
<h2>Thank you for getting in touch with us.
We look forward to meeting with you!</h2>
</div>
<!-- Submit the Form to Google Using "AJAX" -->
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
<!-- <script data-cfasync="false" type="text/javascript"
src="/form-submission-handler.js"></script> -->
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
<!-- END -->
</body>
</html>
It is not working, because you placed JS/jquery multiple times. This version should work:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="appointment">
</head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
<body>
<h2 class="content-head is-center">SET UP AN APPOINTMENT <em>(Optional)</em></h2>
<aside>
<p> We can meet you on campus or at our office!
<br>
<br>
Please use the form below to schedule an appointment.
</p>
</aside>
<!-- START FORM -->
<form id="gform" method="POST" class="pure-form pure-form-stacked"
action="https://script.google.com/macros/s/AKfycbyFvR4QUsL6wSpQbv283kcZuyKDM_vTGbSeqvM91UykoFah9s4/exec">
<fieldset class="pure-group">
<label for="name">Name* : </label>
<p>
<input id="name" firstNname="firstName" placeholder="First Name" /> </p>
<br>
<p><input id="name" lastNname="lastName" placeholder="Last Name" /></p>
</fieldset>
<fieldset class="pure-group">
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<p>Date: <input type="text" id="datepicker"></p>
</fieldset>
<input type="submit" value="Submit" action="https://script.google.com/macros/s/AKfycbyFvR4QUsL6wSpQbv283kcZuyKDM_vTGbSeqvM91UykoFah9s4/exec" >
</form>
<!-- POST SUBMISSION -->
<div style="display:none;" id="thankyou_message">
<h2>Thank you for getting in touch with us.
We look forward to meeting with you!</h2>
</div>
<!-- Submit the Form to Google Using "AJAX" -->
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
<!-- <script data-cfasync="false" type="text/javascript"
src="/form-submission-handler.js"></script> -->
<!-- END -->
</body>
</html>
There are some resources with http:// url are included in your source code, So that is why it's showing "Not Secure".
I would suggest to include all your Javascript libraries related to your functionality at the bottom of your html.
I don't know what's wrong. This code is correct but when I run it in my local machine I recognize that the input field is missing!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slider demo</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="header">
<h1>jQuery Mobile Example</h1>
</div>
<div role="main" class="ui-content">
<label for="slider-0">Input slider:</label>
<input type="range" name="slider-0" id="slider-0" value="60" min="0" max="100">
</div>
</body>
</html>
You need to set protocol because by default browser will set file://
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
IMPORTANT - it is a bad practise to specify the protocol, use this only on local machine
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slider demo</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="header">
<h1>jQuery Mobile Example</h1>
</div>
<div role="main" class="ui-content">
<label for="slider-0">Input slider:</label>
<input type="range" name="slider-0" id="slider-0" value="60" min="0" max="100">
</div>
</body>
</html>
Hi I have the HTML page where I have input field for date picker but that date picker is not working.Below is my code.
<!DOCTYPE html>
<html>
<head>
<title>welcome</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../CSS/Final_Pages/CSS/tableStyle.css" rel="stylesheet" />
<link href="../CSS/tableStyleResponsive.css" rel="stylesheet" />
<link href="../CSS/Custom_style.css" rel="stylesheet" />
<link href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div data-role="page">
<form name="Basicinfo" id="Basicinfo" method="post" action="%bind(:11)">
<div role="main" class="ui-content">
<!-- Other Information Field Starts-->
<div data-role="fieldcontain">
<label id="doblbl">Date Of Birth:</label>
<input type="text" id="dob" name="dob" value="" data-role="date" />
</div>
</div>
</form>
</div>
</body>
</html>
Try take a look at this:
Not sure if its is what your looking for
<div id="indexPage" data-role="page">
<input type="date" id="date_val" data-role="datebox" style="margin-top: 10px" data-options='{"mode": "calbox", "useNewStyle":true,"useFocus": true}'>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src=" http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />