window.alert not working when a form quiz is submitted - javascript

So, I am trying to make a quiz with html/js. I searched up how to reference an ID from js but even then the js function isn't working when I click the D option and submit.
Basically, I'm trying to get a window alert once someone has pressed submit on an answer option.
What the code outputs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="missingletter.css">
<title>Missing letter</title>
</head>
<body>
<div class="images"></div>
<div class="wordToGuess"></div>
<form action="">
<p class="question">What is the missing letter?</p>
<!-- image of cat -->
<p class="cat">_ A T</p>
<input type="radio" id="c" name="cat" value="cat">
<label for="cat" class="answer options">C</label><br><br>
<input type="radio" id="m" name="mat" value="mat">
<label for="cat" class="answer options">M</label><br> <br>
<input type="radio" id="d" name="dat" value="dat">
<label for="cat" class="answer options">D</label><br> <br>
<input type="submit" value="submit">
</form>
<script>
if ($('radio').attr("d") == "submit") {
window.alert("Correct")
} else {
window.alert("try again")
}
</script>
<div class="letters"></div>
</body>
</html>


You have a multitude problems.
To use the jQuery $ function you must load the jQuery library. You can get it from its website
The selector radio does not look up an element by its ID, it looks up all <radio> elements… which don't exist in your document or in HTML. To look up an element by its ID you need $('#The_ID')
attr(...) fetches the value of the attribute with the name passed from the selected element. None of your elements have d="something".
You are running this code while the document loads, which is before the user will have had a chance to pick an option. You need to listen for the submit event (and then stop the form from submitting to the server)
Your checkboxes all have different names, so multiple of them can be selected at once
The for attribute of a <label> has to match the id of the input it is associated with.
Assuming your goal is:
WHEN the user clicks the submit button
FIND which checkbox they checked
CHECK if they picked option dat (although that is the wrong answer)
Then you need something along the lines of:
$('form').on('submit', event => {
event.preventDefault();
const choice = $('input[name="missing"]:checked').val();
if (choice === 'dat') {
alert("Correct");
} else {
alert("try again");
}
});
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<form action="">
<p class="question">What is the missing letter?</p>
<!-- image of cat -->
<p class="cat">_ A T</p>
<input type="radio" id="c" name="missing" value="cat">
<label for="c" class="answer options">C</label><br><br>
<input type="radio" id="m" name="missing" value="mat">
<label for="m" class="answer options">M</label><br> <br>
<input type="radio" id="d" name="missing" value="dat">
<label for="d" class="answer options">D</label><br> <br>
<input type="submit" value="submit">
</form>


You must add a submit listener to the form. From there, you can check if the value is correct to show the correct alert. When using radio button, use the same name attribute to group them.
<form id="myForm" action="">
<p class="question">What is the missing letter?</p>
<!-- image of cat -->
<p class="cat">_ A T</p>
<input type="radio" name="answer" value="cat">
<label for="cat" class="answer options">C</label><br><br>
<input type="radio" name="answer" value="mat">
<label for="cat" class="answer options">M</label><br> <br>
<input type="radio" name="answer" value="dat">
<label for="cat" class="answer options">D</label><br> <br>
<input type="submit" value="submit">
</form>
$('#myForm').on('submit', function (e) {
e.preventDefault();
if ($('#myForm input[name="answer"]:checked').val() === 'cat') {
window.alert("Correct");
} else {
window.alert("try again");
}
});


Try This
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="missingletter.css">
<title>Missing letter</title>
</head>
<body>
<div class="images"></div>
<div class="wordToGuess"></div>
<form action="" id="theform">
<p class="question">What is the missing letter?</p>
<!-- image of cat -->
<p class="cat">_ A T</p>
<input type="radio" name="option" value="cat">
<label for="cat" class="answer options">C</label><br><br>
<input type="radio" name="option" value="mat">
<label for="cat" class="answer options">M</label><br> <br>
<input type="radio" name="option" value="dat">
<label for="cat" class="answer options">D</label><br> <br>
<button type="submit" id="btn">Submit</button>
</form>
<script>
const btn = document.querySelector('#btn');
btn.onclick = function(){
const options = document.querySelectorAll('input[name="option"]');
let selectedValue;
for (const option of options) {
if (option.checked) {
selectedValue = option.value;
break;
}
}
if(selectedValue == 'cat'){
alert('Correct.')
}else{
alert('Try Again.')
}
};
</script>
<div class="letters">
</div>
</body>
</html>

