Code below
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />
<div class="w3-col" id="login" style="width:300px">
Subscribe to receive more interesting science experiments
<p></p>
Email
<input type="email" name="email" id="email">
<p>I agree to the Terms and Conditions
<input type="checkbox" />
<button onclick="document.getElementById('id01').style.display='block'" class="w3-grey">Sign Up</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">×</span>
<p>Thank you for signing up!</p>
<p>We will deliver the monthly experiment on the 1st of every Month</p>
</div>
</div>
</div>
</div>
So i am trying to add an IF statement to the checkbox so that if its not ticked, the modal will come up with an error box instead of confirmation
Thanks in advance
The logic is that when the user clicks on the button Sign Up you need to check if the checkbox (I was marked as #agree) is checked. If so, display the modal. Read the code and let me know if something not clear.
function subscribe() {
var cb = document.getElementById('agree');
if (cb.checked) {
document.getElementById('id01').style.display='block';
}
else {
alert('please agree to the terms');
}
}
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />
<div class="w3-col" id="login" style="width:300px">
Subscribe to receive more interesting science experiments
<p></p>
Email
<input type="email" name="email" id="email">
<p>I agree to the Terms and Conditions
<input type="checkbox" id="agree" />
<button onclick="subscribe()" class="w3-grey">Sign Up</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">×</span>
<p>Thank you for signing up!</p>
<p>We will deliver the monthly experiment on the 1st of every Month</p>
</div>
</div>
</div>
</div>
Related
I am new to the Express and Bootstrap. Today, I was trying to create a form for logging in. The form will trigger a POST request to the server and I want to send a new HTML page whenever a POST request is sent but there is always a problem "The page isn't working".
This is my HTML form:
<section class="h-100">
<div class="container h-100" style="margin-top: 50px; ">
<div class="row justify-content-md-center h-100" >
<div class="card-wrapper">
<div class="card fat">
<div class="card-body">
<h3 class="card-title">Login</h3>
<form method="POST" class="my-login-validation" novalidate="">
<div class="form-group">
<label for="email">E-Mail Address</label>
<input id="email" type="email" class="form-control" name="email" value="" required autofocus>
<div class="invalid-feedback">
Email is invalid
</div>
</div>
<div class="form-group">
<label for="password">Password
</a>
</label>
<a href="forgot.html" style="float: right">
Forgot Password?
</a>
<input id="password" type="password" class="form-control" name="password" required data-eye>
<div class="invalid-feedback">
Password is required
</div>
</div>
<div class="form-group m-0">
<button type="submit" class="btn btn-primary btn-block">
Login
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
And this is my Express where I try to respond the form with a new html page:
router.post("/index.html", function(req, res, next){
res.send(`
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>Practical Excercise 3 - Part 3</title>
</head>
<body>
<p> Thanh Toan </p>
</body>
</html>
`);
});
When a login button in HTML is clicked, a POST request is sent. When the server receive a POST request, I want to send back a new HTML page but a problem occur. Can anyone tell me where the problem is?
Thanks you all in advance!
REMEMBER TO TURN THE SERVER ON npm start
Have a good day!
I made a login page on my computer but I don't know how to make it react after login. I am trying to make a website that people can send messages to each other.
I typed in this:
<html>
<!-- Button to open the modal login form -->
<button onclick="document.getElementById('id01').style.display='block'">Login</button>
<!-- The Modal -->
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'"
class="close" title="Close Modal">×</span>
<!-- Modal Content -->
<form class="modal-content animate" action="/action_page.php">
<div class="imgcontainer">
<img src="https://clipground.com/images/img_avatar2-png-2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="friends"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="friends" required>
</div>
<label for="keep secrets"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="keep secrets" required>
<div class="container">
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<span class="keep secrets">Forgot password?</span>
</div>
</form>
</div>
</html>
This type of application, a lot more complicated than a single page, i recommend you search for some tutorias like on youtube .-.
This is a good link https://jasonwatmore.com/post/2017/09/16/react-redux-user-registration-and-login-tutorial-example
Does anyone know how to make my login form work without PHP
such that if I enter a specific email and password it will go to a specific page? So basically it would function as a login page.
Please help
This is my code:
<div class="container" id="container">
<div class="form-container sign-up-container">
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>Login</h1>
<span>Login with your education Account</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
Forgot your password?
<button>Sign In</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
</div>
<div class="overlay-panel overlay-right">
<h1 style="color:white;">Department of Education</h1> <br>
<img src="doe-logo-white.png">
<p>Enter your personal details and start journey with us</p>
</div>
</div>
</div>
</div>
I am working on a contact us form. After clicking on the submit button i want the form to be validated for example if text is entered in the mobile number field i want an error message to be displayed.
if all the data types in the form are correct i want a modal to be displayed which says thank you.
heres the code:
<form class="form">
<div class="line"><label style="font-size: 18px;"for="fname">First Name *: </label><input type="text" id="fname" required /></div>
<div class="line"><label for="lname">Last Name *: </label><input type="text" id="lname" required /></div>
<!-- You may want to consider adding a "confirm" password box also -->
<div class="line"><label for="email">Email *: </label><input type="email" id="email"required /></div>
<!-- Valid input types: http://www.w3schools.com/html5/html5_form_input_types.asp -->
<div class="line"><label for="tel">Mobile *: </label><input type="tel"pattern="[789][0-9]{9}" id="tel" required/></div>
<div class="line"><label for="add">Address *: </label><input type="text" id="add" required/></div>
<div class="line"><label for="ptc">Post Code *: </label><input type="number" maxlenght="6" id="ptc" required /></div>
<div><button data-target="modal1" type="submit"class=" waves-effect waves-light btn modal-trigger">Submit<i class="material-icons right">send</i></button></div>
<p>Note: Please make sure your details are correct before submitting form and that all fields marked with * are completed!.</p>
</form>
below is the javascript
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
here is the modal structure.
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Thank You</h4>
<p>Our Customer service team will contact you shortly</p>
</div>
<div class="modal-footer">
OK
</div>
</div>
The problem about your code is that you are handling the wrong event. I don´t know what framework you are using but your button probably shows the modal when the button is clicked and not when the form is submitted. It would be better to watch for the submit event of the form.
(function($){
$(document).ready(function(){
$('.form').on('submit', function(e){
e.preventDefault();
$('.modal-trigger').leanModal();//Show your modal?
});
});
})(jQuery);
Here is an example I prepared using Twitter bootstrap. I used your form and a the modal of the framework. The functionality must be very similar to the one you desire.
(function($) {
$(document).ready(function() {
$('form.form').on('submit', function(e) { //Handle the submit event of the form
e.preventDefault(); //This prevents the form from submitting, You might need to delete it in your actual code
$('#myModal').modal('show'); //In bootstrap this is the function that shows the modal. It might differ on your actual code.
});
});
})(jQuery);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form class="form">
<div class="line">
<label style="font-size: 18px;" for="fname">First Name *:</label>
<input type="text" id="fname" required />
</div>
<div class="line">
<label for="lname">Last Name *:</label>
<input type="text" id="lname" required />
</div>
<!-- You may want to consider adding a "confirm" password box also -->
<div class="line">
<label for="email">Email *:</label>
<input type="email" id="email" required />
</div>
<!-- Valid input types: http://www.w3schools.com/html5/html5_form_input_types.asp -->
<div class="line">
<label for="tel">Mobile *:</label>
<input type="tel" pattern="[789][0-9]{9}" id="tel" required/>
</div>
<div class="line">
<label for="add">Address *:</label>
<input type="text" id="add" required/>
</div>
<div class="line">
<label for="ptc">Post Code *:</label>
<input type="number" maxlenght="6" id="ptc" required />
</div>
<div>
<button type="submit" class=" waves-effect waves-light btn modal-trigger">Submit</button>
</div>
<p>Note: Please make sure your details are correct before submitting form and that all fields marked with * are completed!.</p>
</form>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
your modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I created a fiddle but the image doesn't display in firefox. Why not? The html is
<div id="message1" class="alert alert-warning alert-dismissable flyover flyover-centered">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">x</button>
<strong></strong> User added
</div>
<!-- Menubar -->
<div id="menubar">
<div id="menubarcentercontainer">
<div id="menubarleft">
</div>
<div id="menubarright">
<div id="menubaruserinfo" class="menubaritem">
<p>Sign In or Sign Up</p>
</div>
<div class="menubaritem">
<p>Get Onacci</p>
</div>
</div>
</div>
</div>
<img id="top-header" src="https://wwwe.onacci.com/onacci.png">
<form id="searchbox" action="connect.php" method="POST">
<div class="control-group" style="float:left;">
<div class="controls" style="float:left;">
<input type="text" id="email" name="email" placeholder="Enter your email" class="input-xlarge">
<p class="help-block">Please provide your E-mail</p>
</div>
</div>
<div style="float:left;">
<!-- Button -->
<button type="submit" class="btn btn-success">Add me to waiting list</button>
</div>
</form>
Because you have an "e" on your www url request(image path).
Also, the image URL is untrusted and firefox will keep blocking the image source url.
Try requesting the image URL in a new window.
It's classed as an untrusted connection by default in Firefox and therefore the image won't download and display.
It is showing up on Firefox v40. However, if it is an issue of "This Connection is Untrusted" error, then better you refer to this solution at official Firefox support forum: https://support.mozilla.org/en-US/kb/connection-untrusted-error-message