I am trying to submit the form than display the responses of the form inside a new div that is currently hidden, however, each time I hit submit it goes to an error page. When I use onclick inside the submit button it works. However, I want it to check that the user has answered all the questions before submitting the form.
Here is my html for just the form:
<footer class="major container medium">
<div id="hideSignUp">
<h3>Signup Today!</h3>
<p>Simply enter your email and answer a few quick questions.<br>As an added BONUS, you'll receive an opportunity for a Free bottle of Grass-Fed, Low Carb Protein!</p>
<button onclick="buildQuiz()" class="button">GET MY EBOOK NOW</button>
</div>
<div id="showQuiz" style="display:none">
<form method="POST" id="quiz" onsubmit="return results();">
<select name="gender" id="gender" required>
<option value="">GENDER:</option>
<option value="male">MALE</option>
<option value="female">FEMALE</option>
</select>
<br>
<select name="age" id="age" required>
<option value="">AGE</option>
<option value="18-24">18-24</option>
<option value="25-34">25-34</option>
<option value="35-44">35-44</option>
<option value="45-54">45-54</option>
<option value="55-64">55-64</option>
<option value="65orolder">65 or older</option>
</select>
<br>
<select name="fitnessgoal" id="goal" required>
<option value="">WHAT IS YOUR FITNESS GOAL?</option>
<option value="loseW">LOSE WEIGHT</option>
<option value="buildM">BUILD MUSCLE</option>
<option value="betterH">BETTER OVERALL HEALTH</option>
<option value="trainE">TRAIN FOR AN EVENT</option>
</select>
<br>
<select name="vitamin" id="vitamin" required>
<option value="">DO YOU USE ANY VITAMINS OR SUPPLEMENTS?</option>
<option value="yes">YES</option>
<option value="no">NO</option>
</select>
<br>
<select name="meal" id="meal" required >
<option value="">WHAT KIND OF MEALS ARE YOU MOST INTERESTED IN?</option>
<option value="keto">KETO</option>
<option value="paleo">PALEO</option>
<option value="both">KETO + PALEO</option>
<option value="vegan">VEGAN</option>
</select>
<br>PLEASE ENTER YOUR EMAIL:<br>
<input type="email" name="email" id="email" required><br>
<input type="submit" value="Submit">
</form>
<div id="results" style="display:none">
GENDER: <p id="genderResult"></p>
AGE: <div id="ageResult"></div><br>
FITNESS GOAL: <div id="goalResult"></div><br>
VITAMINS/SUPPLEMENTS: <div id="vitaminsResult"></div><br>
MEAL PREFERENCE: <div id="mealResult"></div><br>
EMAIL: <div id="emailResult"></div>
</div>
</div>
</footer>
here is my javascript
var button = document.querySelector("button");
function buildQuiz(){
var signUpBtn = document.getElementById("hideSignUp")
var quiz = document.getElementById("showQuiz")
if(signUpBtn.style.display === "block" && quiz.style.display === "none"){
signUpBtn.style.display = "none";
quiz.style.display = "block";
} else{
signUpBtn.style.display = "block";
quiz.style.display = "none";
}
}
function genderResultsFunc(){
var gender = document.getElementById("gender");
var genderResult = gender.options[gender.selectedIndex].text;
document.getElementById("genderResult").innerHTML = genderResult;
}
function results(){
var quizResults = document.getElementById("results");
if(quizResults.style.display === "none"){
quizResults.style.display = "block";
quiz.style.display = "none";
genderResultsFunc();
}else {
quizResults.style.display = "none";
quiz.style.display = "block";
}
}
button.addEventListener("click", buildQuiz);
document.getElementById('quizResults').addEventListener('click', results);
Your submit handler is not returning anything
function results() {
var quizResults = document.getElementById("results");
if (quizResults.style.display === "none") {
quizResults.style.display = "block";
quiz.style.display = "none";
genderResultsFunc();
return true;
} else {
quizResults.style.display = "none";
quiz.style.display = "block";
return false;
}
}
Related
I have two dropdown lists and I want for example, if value=fetch selected then show second dropdown but it doesn't work.
I have tried with call external PHP file but I was stuck again.
I think that the problem is when I call the on change method but I don't know what to type.
function action(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value;
if (value == 'Fetch'){
document.getElementById("student_list").style.display = "block";
document.getElementById("subject_list").style.display = "none";
}
if(value == 'Count'){
document.getElementById("student_list").style.display = "block";
}
if(value == 'Percentage'){
document.getElementById("subject_list").style.display = "block";
}
}
<body>
<div class="main_container">
<form method="post">
<select name="action" id ="fetch" onchange="action(this.value);">
<option value="" id="action">--Select Action--</option>
<option value="Fetch">Fetch</option>
<option value="Count">Count</option>
<option value="Percentage">Percentage</option>
</select>
<select name="student_name" id ="student_list" onChange="" style="display:none;"> <!--onchange="getNext(this.value);" -->
<option value="">--Select Action --</option>
<option value="All">All Students</option>
<option value="NameS">Student Name</option>
</select>
</form>
</div>
You cannot use a function named "action" please see https://stackoverflow.com/a/37590405/5391965
You should retrieve your values within the function instead of passing it in parameters like so :
function displayStudentList(dropdown) {
let subject = document.getElementById("subject_list").value;
if (subject === 'Fetch') {
document.getElementById("student_list").style.display = "block";
document.getElementById("subject_list").style.display = "none";
}
if (subject === 'Count') {
document.getElementById("student_list").style.display = "block";
}
if (subject === 'Percentage') {
document.getElementById("subject_list").style.display = "block";
}
}
<div class="main_container">
<form method="post">
<select name="action" id="subject_list" onchange="displayStudentList()">
<option value="" id="action">--Select Action--</option>
<option value="Fetch">Fetch</option>
<option value="Count">Count</option>
<option value="Percentage">Percentage</option>
</select>
<select name="student_name" id ="student_list" onChange="" style="display:none;">
<!--onchange="getNext(this.value);" -->
<option value="">--Select Action --</option>
<option value="All">All Students</option>
<option value="NameS">Student Name</option>
</select>
</form>
</div>
I want to validate the select method with submit type button. I have created a form and under that, I have created the select method and given some options. By submit type, the onClick should validate my submit type with the options in the select method. How can I assign the value of option
to var t based on select?
According to the select option my var t should be changed.
If the value is volvo then it should print val11, similarly Saab= val14, opel= val82, Audi= val34
<select name="carlist" class="temp>
<option value="10">Volvo</option>
<option value="20">Saab</option>
<option value="30">Opel</option>
<option value="45">Audi</option>
</select>
<input type="submit" class="temp" value="submit the answer">
<script>
var t;
if () {
t=value;
} else if () {
t=value;
} else if () {
t=value;
}else {
t=value;
}
</script>
You can call a function on clicking the button. Inside the function get the text of the selected option:
function getValue(){
var el = document.querySelector('.temp');
var val = el.options[el.selectedIndex].text;
var t;
if(val == "Volvo")
t = 'val11';
else if(val == "Saab")
t = 'val14';
if(val == "Opel")
t = 'val82';
else if(val == "Audi")
t = 'val34';
alert(t);
}
<form>
<select name="carlist" class="temp">
<option value="10">Volvo</option>
<option value="20">Saab</option>
<option value="30">Opel</option>
<option value="45">Audi</option>
</select>
<input onclick="getValue()" type="submit" class="temp" value="submit the answer">
</form>
You can also think of using data attribute which is more cleaner and simpler:
function getValue(){
var el = document.querySelector('.temp');
var t = el.options[el.selectedIndex].getAttribute('data-val');
alert(t);
}
<form>
<select name="carlist" class="temp">
<option value="10" data-val="val11">Volvo</option>
<option value="20" data-val="val14">Saab</option>
<option value="30" data-val="val82">Opel</option>
<option value="45" data-val="val34">Audi</option>
</select>
<input onclick="getValue()" type="submit" class="temp" value="submit the answer">
</form>
You can do a few things, here's the simplest I could get away with.
function submitForm() {
const value = document.querySelector('[name="carlist"').value;
console.log(value);
return false; // to prevent it navigating away.
}
<form onsubmit="submitForm()">
<select name="carlist" class="temp">
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
<input type="submit" class="temp" value="submit the answer">
You can also have some validation running earlier, e.g. on change:
/**
* This function runs on form submit.
*/
function submitForm(event) {
const value = document.querySelector('[name="carlist"').value;
console.log(value);
// to prevent it navigating away.
event.preventDefault();
return false;
}
/**
* This function runs on selection change
*/
function validateCar(changeEvent) {
console.log('Change');
// do something with changeEvent
}
<form onsubmit="submitForm(event)">
<select name="carlist" class="temp" onchange="validateCar(event)">
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
<input type="submit" class="temp" value="submit the answer">
You can set an id attribute on the select element and then access it through a querySelector or getElementById.
<form id="carForm">
<select name="carlist" class="temp" id="car">
<option value="val11">Volvo</option>
<option value="val14">Saab</option>
<option value="val82">Opel</option>
<option value="val34">Audi</option>
</select>
</form>
let carForm = document.getElementById('carForm');
carForm.onsubmit = function(event) {
var t = document.getElementById('car');
...
}
See codepen example
My javascript code does not open my html modal. The IDs seem to be right so I don't understand where the error is.
var logModal = document.getElementById("fel-modal");
var logBtn = document.getElementById("button");
var closeLog = document.getElementsByClassName("closeLog")[0];
logBtn.onclick = function() {
logModal.style.display = "block";
}
closeLog.onclick = function() {
logModal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == logModal) {
logModal.style.display = "none";
}
}
Here is the html content that is supposed to show when clicking the button but it doesnt.
<button id="button">Anmäl fel</button>
<div id="fel-modal">
<form class="fel-rapport" action="" method="POST">
<span class="closeLog">×</span>
<h1>Anmäl fel</h1>
<select name="type">
<option value="">Välj typ av fel...</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="PHP">PHP</option>
<option value="SQL">SQL</option>
</select><br>
<select name="type">
<option value="">Välj hur allvarligt problemt är...</option>
<option value="Akut">Skadligt för systemet</option>
<option value="">klgdfjlgjkdfklj</option>
<option value="CSS">fldijklsdj</option>
</select><br>
<textarea type="text" value="" placeholder="Beskriv problemet..."></textarea><br>
<button type="submit" name="button">Anmäl</button>
</form>
</div>
The code you have given is correct (run the snippet below), check to see if their is some element above your element that could be messing with your event listener
var logModal = document.getElementById("fel-modal");
var logBtn = document.getElementById("button");
var closeLog = document.getElementsByClassName("closeLog")[0];
logBtn.onclick = function() {
logModal.style.display = "block";
}
closeLog.onclick = function() {
logModal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == logModal) {
logModal.style.display = "none";
}
}
<button id="button">Anmäl fel</button>
<div id="fel-modal" style="display:none;">
<form class="fel-rapport" action="" method="POST">
<span class="closeLog">×</span>
<h1>Anmäl fel</h1>
<select name="type">
<option value="">Välj typ av fel...</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="PHP">PHP</option>
<option value="SQL">SQL</option>
</select><br>
<select name="type">
<option value="">Välj hur allvarligt problemt är...</option>
<option value="Akut">Skadligt för systemet</option>
<option value="">klgdfjlgjkdfklj</option>
<option value="CSS">fldijklsdj</option>
</select><br>
<textarea type="text" value="" placeholder="Beskriv problemet..."></textarea><br>
<button type="submit" name="button">Anmäl</button>
</form>
</div>
I'm having trouble with validating my dropdown list with javascript. What I want is to display an error message underneath the field inside span tags if the user hasn't selected any options. I've checked almost every tutorials out there but no luck.
Here is the code for the form:
<form name="subform" id="subform" action="submit.php" onsubmit="return checkForBlank()" method="POST" enctype="multipart/form-data">
<div class="md-form">
<input type="text" id="subcim" name="subcim" class="form-control"><span class="error_form" id="subcim_error_message"></span>
<label for="subcim" class="">Title</label><br>
</div>
<div class="md-form">
<select class="mdb-select" id="subcat" name="subcat"><span class="error_form" id="subcat_error_message"></span>
<option value="0" selected>Please select an option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<label id="subcat_info">Category</label><br>
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
</form>
and here is the Javascript code (the first if statement validates the input field in the form:
function checkForBlank() {
if(document.getElementById("subcim").value == "") {
document.getElementById("subcim_error_message").textContent="You must add a title!";
return false;
} else if(document.getElementById("subcim").value.length < 5 || document.getElementById("subcim").value.length > 80) {
document.getElementById("subcim_error_message").textContent="The title must be between 5 and 80 characters!";
return false;
}
var result = document.getElementById('subcat').value;
if (result === "0") {
document.getElementById("subcat_error_message").textContent="You must select an option!";
return false;
}
}
I'm using
onsubmit="return checkForBlank()"
inside the form tag.
When I submit the form without selecting an option, the form seems to be submitted properly, but it does not display the error message.
Any help is appreciated
function Validate() {
var subcat= document.getElementById("subcat");
if (subcat.value == "") {
//If the "Please Select" option is selected display error.
alert("Please select an option!");
return false;
}
return true;
}
onsubmit ="return Validate()"
function Validate() {
var subcat= document.getElementById("subcat");
if (subcat.value == "0") {
//If the "Please Select" option is selected display error.
alert("Please select an option!");
return false;
}
return true;
}
onsubmit ="return Validate();"
Change your syntex from
<div class="md-form">
<select class="mdb-select" id="subcat" name="subcat"><span class="error_form" id="subcat_error_message"></span>
<option value="0" selected>Please select an option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<label id="subcat_info">Category</label><br>
</div>
To syntex as below
<div class="md-form">
<select class="mdb-select" id="subcat" name="subcat">
<option value="0" selected>Please select an option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<span class="error_form" id="subcat_error_message"></span>
<label id="subcat_info">Category</label><br>
</div>
The only mistake that you are doing is putting your error span within your select tag it self which is not a predefined HTML format for select tag. As you can see that after putting your span tag out side your select tag every thing will work as you want.
Html
<div class="md-form">
<select class="mdb-select" id="subcat" name="subcat">
<option value="0" selected>Please select an option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<span class="error_form" id="subcat_error_message"></span>
<label id="subcat_info">Category</label><br>
</div>
JavaScript
function Validate() {
var subcat= document.getElementById("subcat");
if (subcat.value == "0") {
//If the "Please Select" option is selected display error.
document.getElementById("subcat_error_message").innerHTML="Error Message";
//OR
document.getElementById("subcat_error_message").textContent="Error Message";
return false;
}
return true;
}
onsubmit ="return Validate();"
I'm trying to show or hide the div based on the option selected. When Customer is selected, it should show retCustDetails and when Trade is selected it should show tradeCustDetails.
Please let me know what I'm missing on the codes below.
<h2>Place order</h2>
Your details
Customer Type: <select id="show" name="customerType" onchange="change()">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails">
Forename <input type="text" name="forename" id="forename" />
Surname <input type="text" name="surname" id="surname" />
</div>
<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
Company Name <input type="text" name="companyName" id="companyName" />
</div>
JS
function change(obj) {
var selectBox = obj;
var selected = selectBox.options[selectBox.selectedIndex].value;
var retCustDetails = document.getElementById("retCustDetails");
var tradeCustDetails = document.getElementById("tradeCustDetails");
if(selected === '1'){
retCustDetails.style.display = "block";
tradeCustDetails.style.display = "none";
}
else{
retCustDetails.style.display = "none";
tradeCustDetails.style.display = "block";
}
}
There were few minor mistakes in your code, I have corrected it to make it work -
<body>
<h2>Place order</h2>
Your details
Customer Type: <select id="show" name="customerType" onchange="change(this)">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails" style="display:none">
Forename <input type="text" name="forename" id="forename" />
Surname <input type="text" name="surname" id="surname" />
</div>
<div id="tradeCustDetails" class="custDetails" style="display:none">
Company Name <input type="text" name="companyName" id="companyName" />
</div>
<script>
function change(obj) {
var selectBox = obj;
var selected = selectBox.options[selectBox.selectedIndex].value;
var retCustDetails = document.getElementById("retCustDetails");
var tradeCustDetails = document.getElementById("tradeCustDetails");
if(selected == 'ret'){
retCustDetails.style.display = "block";
tradeCustDetails.style.display = "none";
}
else{
retCustDetails.style.display = "none";
tradeCustDetails.style.display = "block";
}
}
</script>
</body>
You are using visibility:hidden in your html but in your js your are changing the display property.
Change visibility:hidden to display:none.
Use this as change funtion's parameter like onchange="change(this)"
And JS function change to following.
function change(obj) {
var selectBox = obj.value;
var retCustDetails = document.getElementById('retCustDetails');
var tradeCustDetails = document.getElementById('tradeCustDetails');
if(selectBox == 'ret'){
retCustDetails.style.display = "block";
tradeCustDetails.style.display = "none";
}
else{
retCustDetails.style.display = "none";
tradeCustDetails.style.display = "block";
}
}
This is an alternative method. This too works. Cheers !
<script>
jQuery(function($) {
$('#show').change(function(){
var val = $(this).val();
if( val == 'ret') {
$('#retCustDetails').show();
$('#tradeCustDetails').hide();
} else if(val == 'trd') {
$('#tradeCustDetails').show();
$('#retCustDetails').hide();
} else {
$('#tradeCustDetails').hide();
$('#retCustDetails').hide();
}
});
});
</script>
<h2>Place order</h2>
Your details
Customer Type: <select id="show" name="customerType">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails" style="display:none">
Forename <input type="text" name="forename" id="forename" />
Surname <input type="text" name="surname" id="surname" />
</div>
<div id="tradeCustDetails" class="custDetails" style="display:none">
Company Name <input type="text" name="companyName" id="companyName" />
</div>
pass the this as argument to the change() method. Also change the if condition as like below
if(selected === 'ret'){
//...
}
because you get the selected value, it give either "ret" or "trd"
Change the tradeCustDetails visibility: hidden to display: none
Try this code.
function change(obj) {
//alert(obj);
var selectBox = obj;
var selected = selectBox.options[selectBox.selectedIndex].value;
var retCustDetails = document.getElementById("retCustDetails");
var tradeCustDetails = document.getElementById("tradeCustDetails");
if(selected === 'ret'){
retCustDetails.style.display = "block";
tradeCustDetails.style.display = "none";
}
else{
retCustDetails.style.display = "none";
tradeCustDetails.style.display = "block";
}
}
<h2>Place order</h2>
Your details
Customer Type: <select id="show" name="customerType" onchange="change(this)">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails">
Forename <input type="text" name="forename" id="forename" />
Surname <input type="text" name="surname" id="surname" />
</div>
<div id="tradeCustDetails" class="custDetails" style="display:none">
Company Name <input type="text" name="companyName" id="companyName" />
</div>
Hope this will help you.