Form won't go to "thank you" page when submitted.

andres824 · Jan 17, 2023

<form id="myForm" action="thanks.html" method="get">

const form = document.getElementById("myForm");

const elements = form.elements;

var firstName = elements["first-name"]
var lastName = elements["last-name"]
var email = elements["email"]
var phone = elements["phone"]

var location;
var service;
var referrer = elements.referrer;
var availability = elements.availability

form.addEventListener("submit", (event) => {
event.preventDefault();
console.log("clicked")

elements.location.forEach(element => {
if (element.checked) {
location = element
}
});

elements["detail-type"].forEach(element => {
if (element.checked) {
service = element
}
});
var info = {
firstName: firstName.value,
lastName: lastName.value,
email: email.value,
phone: phone.value,
location: location.value,
service: service.value,
referrer: referrer.value,
availability: availability.value,
}
console.log(info)
emailjs.send("service_ldwpana","template_f8di4e5", info).then((e) => {
alert("done")
});
});

Here is the code for the html of the form and javascript. Can anyone help me out?

BigDady · Jan 17, 2023

I did not read your JS. Does it do anything special?
FORMs need to be closed and can operate with a submit button just fine SO:

Code:

    <body>
        <form id="myForm" action="thanks.html" method="post">
            <input type="submit">
        </form>
    </body>

andres824 · Jan 18, 2023

This is my full code for that page, but it is still not working. Could it be the "method" that needs to be "post"?

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Schedule Today</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
<script type="text/javascript">
(function () {
emailjs.init('fytpvV10_jkZxzfJe');
})();
</script>
</head>
<body id="schedule">
<header>
<nav>
<ul>
<li ><a href="index.html" class="menu-list">Home</a></li>
<li ><a href="schedule.html" class="menu-list">Schedule</a></li>
<li ><a href="interior.html" class="menu-list">Interior</a></li>
<li ><a href="exterior.html" class="menu-list">Exterior</a></li>
<li ><a href="about-us.htm" class="menu-list">About</a></li>
<li ><a href="contact.html" class="menu-list">Contact</a></li>
</ul>
</nav>
</header>
<h1 id="schedule-header">Convinient hours that fit <br></br>your schedule!</h1>
<p id="schedule-text">Enter your information below to schedule a detail!</p>
<form id="myForm" action="thanks.html" method="get">
<fieldset id="personal-info">
<label for="first-name">First Name: <input id="first-name" type="text" required name="first-name"/></label>
<label for="last-name">Last Name: <input id="last-name" type="text" required name="last-name"/></label>
<label for="email">Email: <input id="email" type="email" required name="email"/></label>
<label for="phone">Phone Number: <input id="phone" type="tel" length="7" required name="phone-number"/></label>
</fieldset>
<fieldset id="location">
<label>Select Location:</label>
<label for="mechanicsburg-button"><input type="radio" name="location" id="mechanicsburg-button" class="inline" value="mechanicsburg"/>Mechanicsburg </label>
<label for="lancaster-button"><input type="radio" name="location" id="lancaster-button" class="inline" value="lancaster"/>Lancaster </label>
<label>We are mobile and will send a team closest to you!</label>
</fieldset>
<fieldset id="service">
<label>Select Service:</label>
<label for="interior-button"><input type="radio" name="detail-type" id="interior-button" class="inline" value="interior"/> Interior Detail</label>
<label for="exterior-button"><input type="radio" name="detail-type" id="exterior-button" class="inline" value="exterior"/> Exterior Detail</label>
<label for="complete-button"><input type="radio" name="detail-type" id="complete-button" class="inline" value="complete"/> Complete Detail</label>
<label for="liability"><input type="checkbox" required id="liability" name="liability" class="inline"/> I have read and accept the <a id="liability" href="#">liability waiver</a></label>
</fieldset>
<fieldset id="quote-availability">
<label for="car-picture">Upload pictures of your car for a free quote! <input type="file" id="car-picture" name="car-picture" multiple/></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="select">(Select One)</option>
<option value="friend">Referred from a friend</option>
<option value="flyer">Flyer or business card</option>
<option value="social">Social Media</option>
<option value="other">Other</option>
</select>
</label>
<label for="availability">Provide your availabilty: <textarea id="availability" rows="5" cols="30" placeholder="i.e. Mondays from 10am-5pm..." name="availability"></textarea></label>
</fieldset>
<input type="submit" value="Submit"></input>
</form>
<script defer src="index.js"></script>
</body>

</html>

BigDady · Jan 19, 2023

I would use post. I gave it to you with my first reply.
Did you fill out the form before submitting it? You have a number of fields that are required and if you don't enter the info nothing happens.
I filled it out and the form works, but then I do not have your js code to contend with.

PS I don't have your CSS either so the form looks bad to me -> the input for email seems to be in the wrong place.

andres824 · Jan 19, 2023

BigDady said:
I would use post. I gave it to you with my first reply.
Did you fill out the form before submitting it? You have a number of fields that are required and if you don't enter the info nothing happens.
I filled it out and the form works, but then I do not have your js code to contend with.

PS I don't have your CSS either so the form looks bad to me -> the input for email seems to be in the wrong place.

do you have replit? I can share it the code with you on there so you can see everything better

BigDady · Jan 20, 2023

