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>
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 am trying to show a table of reviews by taking the value of two dropdowns. When I was having one dropdown(positive, negative etc) that works fine but when I introduce another dropdown(food, drinks etc) it is not working.
It only works when I change the first dropdown and second dropdown but if I kept the first dropdown unchanged then it's not working
I tried by adding onchange method to the second dropdown. I just started with Javascript so not much idea about what to try.
function printResult(form) {
var output = {
{
output | safe
}
};
var sel = form.list;
var sel2 = form.list2;
var selectedVal = sel.options[sel.selectedIndex].value;
var selectedVal2 = sel2.options[sel.selectedIndex].value;
//document.getElementById("showResult").innerText = "Your number is: " + selectedVal;
//console.log(output);
document.getElementById("showResult").innerText = "Your number is: " + selectedVal2;
}
<form action="dropdown" onSubmit="return printResult(this);">
<label for="sentiment">Sentiment</label>
<div class="styled-select blue semi-square">
<select name="list">
<option value="all">All</option>
<option value="positive">Positive</option>
<option value="negative">Negative</option>
<option value="neutral">Neutral</option>
</select>
</div>
<div>
<select name="list2" onChange="printResult()">
<option value="menu">Menu Range</option>
<option value="food">Food</option>
<option value="drinks">Drinks</option>
<option value="desserts">Desserts</option>
</select>
</div>
<input type="submit" value="Filter">
<span id="showResult"></span>
</form>
You need to pass the form on the change too and return false to not submit the form:
function printResult(form) {
var sel = form.list;
var sel2 = form.list2;
var selectedVal = sel.value;
var selectedVal2 = sel2.value;
document.getElementById("showResult").innerText = "Your number is: " + selectedVal2;
return false;
}
<form action="dropdown" onSubmit="return printResult(this);">
<label for="sentiment">Sentiment</label>
<div class="styled-select blue semi-square">
<select name="list">
<option value="all">All</option>
<option value="positive">Positive</option>
<option value="negative">Negative</option>
<option value="neutral">Neutral</option>
</select>
</div>
<div>
<select name="list2" onChange="printResult(this.form)">
<option value="menu">Menu Range</option>
<option value="food">Food</option>
<option value="drinks">Drinks</option>
<option value="desserts">Desserts</option>
</select>
</div>
<input type="submit" value="Filter">
<span id="showResult"></span>
</form>
Perhaps you wanted this instead
window.addEventListener("load", function() {
document.getElementById("form1").addEventListener("submit", function(e) {
e.preventDefault(); // stop submission
var sel = this.list;
var sel2 = this.list2;
var selectedVal = sel.value;
var selectedVal2 = sel2.value;
document.getElementById("showResult").innerText = (selectedVal && selectedVal2) ? selectedVal + ":" + selectedVal2 : "Please select both";
});
});
<form action="dropdown" id="form1">
<label for="sentiment">Sentiment</label>
<div class="styled-select blue semi-square">
<select name="list">
<option value="">All</option>
<option value="positive">Positive</option>
<option value="negative">Negative</option>
<option value="neutral">Neutral</option>
</select>
</div>
<div>
<select name="list2">
<option value="">Menu Range</option>
<option value="food">Food</option>
<option value="drinks">Drinks</option>
<option value="desserts">Desserts</option>
</select>
</div>
<input type="submit" value="Filter">
<span id="showResult"></span>
</form>
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;
}
}
I'm a newbie and find very difficult to read and understand complex javascript from other's work.
I would like to ask some help in making a simplified jquery for me to use rather than using the complex code which I don't really understand.
First: this is a 5 step form consist of gender, first name, dob, email and password. There are validations in every steps.
See the complex code:
<script>
$(document).ready(function () {
var Fist = {
config: {
stepsSelector: $(".steps"),
nextSelector: $(".myButton"),
errorSelector: $(".error"),
indSelector: $(".steps-ind"),
form: "",
cur_step: 1,
max_step: 1,
offset: 278,
errorString: "This field is required",
clickEvent: "touchstart"
},
run: function(e) {
this.config.form = e;
var t = this;
var n = $(".regform").width();
t.config.offset = n;
if (typeof document.body.ontouchstart === "undefined") {
t.config.clickEvent = "click"
}
t.config.indSelector.find(".step-ind" + t.config.cur_step).addClass("step-ind-active");
t.config.nextSelector.on(t.config.clickEvent, function() {
t.process()
});
t.config.form.find("input").on("keypress", function(e) {
var n = e.keyCode ? e.keyCode : e.which;
if (n === 13) {
t.process()
}
});
t.config.indSelector.find("div").on(t.config.clickEvent, function() {
t.gotoStep($(this))
})
},
indicateStep: function(e) {
var t = this;
t.config.indSelector.find("div").removeClass("step-ind-active");
t.config.indSelector.find(".step-ind" + e).addClass("step-ind-active");
setTimeout(function() { $('.step'+e+' input, .step'+e+' select').focus() }, 500);
},
animateStep: function(e) {
var t = this;
t.config.stepsSelector.css({
transform: "translateX(-" + (e - 1) * t.config.offset + "px)"
}, function() {
t.config.form.find(".step" + e).find("input").focus()
})
},
process: function() {
var e = this;
var t = e.config.form.find(".step" + e.config.cur_step).find("input,select");
var n = false;
t.each(function() {
if (!e.validate($(this))) {
n = true
}
});
if (!n) {
e.config.cur_step++;
if (e.config.cur_step === 6) {
e.config.form.submit()
} else {
e.config.max_step = e.config.cur_step;
e.animateStep(e.config.cur_step);
e.indicateStep(e.config.cur_step);
if (e.config.cur_step === 5) {
e.config.nextSelector.val("Submit")
}
}
}
},
gotoStep: function(e) {
var t = e.text();
var n = this;
if (t < n.config.max_step) {
n.animateStep(t);
n.indicateStep(t);
n.config.cur_step = t;
if (t === 5) {
n.config.nextSelector.val("Submit")
} else {
n.config.nextSelector.val("Next")
}
} else {
n.process()
}
},
validate: function(e) {
var t = this;
t.config.errorSelector.hide();
e.removeClass("error-item");
var n = false;
if ($.trim(e.val()) === "") {
n = true;
t.config.errorString = "This field is required"
}
if (e.attr("name") === "email" && !t.validateEmail(e.val())) {
n = true;
t.config.errorString = "Invalid email address"
}
if (e.attr("name") === "firstname" && !t.validateName(e.val())) {
n = true;
t.config.errorString = "Invalid name"
}
if (n) {
t.config.errorSelector.empty().append(t.config.errorString).fadeIn("fast");
e.addClass("error-item");
return false
}
return true
},
validateEmail: function(e) {
var t = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return t.test(e)
},
validateInt: function(e) {
var t = /^\d{1,}$/;
return t.test(e)
},
validateName: function(e) {
var t = /^\w+(\s)?\w+(\s)?(\w+)?$/;
return t.test(e)
}
}
Fist.run($("#regform"));
});
Here is my HTML:
<div class="regform">
<div class="form-wrapper">
<form id="regform" method="post" action="http://www.test.com/signup">
<div class="steps step1">
<label>Your Gender?</label>
<div name="gender">
<div class="man-btn color" value="1">
<span>Man</span>
<div class="man" >
<i class="fa fa-male" aria-hidden="true"></i>
</div>
</div>
<div class="woman-btn" value="2">
<span>Woman</span>
<div class="woman">
<i class="fa fa-female" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="steps step2">
<label>First Name:</label>
<input type="text" name="firstname">
</div>
<div class="steps step3">
<label>What is Your Date of Birth?</label>
<select name="dobday" id="dobday" class="required">
<option value="">Day</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="dobmonth" id="dobmonth" class="required">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="dobyear" id="dobyear" class="required">
<option value="">Year</option>
<?php for($x=date("Y") - 18; $x >= 1918; $x--): ?>
<option value="<?php echo $x; ?>"><?php echo $x; ?></option>
<?php endfor; ?>
</select>
</div>
<div class="steps step4">
<label>Email:</label>
<input type="email" pattern="[^ #]*#[^ #]*" name="email">
</div>
<div class="steps step5">
<label>Password:</label>
<input type="password" name="password">
</div>
<div class="error">This field is required</div>
</form>
</div>
<div class="submit">
<input type="button" class="myButton" value="Next">
</div>
<div class="steps-ind">
<div class="step-ind1">1</div>
<div class="step-ind2">2</div>
<div class="step-ind3">3</div>
<div class="step-ind4">4</div>
<div class="step-ind5">5</div>
</div>
Please help me. Thank you so much for your help!
It's simple enough to add a new button! You could either change the gender to a select dropdown or you could add a new div like this:
<div class="bro-btn" value="3">
<span>Bro</span>
<div class="bro">
<i class="fa fa-bro" aria-hidden="true"></i>
</div>
</div>
Few things you have to note: The fa fa-bro is a reference to a class in your CSS that adds an icon corresponding to whatever gender is selected. If you were to add new buttons like above, you would have to find an icon that matches from Font Awesome.
I basically want to limit my choices in my form so that when a car is chosen as well as the transmission only certain colors may appear. I have created the form. The problem is creating the code in the Javascript file. I don't know how to make it so that if Car 1 is chosen as well as Automatic then for example only Black and blue appear as options. Im relatively new to coding and any help would be appreciated.
Thanks
HTML
<script src="Script\configurator.js" type="text/javascript"></script>
<form name="CarConfigurator">
<select name="Car_make" onchange="Transmission(this.value);">
<option value=" " selected="selected">None</option>
<option value="1">Audi RS6</option>
<option value="2">BMW M4</option>
<option value="3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select name="A_M" >
<option value="" selected="selected">None</option>
<option value="1" selected="selected">Automatic</option>
<option value="2" selected="selected">Manual</option>
</select>
<br>
<br>
<select name="Color">
<option value="" selected="selected">None</option>
<option value="1">Black</option>
<option value="2">Blue</option>
<option value="3">Red</option>
<option value="4">White</option>
<option value="5">Green</option>
</select>
</form>
Javascript
function Transmission(Car) {
var make = document.CarConfigurator.A_M;
make.options.length = 0;
if (Car == "1") {
make.options[make.options.length] = new Option('Automatic','1');
make.options[make.options.length] = new Option ('Manual','2');
}
if (Car =="2" ) {
make.options[make.options.length] = new Option('Manual','2');
}
if (Car == "3") {
make.options[make.options.length] = new Option('Automatic','3');
}
}
Is this what you want:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form name="CarConfigurator">
<select name="Car_make" onchange="Transmission();">
<option value=" " selected="selected">None</option>
<option value="1">Audi RS6</option>
<option value="2">BMW M4</option>
<option value="3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select name="A_M" onchange="Transmission();">
<option value="" selected="selected">None</option>
<option value="1" selected="selected">Automatic</option>
<option value="2" selected="selected">Manual</option>
</select>
<br>
<br>
<select name="Color" onchange="ChoicesMade();">
<option value="" selected="selected">None</option>
<option value="1">Black</option>
<option value="2">Blue</option>
<option value="3">Red</option>
<option value="4">White</option>
<option value="5">Green</option>
</select>
<div id="imageContainer" style="display: none;"><img src="http://buyersguide.caranddriver.com/media/assets/submodel/6873.jpg" /></div>
</form>
<script type="text/javascript">
function Transmission() {
var Car = document.CarConfigurator.Car_make.value;
var make = document.CarConfigurator.A_M.value;
var color = document.CarConfigurator.Color;
color.options.length = 0;
if (Car == "1" && make == '1') {
color.options.add(new Option('Black', '1'));
color.options.add(new Option('Blue', '2'));
}
else if(Car == '2' && make == '1')
{
color.options.add(new Option('Red', '3'));
color.options.add(new Option('White', '4'));
}
ChoicesMade();
}
function ChoicesMade()
{
var form = document.CarConfigurator;
var car = form.Car_make.value;
var make = form.A_M.value;
var color = form.Color.value;
if(car != ' ' && make != '' && color != '')
{
var imageContainer = document.querySelector('#imageContainer');
imageContainer.style.display = 'block';
}
}
</script>
</body>
</html>
You can use objects in JavaScript and then loop through each array in object to change options. For example
var cars = {
"Audi_RS6":{
"name":"Audi RS6",
"Automatic":["color_1","color_2"],
"Manual":["color_1","color_2"]
},
"BMW_M4":{
"name":"BMW M4",
"Manual":["color_1","color_2"]
},
"Mercedes_C63_AMG":{
"name":"Mercedes C63 AMG",
"Automatic":["color_1","color_2"]
}
};
values can be accessed like this
var result = cars.Audi_RS6.Manual[1];
Here you go Duncher, this code does exactly what you want
<!DOCTYPE html>
<html><head>
<title></title>
</head>
<body>
<form name="CarConfigurator">
<select id="car" name="Car_make">
<option value="" selected="selected">Which car?</option>
<option value="car1">Audi RS6</option>
<option value="car2">BMW M4</option>
<option value="car3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select id="trans" name="A_M">
<option value="" selected="selected">What trans?</option>
<option value="auto">Automatic</option>
<option value="man">Manual</option>
</select>
<br>
<br>
<select id="color" name="Color">
<option value="" selected="selected">What Color?</option>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="white">White</option>
<option value="green">Green</option>
</select>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="configurator.js"></script>
</body>
</html>
And the JavaScript:
$("#car").change(function () {
transmission();
});
$("#trans").change(function () {
transmission();
});
function transmission() {
if ($("#car").val() == "car1" && $("#trans").val() == "auto") {
$("option[value$='red']").hide();
$("option[value$='white']").hide();
$("option[value$='green']").hide();
} else {
$("option[value$='red']").show();
$("option[value$='white']").show();
$("option[value$='green']").show();
}
}
You will have to make a few tweaks to get your other car & trans combinations working how you want them to (i.e. displaying only the colors you want) by adding more if else statements in the transmission() method but this should get you on your way. This is using jQuery by the way.
Screen shot