Related

Displaying forms one next another [JS]

I'm just doing a short form with 2 questions. I want the second one to appear onclick of the submit button of first question. I've tried several things but doesn't works :/
It seems to reload the page everytime i click on the submit button.
I begin so maybe it's a really stupid error.
Thanks !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form id="question1">
<h2>Salamèche est-il de type feu ?</h2>
<div class="row">
<div>
<input type="radio" name="question1" id="oui1" value="oui" >
<label for="oui1" class="oui">OUI</label>
</div>
<div>
<input type="radio" name="question1" id="non1" value="non">
<label for="non1" class="non ">NON</label>
</div>
</div>
<input type="submit" value="Submit">
</form>
<form id="question2">
<h2>Tiplouf est-il de type plante ?</h2>
<div class="row">
<div>
<input type="radio" name="question1" id="oui1" value="oui" >
<label for="oui2" class="oui">OUI</label>
</div>
<div>
<input type="radio" name="question1" id="non1" value="non">
<label for="non2" class="non ">NON</label>
</div>
</div>
<input type="submit" value="Submit">
</form>
<form id="question3">
<h2>Tiplouf est-il de type plante ?</h2>
<div class="row">
<div>
<input type="radio" name="question1" id="oui1" value="oui" >
<label for="oui3" class="oui">OUI</label>
</div>
<div>
<input type="radio" name="question1" id="non1" value="non">
<label for="non3" class="non ">NON</label>
</div>
</div>
<input type="submit" value="Submit">
</form>
<script src="js/script.js"></script>
</body>
</html>
The Javascript
function changeform(x){
let nextForm = x + 1;
for (i=0; i <= x; i++) {
document.getElementById(i).addEventListener('submit', function() {
$('question' + i).css('display','none');
$('question' + nextForm).css('display','block');
});
}
}
function checked(x) {
for (i=0; i <= x; i++) {
var oui = 'oui'+i;
var non = 'non'+i;
console.log(oui);
$(oui).addEventListener('click', function() {
$(oui).className = 'cheked';
});
$(non).addEventListener('click', function() {
$(non).className = 'cheked';
});
}
}
checked(3);
changeform(3);

submit event always reloads the browser window to stop that write
document.getElementById(i).addEventListener('submit', function(event) {
event.preventDefault(); // this won't let submit action to reload window
$('question' + i).css('display','none');
$('question' + nextForm).css('display','block');
});

JS onclick event is not triggered

Trying to make a question and answer program which shows question 2 once user presses "next question" button. I have provided the HTML, javascript and style.css file to show my work. The problem isn't with the code going visible but clicking button does nothing
My code:
function question2() {
document.getElementById("Question2_visible").style.visibility =
"visible";
}
#Question2_visible {
visibility: hidden;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<script src="main.js"></script>
</head>
<body>
<h1>Answer these questions:</h1>
<form id="quiz" name="quiz">
<p class="questions">What is your name?</p>
<input id="textbox" type="text" name="question1">
<input id="button" type="button" value="Next Question pls!" onclick=" question2();">
<div id="Question2_visible">
<p class="questions">What is your age??</p>
<input type="radio" id="mc" name="question2" value="<18"> more
<br>
<input type="radio" id="mc" name="question2" value=">18"> less
<br>
</div>
</form>
</body>
</html>

Your name="question2" interferes with the question2 function.
If you have name conflict, call the function on window object:
onclick="window.question2()"

HTML/Javascript && Condition in an If Statement

