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>
Related
<div class="row mg-b-25">
<div class="col-lg-4">
<div class="form-group">
<input class="form-control" type="text" name="category_name" id="category_name" placeholder="Enter Category *" maxlength="50" required>
</div>
</div>
</div>
I want to when i focus on input filed than placeholder change to floating label
You can use CSS :focus Selector and CSS ::placeholder Selector
Refer:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
::placeholder {
color: red;
opacity: 1;
}
input:focus::placeholder {
color: blue;
float:right;
opacity: 1;
}
</style>
</head>
<body>
<input type="text" placeholder="A placeholder text..">
</body>
</html>
Try this one example for floating label:
https://stackblitz.com/edit/css-image-filter-efmtr9?file=index.html,styles.css
Here is a example by using Materialize
This example works Here but I do not know why it does not work on code snippet.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class="Input-Field">
<Input id="Email_input" type="Email" class="Validate" />
<Label for="Email_input">Email</Label>
</div>
</body>
<html>
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>
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" />