so im trying to create a popup to input email and name for a subscription but the button to open the popup and close the popup don't work. The first subscription button should open the popup and there is an x that should close the popup could anyone try to debug it?
my code:
<div class="center">
<button id="show-login">Subscribe</button>
</div>
<div class="popup">
<div class="close-btn">×</div>
<div class="form">
<h2>Subscribe for more quizzes!</h2>
<div class="form-element">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email">
</div>
<div class="form-element">
<label for="password">Name</label>
<input type="password" id="password" placeholder="Enter name">
</div>
<div class="form-element">
<input type="checkbox" id="remember-me">
<label for="remember-me">Click for email notifications!</label>
</div>
<div class="form-element">
<button>Subscribe</button>
</div>
</div>
</div>
js.:
document.querySelector("#show-login").addEventListener("click", function(){
document.querySelector(".popup").classList.add("active");
});
document.querySelector(".popup .close-btn").addEventListener("click", function(){
document.querySelector(".popup").classList.remove("active");
});
I hope the below answer is suitable for you.
i am just add css like below
document.querySelector("#show-login").addEventListener("click", function(){
document.querySelector(".popup").classList.add("active");
});
document.querySelector(".popup .close-btn").addEventListener("click", function(){
document.querySelector(".popup").classList.remove("active");
});
.popup{
display:none;
}
.active{
display:block;
}
<div class="center">
<button id="show-login">Subscribe</button>
</div>
<div class="popup">
<div class="close-btn">×</div>
<div class="form">
<h2>Subscribe for more quizzes!</h2>
<div class="form-element">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email">
</div>
<div class="form-element">
<label for="password">Name</label>
<input type="password" id="password" placeholder="Enter name">
</div>
<div class="form-element">
<input type="checkbox" id="remember-me">
<label for="remember-me">Click for email notifications!</label>
</div>
<div class="form-element">
<button>Subscribe</button>
</div>
</div>
</div>
Thank you...!
Related
I got the divs that have the email and password from bootstrap. I have css for the id dropdownlogin, and I did display: none; this is my first post so I hope I have given enough information.
<script>
document.addEventListener('DOMContentLoaded', function()
{
document.querySelector("#dropdownlogin").addEventListener('click', function()
{
dropdownlogin.style.display = block;
})
});
</script>
<div class="login">
Login
<center>
<form id="dropdownlogin" action="">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name#example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div id="loginbtn">
<button>Login</button>
<button>Forgot Password</button></p>
</div>
</form>
</center>
</div>
You can attach the event on the Login and on click of you can show or hide the form. Add a class to the form and on click of the link toggle the visibility of the form
const formContainer = document.getElementById('dropdownlogin');
function toggleForm(e) {
formContainer.classList.toggle('hideForm');
}
.hideForm {
display: none
}
<div class="login">
Login
<form id="dropdownlogin" class="hideForm" action="">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name#example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div id="loginbtn">
<button>Login</button>
<button>Forgot Password</button>
</div>
</form>
</div>
<script>
var mydiv = document.querySelector("#dropdownlogin")
var mybtn = document.querySelector("#mybtn")
mybtn.addEventListener("click", function ()
{
mydiv.classList.toggle("hidden")
});
</script>
.hidden{
display:none;
}
<div class="login">
Login
<center>
<form id="dropdownlogin" class="hidden" action="">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name#example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div id="loginbtn">
<button>Login</button>
<button>Forgot Password</button></p>
</div>
</form>
<button id="mybtn">Click Me!</button>
</center>
</div>
Can someone please help me with recaptcha that have overflow-y visible, I use netlify form.
here its how its look like:
https://gyazo.com/76ae4df1ed119162bcda5566b956ce63
<form action="POST" data-netlify="true">
<div class="fields">
<div class="field half">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="field half">
<input type="email" name="email" id="email" placeholder="Email" />
</div>
<div class="field">
<input type="subject" name="subject" id="subject" placeholder="Subject" />
</div>
<div class="field">
<textarea name="message" id="message" placeholder="Message" rows="7"></textarea>
</div>
<div class="field">
<div class="recaptcha" data-netlify-recaptcha="true" ></div>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" class="button primary" /></li>
</ul>
</form>
In this code, what happens when I change checkbox value (i.e. If I click on credit card checkbox) then <div class="creditcard"> shows, and if I click on paypal then <div class="paypal"> shows.
Now, when I choose credit card and then click on submit button, then form does not submit. And if I check paypal checkbox and click submit button then nothing happen again. I don't understand why.
How can I submit form whether I choose credit card checkbox or paypal?
$(document).ready(function() {
$('input.payment').on('change', function() {
$('input.payment').not(this).prop('checked', false);
});
$("#credit").click(function() {
if ($(this).is(":checked")) {
$(".creditcard").show();
$(".paypal").hide();
} else {
$(".creditcard").hide();
$(".paypal").show();
}
});
$("#paypal").click(function() {
if ($(this).is(":checked")) {
$(".paypal").show();
$(".creditcard").hide();
} else {
$(".paypal").hide();
$(".creditcard").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="checkout.php" autocomplete="off">
<div class="col-lg-7 mb--20 float-left">
<div class="form-group">
<label for="fname">Full Name</label>
<input type="text" class="form-control" id="fname" placeholder="Enter Your Name" name="fname" required="">
</div>
</div>
<div class="col-lg-5 float-right">
<div class="row">
<div class="col-12">
<div class="checkout-cart-total">
<div class="col-md-6">
<input type="checkbox" id="credit" class="payment" name="mode" value="credit card">
<label for="credit">Credit Card</label>
</div>
<div class="col-md-6">
<input type="checkbox" id="paypal" class="payment" name="mode" value="PayPal">
<label for="paypal">Paypal</label>
</div>
<div class="creditcard" style="display:block;">
<div class="form-group">
<label for="cardNumber">CARD NUMBER</label>
<input type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" required value="" />
</div>
</div>
<div class="paypal" style="display:none;">
<div class="form-group">
<label for="paypal_email">Email ID</label>
<input type="email" class="form-control" name="paypal_email" placeholder="Please enter paypal email" required/>
</div>
</div>
<button type="submit" name="submit" id="submit" class="place-order w-100">Place order</button>
</div>
</div>
</div>
</div>
</form>
You should be using radio buttons instead of checkboxes. I cleaned up your code also to use one event handler.
I also updated so the appropriate fields are dynamically set as required.
$(document).ready(function() {
$('input.payment').on('change', function() {
$("input[name='cardNumber']").prop("required",false);
$("input[name='paypal_email']").prop("required",false);
$(".creditcard").hide();
$(".paypal").hide();
if($(this).val() == "PayPal"){
$(".paypal").show();
$("input[name='paypal_email']").prop("required",true);
}
else{
$("input[name='cardNumber']").prop("required",true);
$(".creditcard").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="checkout.php" autocomplete="off">
<div class="col-lg-7 mb--20 float-left">
<div class="form-group">
<label for="fname">Full Name</label>
<input type="text" class="form-control" id="fname" placeholder="Enter Your Name" name="fname" required="">
</div>
</div>
<div class="col-lg-5 float-right">
<div class="row">
<div class="col-12">
<div class="checkout-cart-total">
<div class="col-md-6">
<input checked type="radio" id="credit" class="payment" name="mode" value="credit card">
<label for="credit">Credit Card</label>
</div>
<div class="col-md-6">
<input type="radio" id="paypal" class="payment" name="mode" value="PayPal">
<label for="paypal">Paypal</label>
</div>
<div class="creditcard" style="display:block;">
<div class="form-group">
<label for="cardNumber">CARD NUMBER</label>
<input type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" value="" />
</div>
</div>
<div class="paypal" style="display:none;">
<div class="form-group">
<label for="paypal_email">Email ID</label>
<input type="email" class="form-control" name="paypal_email" placeholder="Please enter paypal email" />
</div>
</div>
<button type="submit" name="submit" id="submit" class="place-order w-100">Place order</button>
</div>
</div>
</div>
</div>
</form>
I have this form:
<form id="user-info-form" role="form" data-toggle="validator">
<div class="row">
<div class="form-input-wrapper col-xs-6">
<div class="form-group">
<label for="input-name" class="form-label">Your Name</label>
<input type="text" name="input-name" class="form-input" placeholder="Your Name..." required />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-input-wrapper col-xs-6">
<div class="form-group">
<label for="input-email-address" class="form-label">Enter your Email address</label>
<input id="input-email-address" type="email" name="input-email-address" class="form-input" placeholder="Email Address..." required />
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="button-wrapper button-wrapper-second">
<button class="button" type="submit">Submit</button>
</div>
</form>
On it's submission I'm trying to execute some code without using what was submitted on the form for now.
The jquery code:
$('#user-info-form').submit(function(event) {
event.preventDefault();
code to be executed..
})
However, it's just not working. I instead end up getting redirected to the same page with this URL:
http://localhost/project/?input-name=nickolas&input-email-address=nickolas%40gmail.com
The default browser submission it seems.
Am I doing anything wrong?
Unable to replicate the issue. I used the following test code.
$(function() {
$('#user-info-form').submit(function(event) {
event.preventDefault();
console.log("Form Submitted");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="user-info-form" role="form" data-toggle="validator">
<div class="row">
<div class="form-input-wrapper col-xs-6">
<div class="form-group">
<label for="input-name" class="form-label">Your Name</label>
<input type="text" name="input-name" class="form-input" placeholder="Your Name..." required />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-input-wrapper col-xs-6">
<div class="form-group">
<label for="input-email-address" class="form-label">Enter your Email address</label>
<input id="input-email-address" type="email" name="input-email-address" class="form-input" placeholder="Email Address..." required />
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="button-wrapper button-wrapper-second">
<button class="button" type="submit">Submit</button>
</div>
</form>
fiddle: http://jsfiddle.net/a3f6ouqw/2/
<form method="POST" id="sampleForm" action="/">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Enter email">
<small id="emailHelp"
class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password"
class="form-control"
id="exampleInputPassword1"
placeholder="Password">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="dateControl">Date</label>
<div class="input-group date"
data-provide="datepicker">
<input type="text"
class="form-control"
id="dateControl">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<!-- Example of select picker -->
<div class="form-group">
<label for="selectControl">Type</label>
<select class="selectpicker"
id="selectControl">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</div>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"> Check me out
</label>
</div>
<button type="submit"
class="btn btn-primary" id="sampleFormSubmitBtn">Submit</button>
</form>
Javascript code
$(document).ready(function() {
$("form").submit(function(e) {
alert($("form").serialize());
console.log(alert($("form").serialize()));
e.preventDefault();
});
});
and I'm always getting empty str. Any ideas?
add name in input and select
For a form element's value to be included in the serialized string, the element must have a name attribute.
$(document).ready(function() {
$("form").submit(function(e) {
alert($("form").serialize());
console.log(alert($("form").serialize()));
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" id="sampleForm" action="/">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input name="email" type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Enter email">
<small id="emailHelp"
class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input name="password" type="password"
class="form-control"
id="exampleInputPassword1"
placeholder="Password">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="dateControl">Date</label>
<div class="input-group date"
data-provide="datepicker">
<input name="dateControl" type="text"
class="form-control"
id="dateControl">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<!-- Example of select picker -->
<div class="form-group">
<label for="selectControl">Type</label>
<select name="selectpicker" class="selectpicker"
id="selectControl">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</div>
</div>
<div class="form-check">
<label class="form-check-label">
<input name="checkbox" type="checkbox" class="form-check-input"> Check me out
</label>
</div>
<button type="submit"
class="btn btn-primary" id="sampleFormSubmitBtn">Submit</button>
</form>
The issue is because none of your input elements, ie. the input, select, textarea etc., have name attributes.
These are required to make the HTML valid, and are also what the serialize() method uses as the keys to associate the values to.
Add name attributes on the HTML fields and your JS code will work fine.