I am sure there is a very simple fix to this and that I am most likely not doing this the most efficient way possible.
I am trying to create an if statement that will check to see if multiple radio buttons are selected in multiple questions. If they are selected, I would like an alert box to pop up with a certain message. There will be many selection combinations possible so I am assuming many if/else statements(?)
The Javascript in question is located at the bottom.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Spigit Input Form</title>
<meta name="description" content="Spigit Input Form">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<link rel="stylesheet" href="Project_File_CSS.css">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery_spigit.js"></script>
</head>
<body>
<!--<script src="js/scripts.js"></script>
<script src="New_File_JS.js"></script>-->
<script type="text/javascript" src="selection_storage.js"></script>
<!--<script type="text/javascript" src="recommendation_logic.js"></script>-->
<!---------------------------------------------------------Operating Company Question----------------------------------->
<form name="operatingCompany">
<h3>What Operating Company Are You Employeed With?</h3>
<input type="radio" name="opco" value="GPC" >GPC</br>
<input type="radio" name="opco" value="APC" >APC</br>
<input type="radio" name="opco" value="MPC" >MPC</br>
<input type="radio" name="opco" value="Gulf" >Gulf</br>
<input type="radio" name="opco" value="SCS" >SCS</br></br>
<input type="button" value="Display User Selection" onclick=get_opco() />
</form>
<p id="opco_result"> </p></br>
<!---------------------------------------------------------Prototyped Question----------------------------------->
<form name="prototyped">
<h3>Has the innovation been prototyped?</h3>
<input type="radio" name="prototyped" value="Yes" >Yes</br>
<input type="radio" name="prototyped" value="No" >No</br></br>
<input type="button" value="Display User Selection" onclick=get_prototype() />
</form>
<p id="prototyped_result"> </p></br>
<!--------------------------------------------------------Adopted or Tested Question---------------------------->
<form name="adopted_tested">
<h3>Has the innovation been adobpted or tested?</h3>
<input type="radio" name="adopt" value="Yes" >Yes</br>
<input type="radio" name="adopt" value="No" >No</br></br>
<input type="button" value="Display User Selection" onclick=get_adopt_test() />
</form>
<p id="adopted_tested_result"> </p></br>
<!------------------------------------------------------Can it make money Question------------------------------->
<form name="makeMoney">
<h3>Is this a product or service that can make money?</h3>
<input type="radio" name="money" value="Yes" >Yes</br>
<input type="radio" name="money" value="No" >No</br></br>
<input type="button" value="Display User Selection" onclick=get_money() />
</form>
<p id="makeMoney_result"> </p></br>
<!---------------------------------------------------Alabama Power Specific Question----------------------------->
<h3>What is your innovative idea to help Alabama Power improve safety, grow revenue, reduce cost, or increase operational efficiency?</h3>
<textarea id="alabamaPower" rows="8" cols="50">
</textarea> </br></br>
<input type="button" value="Display User Input" onclick=textareacapture() />
<p id="result"> </p></br>
<!------------------------------------------------IT Specific Question------------------------------------------->
<form name="innovativeTechnology">
<h3>Is your innovation an innovative technology or process that boosts the company's productivity or brings additional value from a vendor relationship?</h3>
<input type="radio" name="innovative" value="Yes" >Yes</br>
<input type="radio" name="innovative" value="No" >No</br></br>
<input type="button" value="Display User Selection" onclick=get_innovative() />
</form>
<p id="innovativeTechnology_result"> </p></br>
<input type="button" value="Submit Form" onclick=get_recommendation() />
<script>
function get_recommendation(){
if((document.operatingCompany.opco[0,1,2,3,4].checked) && (document.prototyped.prototyped[0,1].checked) && (document.adopted_tested.adopt[0,1].checked))
{
alert("Everyday Solutions");
}
}
</script>
</body>
</html>

Use this test to identify whether any radiobutton has been checked:
($(":checked").length > 0)
You may refine the selector if you are only interested in a subset of the radio buttons or checkboxes on the page.