I do not have replit, but I did use the above code to generate a page in a browser (firefox) and tested it there. I'm not worried that the CSS would change anything, but you can test that by just commenting them out and running the code.

andres824 · Jan 21, 2023

When you ran it did it work?

BigDady · Jan 21, 2023

Do you not read my replies?

I would use post. I gave it to you with my first reply.
Did you fill out the form before submitting it? You have a number of fields that are required and if you don't enter the info nothing happens.
I filled it out and the form works, but then I do not have your js code to contend with.

c1lonewolf · Jan 21, 2023

uh guys, is "defer" an actual attribute? If so what's it for?

Code:

</form>
<script defer src="index.js"></script>
</body>

andres824 · Jan 23, 2023

BigDady said:
Do you not read my replies?

This is my js code.
const form = document.getElementById("myForm");

const elements = form.elements;

var firstName = elements["first-name"]
var lastName = elements["last-name"]
var email = elements["email"]
var phone = elements["phone"]

var location;
var service;
var referrer = elements.referrer;
var availability = elements.availability

form.addEventListener("submit", (event) => {
event.preventDefault();
console.log("clicked")

elements.location.forEach(element => {
if (element.checked) {
location = element
}
});

elements["detail-type"].forEach(element => {
if (element.checked) {
service = element
}
});
var info = {
firstName: firstName.value,
lastName: lastName.value,
email: email.value,
phone: phone.value,
location: location.value,
service: service.value,
referrer: referrer.value,
availability: availability.value,
}
console.log(info)
emailjs.send("service_ldwpana","template_f8di4e5", info).then((e) => {
alert("done")
});
});

andres824 · Jan 23, 2023

c1lonewolf said:
uh guys, is "defer" an actual attribute? If so what's it for?

Code:

</form> <script defer src="index.js"></script> </body>

I'm not sure. My friend wrote the js for the most part

BigDady · Jan 23, 2023

That javascript is hijacking the form and sending info to
.send("service_ldwpana", "template_f8di4e5", info)
Question: does it work and do you get an alert message of -> done?

If you change that alert to "return" things will go smoothly.

Code:

        emailjs
            .send("service_ldwpana", "template_f8di4e5", info)
            .then((e) => {
                return();
            });
    });

andres824 · Jan 23, 2023

BigDady said:
That javascript is hijacking the form and sending info to
.send("service_ldwpana", "template_f8di4e5", info)
Question: does it work and do you get an alert message of -> done?

If you change that alert to "return" things will go smoothly.

Code:

emailjs .send("service_ldwpana", "template_f8di4e5", info) .then((e) => { return(); }); });

I will try it today and let you know if it works.

andres824 · Jan 23, 2023

BigDady said:
That javascript is hijacking the form and sending info to
.send("service_ldwpana", "template_f8di4e5", info)
Question: does it work and do you get an alert message of -> done?

If you change that alert to "return" things will go smoothly.

Code:

emailjs .send("service_ldwpana", "template_f8di4e5", info) .then((e) => { return(); }); });

OK that did work!! It goes to the thank you page now. However, I am not receiving the email to my email account that contains all the information. I am using emailjs as the service to do that, and it was working before, but this time it went to the thank you page but did not send me the information.

c1lonewolf · Jan 24, 2023

all these new ways to write javascript seem to be more complicated...oh for the days when all you had to do was write onsubmit="validate(this);" and you could validate, submit and send visitors to a response page.

Question to the OP, what happens to the form information and submission when javascript has been disabled? heheh

BigDady · Jan 25, 2023

@c1lonewolf - I already said it worked for me without the CSS or the JS.
@andres824 - All I did was have you replace the alert("done") which should not have stoped the email, but looking at the code I sent I see that somehow the email line was cut in two which might have caused the problem
So let's do things over.
Under the console.log(info) info line replace everything all the way to the end of the code with

Code:

emailjs.send("service_ldwpana","template_f8di4e5", info).then((e) => {
return();
});
});

c1lonewolf · Jan 26, 2023

@BigDady - I was posing the question to the OP because they're using javascript for validation and form submission. And you know as well as I do, that for those who have javascript disabled, there will be no validation and no form being sent. Meaning the form is just a bloated link to a thank you page.

BigDady · Jan 27, 2023

Ah Yes.

embarrassed

Php modal form to email	1	Aug 28, 2024
math calculations, form population and submission	1	Dec 11, 2007
sendmail won't send me email but will the person filling out form	0	Nov 6, 2005
Can't make this page work	6	Mar 8, 2006
Problem Loading Data in to a Textbox located in MultiView that is in a Login View	0	Mar 7, 2007
comp.lang.c Answers (Abridged) to Frequently Asked Questions (FAQ)	0	Mar 1, 2008
comp.lang.c Answers (Abridged) to Frequently Asked Questions (FAQ)	0	Dec 15, 2007
comp.lang.c Answers (Abridged) to Frequently Asked Questions (FAQ)	0	Nov 1, 2007

Form won't go to "thank you" page when submitted.

andres824

BigDady

andres824

BigDady

andres824

BigDady

andres824

BigDady

c1lonewolf

andres824

andres824

BigDady

andres824

andres824

c1lonewolf

BigDady

c1lonewolf

BigDady

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads