I have 3 forms. I'd like to show each separately. Having the user fillout and then have the completed form slide to the left, and then revealing the proceeding form.
$('.button-action').click(function() {
$('.firstForm').animate({left: '-=150px'}, 500);
});
How would I go about making this happen?
Here is a fiddle that I've tried to work with.
Thank you for your help.
I've changed the divs to have a class called 'wizard' (because that's the way I see what you are trying to do) you can change that however you'd like.
HTML
<div class="promo">
<div class="wrapper">
<div id="signup" class="wizard">
<div class="heading">
<h1>Just need your email to get started</h1>
</div>
<ul>
<li>
<input class="signup-email" type="text" placeholder="Email address" />
</li>
<li>
<button data-next-id="form1" validationDiv="signup" class="continue button button-action">Apply</button>
</li>
</ul>
</div>
<div id="form1" class="wizard">
<h1>One more to go</h1>
<input type="text" placeholder="First Name" />
<input type="text" placeholder="Last Name" />
<input type="text" placeholder="Country" />
<button data-next-id="form2" validationDiv="form1" class="continue button button-action">One more</button>
</div>
<div id="form2" class="wizard">
<h1>Last one</h1>
<input type="text" class="input-text" placeholder="Company Name" />
<button validationDiv="form2" class="button button-action">Done</button>
</div>
</div>
</div>
jQuery
$(".wizard").hide();
$("#signup").show();
$(".continue").click(function () {
var valid = true;
$("#" + $(this).attr("validationDiv")).find("input").each(function () {
if ($(this).val() == "") valid = false;
});
if (valid) {
$(".wizard").slideUp();
$("#" + $(this).attr("data-next-id")).slideDown();
}
});
JSFiddle
Related
I'm trying to select a form element in javascript using the querySelector but it won't work and sometime it returns the form element.
Here's my code:
JavaScript
const ele = document.querySelector('form');
console.log(ele);
ele.addEventListener('submit', function(e) {
console.log("in the eventlister function");
const pass = document.getElementsByClassName("P")[0].value;
const cpass = document.getElementsByClassName("CP")[0].value;
const messagePara =document.getElementById("generated_message");
if(pass != cpass){
e.preventDefault();
messagePara.textContent ="check your password!!";
messagePara.style.color= 'red';
return false;
}
else{
messagePara.textContent ="";
}
});
HTML
<form class="inputF">
<div class="inputD">
<label for="fname" >Full Name</label>
<input type="text" id="fname" required>
</div>
<div class="inputD">
<label for="uname">Username</label>
<input type="text" id="uname">
</div>
<div class="inputD">
<label>Email address</label>
<input type="email" id="Email" placeholder="example#gmail.com" required >
</div>
<div class="inputD">
<label for="phn">Phone Number</label>
<input type="number" id="phn">
</div>
<div class="inputD">
<label for="pass">Password</label>
<div class="pass">
<input type="password" class="P IptP" required>
<i class="fa fa-eye-slash show-hide"></i>
</div>
</div>
<div class="inputD">
<label for="cpass">Confirm Password</label>
<div class="pass">
<input type="password" class="CP IptP" required>
<i class="fa fa-eye-slash show-hide"></i>
</div>
</div>
<div>
<button id="save_btn" >Continue</button>
</div>
</form>
I tried adding class for the form and select the form using the ClassName but still the same problem occurred. How can I fix this problem ?
When manipulating the DOM with a <script> in the <header>, you'll want to wait until the document has loaded.
document.body.addEventListener('load',function(){
// Your DOM sensitive code here
});
otherwise, you might want to include your script after the form tag
<!DOCTYPE html>
<html>
<!-- Your header; moving your script from here -->
<body>
<!-- Your form here -->
<!-- Move script here-->
<script>
// DOM sensitive code here as the last element in the body
</script>
</body>
I'm new to Javascript and followed a tutorial to make a pop form. The data filled by the user was supposed to appear in the console and that doesn't happen. I would also like to create an alert for when people click on the submit button so I added the last few lines that you'll see in the JavaScipt code, but it's not working as well. Hope that this is detailed enough and that someone can help me.
Here is the HTML
<h1>
I'd love to chat with you about your upcoming project.
</h1>
<div class="intro-text">
Fill out the form bellow to get in touch. Either for a budget information or to book a meeting to discuss
any ideas that you might have, you can contact me for any
clarification you need. I'll get back to you in 2-3 days.
</div>
<div class="row open-form">
<div class="open-btn">
<button id="show-modal"><strong>Open Form</strong></button>
</div>
</div>
<script src="./JavaScript/action_page.js"></script>
<div class="modal modal--hidden">
<div class="modal_content">
<div class="close">
<i class="fas fa-times" onclick="closeMe()"></i>
</div>
<h1>Ask away</h1>
<form id="submit">
<input type="text" placeholder="Name" name="name" />
<input type="email" id="email" placeholder="Email" name="email"/>
<input type="text" placeholder="Subject" name="subject" />
<textarea placeholder="Message" name="message"></textarea>
<button class="submit">Submit</button>
</form>
</div>
</div>
And JavaScript
document.getElementById("show-modal").addEventListener("click", function() {
document.querySelector(".modal").style.display = "flex";
});
function closeMe() {
document.querySelector(".modal").style.display = "none";
}
document.querySelector("#show-modal").addEventListener("submit", event => {
event.preventDefault();
toggleModal();
let formData = new FormData(document.querySelector("#show-modal"));
console.log(
"Name:" + formData.get("name"),
"Email:" + formData.get("email"),
"Subject:" + formData.get("subject"),
"Message:" + formData.get("message")
);
});
document.getElementById("#show-modal").addEventListener("submit", function() {
alert("Thank you for your message!");
});
Here is the page if you want to have a look: https://giacomosorbi.github.io/joanaoli09-module-i/contact.html
Change the code to:
(Removed toggleModal() as there is no defination for it)
document.getElementById("show-modal").addEventListener("click", function() {
document.querySelector(".modal").style.display = "flex";
});
function closeMe() {
document.querySelector(".modal").style.display = "none";
}
document.querySelector("#submit").addEventListener("submit", event => {
event.preventDefault();
let formData = new FormData(document.querySelector("#submit"));
console.log(
"Name:" + formData.get("name"),
"Email:" + formData.get("email"),
"Subject:" + formData.get("subject"),
"Message:" + formData.get("message")
);
alert("Thank you!!!");
});
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
I'd love to chat with you about your upcoming project.
</h1>
<div class="intro-text">
Fill out the form bellow to get in touch. Either for a budget information or to book a meeting to discuss
any ideas that you might have, you can contact me for any
clarification you need. I'll get back to you in 2-3 days.
</div>
<div class="row open-form">
<div class="open-btn">
<button id="show-modal"><strong>Open Form</strong></button>
</div>
</div>
<script src="./JavaScript/action_page.js"></script>
<div class="modal modal--hidden">
<div class="modal_content">
<div class="close">
<i class="fas fa-times" onclick="closeMe()"></i>
</div>
<h1>Ask away</h1>
<form id="submit">
<input type="text" placeholder="Name" name="name" />
<input type="email" id="email" placeholder="Email" name="email"/>
<input type="text" placeholder="Subject" name="subject" />
<textarea placeholder="Message" name="message"></textarea>
<button class="submit">Submit</button>
</form>
</div>
</div>
First of all, move <script> tag on the end of the html document, because you are trying to find elements in html that aren't rendered yet.
As so:
<div class="modal modal--hidden">
<div class="modal_content">
<div class="close">
<i class="fas fa-times" onclick="closeMe()"></i>
</div>
<h1>Ask away</h1>
<form id="submit">
<input type="text" placeholder="Name" name="name" />
<input type="email" id="email" placeholder="Email" name="email"/>
<input type="text" placeholder="Subject" name="subject" />
<textarea placeholder="Message" name="message"></textarea>
<button class="submit">Submit</button>
</form>
</div>
</div>
<script src="./JavaScript/action_page.js"></script>
Second, your addEventListener("submit",... should be on form element, not on modal button-
I have a form that is being used as a basic contact form. I have added a checkbox that adds some fields if selected. How can I change the onclick action of the submit button based on if this box is checked or not. Here is what I have currently.
<form class="homeContact">
<label for="chkJob">
Interested in a career? Check to apply
<input type="checkbox" id="chkJob" />
</label>
<div id="dvApply" style="display: none">
Download Application
Download the application. Fill it out and upload below:
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<div id="popErr"></div>
<input type="hidden" name="nospam">
<div class="field">
<div class="label-form">
<input type="text" placeholder="Name *" value="" name="name" id="popName">
<span class="form-icon fa fa-user"></span>
</div>
</div>
<div class="field">
<div class="label-form">
<input type="text" placeholder="Email *" value="" name="email" id="popEmail">
<span class="form-icon fa fa-envelope"></span>
</div>
</div>
<div class="field">
<div class="label-form">
<input type="text" placeholder="Phone *" value="" name="phone" id="popTel">
<span class="form-icon fa fa-phone"></span>
</div>
</div>
<div id="submit_button">
<input type="button" class="button submit" id="contact-submit" onclick="submitForm()" value="Request Information">
</div>
</form>
<script>
jQuery(document).ready(function($) {
$("#chkJob").click(function () {
if ($(this).is(":checked")) {
$("#dvApply").show();
} else {
$("#dvApply").hide();
}
});
});
</script>
You can implement this login into your submitForm function:
function submitForm()
{
if ($('#chkJob').is(":checked")) {
$("#dvApply").show();
} else {
$("#dvApply").hide();
}
}
But if you want dvApply to be toggled every time checkbox button is clicked without waiting for submit button to be clicked you can do something like:
jQuery(document).ready(function($) {
$('#chkJob').change(function() {
$('#dvApply').toggle();
});
});
I have the following HTML structure, which cannot be changed.
I need to append the user typed info to a <ul> list with jQuery.
I have tried it using the following code but id does nothing. What would be the correct way to do it?
$(document).ready(function() {
$(".btn btn-outline-primary").click(function() {
let toAdd = $("input[#title]").val();
$("<li>" + toAdd + "</li>").appendTo("<ul>");
});
});
<body>
<div class="container">
<div class="row">
<div class="col-6">
<h2>Add Show</h2>
<form>
<div class="form-group">
<label for="title">Show Title</label>
<input type="text" class="form-control" id="title" placeholder="enter title" />
</div>
<div class="form-group">
<label for="rating">Show rating </label>
<input type="number" min="0" max="10" value="5" class="form-control" id="rating" />
</div>
<button type="submit" class="btn btn-outline-primary">Add show</button>
</form>
</div>
<div class="col-6">
<h2> Show List</h2>
<ul>
</ul>
<button class="btn btn-outline-secondary"> Delete List</button>
</div>
</div>
</div>
</body>
</html>
A bunch of bugs to fix:
Separating selectors with space means that the document is searched for the first selector with a descendant of the second selector - you don't want that here, keep the class names together (or just select the btn-outline-primary alone, since there's only one of them)
You need to preventDefault() to keep the form from submitting and replacing the page
The existing ul in the HTML should be selected if you want to append to it - '<ul>' isn't a valid selector.
The #title should just be selected as #title (ids can't be repeated in HTML, after all):
$(".btn-outline-primary").click(function(e) {
e.preventDefault();
let toAdd = $("#title").val();
$("<li>" + toAdd + "</li>").appendTo("ul");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-6">
<h2>Add Show</h2>
<form>
<div class="form-group">
<label for="title">Show Title</label>
<input type="text" class="form-control" id="title" placeholder="enter title" />
</div>
<div class="form-group">
<label for="rating">Show rating </label>
<input type="number" min="0" max="10" value="5" class="form-control" id="rating" />
</div>
<button class="btn btn-outline-primary">Add show</button>
</form>
</div>
<div class="col-6">
<h2> Show List</h2>
<ul>
</ul>
<button class="btn btn-outline-secondary"> Delete List</button>
</div>
</div>
</div>
$(document).ready(function(){
$('form').submit(function(e) {
e.preventDefault();
let toAdd = $("#title").val();
$("<li>" +toAdd+ "</li>").appendTo(jQuery("ul"));
});
});
First override the submit.
Value should be fetched properly. using #title
Append to proper element
You have wrong selectors in your code (for btn and title), plus i'd change also the append code.
Also, you have a submit button inside a form, clicking it will cause the submit.
Try this:
$(document).ready(function(){
$("form").submit(function(e){
//prevent form submit;
e.preventDefault();
//append input text value to UL
$("ul").append("<li>" + $("#title").val() + "</li>");
});
});
Click here to test if in JsFiddle
I want to make a pop up login in navigation. I want it to not go back in the previous page whenever I click one of the textboxes and when I only click the exit or "x" button it will exit. I don't know what's the problem with my code. Can someone help me?
<body>
<div class=MainNavi>
<div class=SecNavi>
<ul>
<div class="login">
<li> Login
<div id="m01" class="modal-popup" onclick="this.style.display='#form'">
<img class="modal-popup-content " id="img01" style="width:80%">
<div class="login-container">
<img src="images/user-login.png">
<div id = "form">
<form action="" method="post" id="myform">
<div class = "form-input">
<input type="text" name="username" value="" placeholder="Enter Username" required="required">
</div>
<div class = "form-input">
<input type="password" name="password" value="" placeholder="Enter Password" required="required">
</div>
<input type="submit" class=btn-login name="log" value="Let me in">
</div>
</form>
</div>
<span id ="x101"Onclick="onClick(this).this.style.display='none'"" class="x- btn x-hover display-x">x</span>
<script>
function onClick(element) {
document.getElementById("log101").src = element.src;
document.getElementById("m01").style.display = "block";
}
</script>
</div>
<li>About Us</li>
<li>Songs</li>
<li>Gallery</li>
<li>Home</li>
<center><h1>#</h1></center>
</ul>
</div>
</div>