Have you checked at run time what the values are in your variables in the if? Also, currently you are checking that all of them are checked. Do you want to check if some of them are checked?
Also, are you sure you want to use an alert. A modal is really preferable. An alert will block the event loop.

Logical and(&&)
if (x>5 && x<10)
{
alert("your enter value between range 6 to 9");
}
Here, is javascript code you enter only 6 to 9 between range

And what about betwwen like ine PHP/C ?
if (5 < x < 10) {
...
}

Javascript for sliding down a form

Guys I have this html with the following code.It has 2 forms.formA and form B.I have icluded a java script also.I want to make the formB slide down,when I click the link "Internet banking" above form A and when i click on "card payment" vice versa.
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>Payment Page</title>
<link rel="stylesheet" href="demo1.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.creditCardValidator.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
this is the javascript I added.
<script type="text/javascript">
$(document).ready(function(){
$("#formA").click(function(){
$("#internet").slideToggle("slow");
});
});
</script>
<div class="demo">
<form id="formA">
Card Payment
Internet banking
<h2>Card Payment</h2>
<input type='hidden' id='ccType' name='ccType' />
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
<label for="card_number">Card number</label>
<input type="text" name="card_number" id="card_number">
<div class="vertical">
<label for="expiry_date">Expiry date <small>mm/yy</small>
</label>
<input type="text" name="expiry_date" id="expiry_date" maxlength="5">
<label for="cvv">CVV</label>
<input type="text" name="cvv" id="cvv" maxlength="3">
</div>
<div class="vertical maestro">
<label for="issue_date">Issue date <small>mm/yy</small>
</label>
<input type="text" name="issue_date" id="issue_date" maxlength="5"> <span class="or">or</span>
<label for="issue_number">Issue number</label>
<input type="text" name="issue_number" id="issue_number" maxlength="2">
</div>
<label for="name_on_card">Name On card</label>
<input type="text" name="name_on_card" id="name_on_card">
<input type="submit" value="Pay Now !">
</form>
<form id="formB">
<div id="internet">
Card Payment
Internet banking
<h2>Internet Banking</h2>
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
</form>
</div>
</body>
here is the #http://jsfiddle.net/pz83w/5/ demo.Im new to java script,so this is my experiment.Couldsomeone figure how to do this?

You need to modify your function in the following way:
$(document).ready(function(){
$(".tabHeader").click(function(){
$(".form").each(function(){
if ($(this).hasClass('show')) {
$(this).slideUp(400).removeClass('show');
} else {
$(this).delay(400).addClass('show').slideDown();
}
});
});
});
Here is working fiddle - http://jsfiddle.net/pz83w/7/
Remember, since you have two buttons, it's better to use class selector than to use id, same with your forms. That you can add a blank class (like 'show' in the example) to selected item and animate it the way you want.
Fiddle is updated, check HTML section, since I added classes to your forms.

problem with my drop down login box?

i have a simple Jquery script which allow me to place a nice drop down login box but i have a simple issue with it
when i tried to place more than 1 box lets say 5 the script totally messed
i believe its something regarding the DIV id's and duplication but i don't find a way to resolve this problem
JS code
// Login Form
$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseup(function(login) {
box.toggle();
button.toggleClass('active');
});
form.mouseup(function() {
return false;
});
$(this).mouseup(function(login) {
if(!($(login.target).parent('#loginButton').length > 0)) {
button.removeClass('active');
box.hide();
}
});
});
html code
<!doctype html>
<html>
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Dropdown Login Freebie | The Finished Box</title>
<link rel="stylesheet" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<script src="js/login.js"></script>
</head>
<body>
<div id="bar">
<div id="container">
<!-- Login Starts Here -->
<div id="loginContainer">
<span>Login</span><em></em>
<div style="clear:both"></div>
<div id="loginBox">
<form id="loginForm">
<fieldset id="body">
<fieldset>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</fieldset>
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
</fieldset>
<span>Forgot your password?</span>
</form>
</div>
</div>
<!-- Login Ends Here -->
</div>
</div>
</body>
</html>

Yes, Change the ID's and It will work for more than one.

Categories