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


Joined
Jan 17, 2023
Messages
8
Reaction score
0
<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?
 
Ad

Advertisements

Joined
Nov 13, 2020
Messages
227
Reaction score
29
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>
 
Joined
Jan 17, 2023
Messages
8
Reaction score
0
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/[email protected]/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>
 
Joined
Nov 13, 2020
Messages
227
Reaction score
29
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.
 
Joined
Jan 17, 2023
Messages
8
Reaction score
0
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
 
Joined
Nov 13, 2020
Messages
227
Reaction score
29
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.
 
Ad

Advertisements

Joined
Nov 13, 2020
Messages
227
Reaction score
29
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.
 
Joined
Jan 17, 2023
Messages
8
Reaction score
0
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")
});
});
 
Ad

Advertisements

Joined
Nov 13, 2020
Messages
227
Reaction score
29
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();
            });
    });
 
Joined
Jan 17, 2023
Messages
8
Reaction score
0
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.
 
Joined
Jan 17, 2023
Messages
8
Reaction score
0
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.
 
Joined
Jul 12, 2020
Messages
70
Reaction score
2
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
 
Joined
Nov 13, 2020
Messages
227
Reaction score
29
@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();
});
});
 
Last edited:
Ad

Advertisements

Joined
Jul 12, 2020
Messages
70
Reaction score
2
@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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top