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-
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>
Hi lads I'm new to JavaScript and I'm in the process of creating my first web application and still don't know how to use jQuery.
My question is about how to avoid Jshint warning.
I added an event listener to multiple elements with the same class name the code works but when trying to validate my code through jshint I'm getting this error (Functions declared within loops referencing an outer scoped variable may lead to confusing semantics)
This is my html code for the first warning
<div class="search-suggestion">
<div class="by-ingredient" onclick="writeToDocument('fish')">
<div class="suggestion-text">
<p>Fish</p>
</div>
<div class="suggestion-icon suggestion-before"><i class="icon fas fa-fish" aria-hidden="true"></i></div>
</div>
<div class="winter" onclick="writeToDocument('winter')">
<div class="suggestion-text">
<p>Winter</p>
</div>
<div class="suggestion-icon suggestion-before"><i class="icon far fa-snowflake" aria-hidden="true"></i></div>
</div>
javaScript
for (let i = 0; i < suggestionIcon.length; i++) {
icon[i].addEventListener('mouseenter', function () {
suggestionIcon[i].classList.remove('suggestion-before');
suggestionIcon[i].classList.add('suggestion-after');
});
}
second warning html
<div id="subscribe-div" class="hide">
<div class="subscribe-container">
<div class="subscribe-header">
<h3>To Subscribe Please Fill The Form</h3>
</div>
<div class="subscribe-form">
<div id="closeSubscribe" class="close-subscribe">
<p class="remove">Close</p><i class="far fa-times-circle" aria-hidden="true"></i>
</div>
<form onsubmit="return sendMail(this);">
<input type="text" name="name" class="name-input" id="subscriberName" placeholder="Name"
required />
<input type="text" name="emailaddress" class="email-input" id="subscriberEmail"
placeholder="Email" required />
<button type="submit" class="subscribe-submit-btn">Submit</button>
</form>
</div>
<div id="subscribetUserMessage">
</div>
</div>
</div>
<div id="contact-div" class="hide">
<div class="contact-container">
<div class="contact-header">
<h3>Contact Us</h3>
</div>
<div class="conatct-form">
<div id="closeContact" class="close-contact">
<p class="remove">Close</p><i class="far fa-times-circle" aria-hidden="true"></i>
</div>
<form onsubmit="return sendMail(this);">
<input type="text" name="name" class="name-input" id="name" placeholder="Name" required />
<input type="text" name="emailaddress" class="email-input" id="emailAddress" placeholder="Email"
required />
<textarea name="message" class="message-form" id="message" placeholder="Message"
required></textarea>
<button type="submit" class="contact-submit-btn">Submit</button>
</form>
</div>
<div id="contactUserMessage">
</div>
</div>
</div>
java script
for (let i = 0; i < openSubscribe.length; i++) {
openSubscribe[i].addEventListener('click', function () {
if(contactDiv.classList.contains('hide')){
subscribe.classList.remove('hide');
}else{
alert("Please Close Contact Form");
}
});
}
I am using "Send Email from a Static HTML Form using Google Apps Mail" on my static site. But when I submit a form i have to refresh the whole page to submit another mail. If I don't reload the page success text don't vanish and send button don't work. So i am asking is there any way to refresh my form section without refreshing the whole page? please help me how to do it.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container mail text-center justify-content-center mt-5">
<div class="row">
<div class="col-12">
<h3>Contact Me Now!</h3>
<hr>
</div>
<div class="col-md-12 col-xs-12 form">
<form method="post" role="form"
action="https://script.google.com/macros/s/AKfycbwtLbTgUDGQxi9FY8Jks6bJs3TnYPBNU7rvO8b8_zrdyD4Pa6g/exec"
method="post" role="form" class="gform " data-email="">
<div class="form-row">
<div class="col form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name"
data-rule="minlen:4 " data-msg="Please enter at least 4 chars " required="true" />
</div>
<div class="col form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email"
data-rule="email " data-msg="Please enter a valid email " required="true" />
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject"
data-rule="minlen:4 " data-msg="Please enter at least 8 chars of subject "
required="true" />
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="5" data-rule="required"
data-msg="Please write something for me " placeholder="Message " required="true"></textarea>
</div>
<div class="text-center">
<button type="submit" class="btn btn-success w-100 submit">Send Message</button>
</div>
<div style="display:none" class="thankyou_message">
<div class="alert" role="alert"> <em>Thanks</em> for contacting me!
I will get back to you soon!<br>
<i class="fas fa-sync fa-spin"></i>
</div>
</div>
</form>
</div>
</div>
</div>
<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>
If the form is refreshing the page, you'll need to use preventDefault to cancel its default behaviour then use reset() to reset the form.
const form = document.querySelector('form');
form.addEventListener('submit', e => {
e.preventDefault();
[...form.elements].forEach(input => console.log(`${input.name}: ${input.value}`)); // Not Important
form.reset();
});
<form method="POST">
<input type="text" name="name" placeholder="name">
<input type="password" name="password" placeholder="password">
<button type="submit">Submit</button>
</form>
In JavaScript there is a function for forms which will reset the form clearing all the data in it, ready for another submit. This can be accomplished by running a JavaScript function on submit. This requires a couple changes in your code.
Firstly, we need to change this:
<button type="submit" class="btn btn-success w-100 submit">Send Message</button>
to this:
<button type="button" onclick="submitForm1()" class="btn btn-success w-100 submit">Send Message</button>
Once done, we can add some JavaScript to your page. If you have a JavaScript file linked to the page already, you can just add this code to that.
function submitForm1() {
let form = document.getElementsByClassName("gform");
form.submit();
form.reset();
}
You can also use document.getElementById("[id]"); and add an ID to your form. This is also preferable.
The first thing that comes to mind it's do all this on js so you can through ajax request send what you want. But I think it's not what you're looking for. You can't send data from page without refreshing, that's how it's work, php or html with some functional. You can change ...
<button type="button" class="btn btn-success w-100">Send Message</button>
... and collect all data by JavaScript and send it through ajax.
I am using local storage to save the username in the first-page.html and retrieving it into the second-page.html
But if I have two or more places in my second-page.html where I want the username to be retrieved, how can I achieve it using two different ids. Since the id once used cannot be used in another input field.
Can anyone please help.
Index.html:
<script>
function save(){
var fieldValue = document.getElementById('user').value;
localStorage.setItem('text', fieldValue);
}
</script>
<div class="form-group" id="login-fields">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"><span class="text--white glyphicon glyphicon-user"></span></i>
</span>
<input type="text" name="user" id="user" placeholder="Username" class="form-control" required/>
</div>
</div>
</div>
<input class="view sign-in-app" type="submit" value="Sign In" id="submit-login" onclick="save()" />
SecondPage.html
<script>
function load(){
var storedValue = localStorage.getItem('text');
if(storedValue){
document.getElementById('here').value = storedValue;
}
}
</script>
<body onload="load()">
<!-- first div -->
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<input type="text" name="userName" id="here" class="form-control" placeholder="Username" required>
</div>
</div>
</div>
<!-- second div -->
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group"> // change the id here
<input type="text" name="userName" id="here" class="form-control" placeholder="Username" required>
</div>
</div>
</div>
</body>
Just give each element different ids, really. No problem with that. And then when you set, set both:
if (storedValue) {
document.getElementById('here').value = storedValue;
document.getElementById('my-other-id').value = storedValue;
}
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