I am setting a h2 element to display the score of questions answered via radio buttons in a form. The congratulations message pops up when the answer is correct but the h1 text changes for a millisecond and then goes back to displaying zero.
var h2 = document.querySelector("h2");
var correctAnswers = 0;
h2.textContent = correctAnswers;
function getAnswer(){
var radio = document.querySelector("form");
if (radio[0].checked === true) {
correctAnswers++;
alert("Congrats! That answer is correct!");
}
h2.textContent = correctAnswers;
}
var btn = document.getElementById('btn');
btn.addEventListener("click", getAnswer);
The HTML looks like this
<body>
<h1></h1>
<form>
<p>John Resig invented which javascript library?</p>
<input type="radio" name="library" value="jQuery">jQuery
<input type="radio" name="library" value="Lodash">Lodash
<input type="radio" name="library" value="Underscore">Underscore
<input id="btn" type="submit"> </form>
<script src="quiz.js"></script>
</body>
Your page is reloading on submit to avoid that you can use as below
form onsubmit="return false;"
<body>
<h2></h2>
<form onsubmit="return false;">
<p>John Resig invented which javascript library?</p>
<input type="radio" name="library" value="jQuery">jQuery
<input type="radio" name="library" value="Lodash">Lodash
<input type="radio" name="library" value="Underscore">Underscore
<input id="btn" type="submit"> </form>
<script>
var h2 = document.querySelector("h2");
var correctAnswers = 0;
h2.textContent = correctAnswers;
function getAnswer(){
var radio = document.querySelector("form");
if (radio[0].checked === true) {
correctAnswers++;
alert("Congrats! That answer is correct!");
}
h2.textContent = correctAnswers;
}
var btn = document.getElementById('btn');
btn.addEventListener("click", getAnswer);
</script>
</body>
When I load your code and check my browser console, I see this message:
TypeError: h2 is null
h2.textContent = correctAnswers;
That is because this line is specifying an 'h2':
var h2 = document.querySelector("h2");
You can change <h1></h1> to <h2></h2> in your html, or add <h2></h2>.
If I for example add <h2></h2>, you indeed see the changing 1 back to zero.
That is because the form does a GET request when you click the button and the page reloads.
If you don't want the page to reload after to click the button, you can for example add this to the form tag:
<form onsubmit="return false;">
Snippet:
var h2 = document.querySelector("h2");
var correctAnswers = 0;
h2.textContent = correctAnswers;
function getAnswer(){
var radio = document.querySelector("form");
if (radio[0].checked === true) {
correctAnswers++;
alert("Congrats! That answer is correct!");
}
h2.textContent = correctAnswers;
}
var btn = document.getElementById('btn');
btn.addEventListener("click", getAnswer);
<h2></h2>
<form onsubmit="return false;">
<p>John Resig invented which javascript library?</p>
<input type="radio" name="library" value="jQuery">jQuery
<input type="radio" name="library" value="Lodash">Lodash
<input type="radio" name="library" value="Underscore">Underscore
<input id="btn" type="submit"> </form>
Related
I have a form that request user data(name) and then when they click the "check" button the form will get replaced by a div and display the name in it.
Then when the user clicks the "edit" button the user gets prompt back to the form but with the previous entered data. I want to know how to display the details back in the form.
<html>
<body>
<div id="container">
<h2 id="heading">Query Form</h2>
<br>
<div id="formdiv">
<form id="form" method="POST">
<div>
<label for="name">Name: </label>
<input id="name" name="name" type="text">
</div>
<br>
<button id="checkbutton" onclick=submitform()>Check</button>
<input type="submit" id="formbutton" value="Submit" onclick=validateForm()>
</form>
</div>
<div id="for_replacement">
<div id="display_replacment" style="display: none;">
<form>
<label for="name_submit">Name: </label><span id="name"></span>
<span id="display_name"></span><br><br>
<input type="submit" id="formbutton" value="Edit" onclick="editform()">
</form>
</div>
</div>
<script>
function validateForm() {
var formrefresh = document.getElementById("form");
function handleForm(event) {
event.preventDefault();
}
var namevalidate = document.getElementById("name").value;
if(namevalidate.length == 0) {
alert("Please Enter Name");
formrefresh.addEventListener("submit", handleForm);
return;
}else {
form.action = "mailto:mail#gmail.com"
}
}
function submitform() {
globalThis.name = document.getElementById("name").value;
document.getElementById('container').innerHTML = document.getElementById("display_replacment").innerHTML;
document.getElementById("display_name").innerText = name;
}
function editform() {
alert(globalThis.name);
}
</script>
</body>
</html>
What should happen is when edit is clicked the data entered in the form should be displayed again in the form to edit.
Instead of removing the form why don't you set its display to none:
document.getElementById('heading').style.display = "none";
document.getElementById('form').style.display = "none";
document.getElementById('display_replacment').style.display = "block";
and when you want the get it back reverse
document.getElementById('heading').style.display = "block";
document.getElementById('form').style.display = "block";
document.getElementById('display_replacment').style.display = "none";
and you can get the name from the display_name:
const name =document.getElementById("display_name").innerText;
document.getElementById("name").value = name;
I'm new to HTML and js, and I am currently trying to make it so that the user will type in a password, and if correct, it will reveal a hidden message. This is what I got so far. I can't get it to work.
Here's the HTML:
<form id="form" onsubmit="return false;">
<input type="text" id="userInput" />
<input type="submit" onclick="othername();" />
</form>
<p id="hidden_clue"></p>
And here's the js:
var pass1 = 3736.62417618;
var input = document.getElementById("userInput").value;
alert(input);
if (input == pass1) {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
You were close, but on the getElementById you need to select the ID of the element that you want to get.
function othername() {
var pass1 = 3736.62417618;
var input = document.getElementById("userInput").value;
if (input == pass1) {
document.getElementById("hidden_clue").textContent = "Hello JavaScript!";
}
}
<form id="form" onsubmit="return false;">
<input type="password" id="userInput" />
<input type="submit" onclick="othername();" />
</form>
<p id="hidden_clue"></p>
On button press the following code will display a message with values collected from all checkboxes. But I want to pass these values (returned by function) as hidden input on submit.
<form action="script.php" method="post">
<input type="checkbox" name="chb1" value="html" />HTML<br/>
<input type="checkbox" name="chb2" value="css" />CSS<br/>
<input type="checkbox" name="chb3" value="javascript" />JavaScript<br/>
<input type="checkbox" name="chb4" value="php" />php<br/>
<input type="checkbox" name="chb5" value="python" />Python<br/>
<input type="checkbox" name="chb6" value="net" />Net<br/>
<input type="button" value="Click" id="btntest" />
</form>
<script type="text/javascript"><!--
function getSelectedChbox(frm) {
var selchbox = [];
var inpfields = frm.getElementsByTagName('input');
var nr_inpfields = inpfields.length;
for(var i=0; i<nr_inpfields; i++) {
if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value);
}
return selchbox;
}
document.getElementById('btntest').onclick = function(){
var selchb = getSelectedChbox(this.form);
alert(selchb);
}
//-->
</script>
I've seen guys like you trying to code my router interface, so I'll help out.
give your form an id cause you'll need it later
<form action="script.php" method="post" id="the_form">
add the hidden input in the form
<input type="hidden" name="values" id="values" value="" />
the button in the form matures to a real submit (amazing)
<input type="submit" ...
your "getSelectedChbox()" function is amazing; don't change anything there, just wanted to give you congratulations for it, it's a great function
now, where it says document.getElementById('btntest').onclick - get rid of all that and add this code instead; this code will do the rest.
document.getElementById('the_form').onsubmit = function(){
var selchb = getSelectedChbox(this);
var values = selchb.join(', ');
if(!values.length){
alert('There was an error. You have to select some checkboxes. ');
return false;
}
document.getElementById('values').value = values;
if(!confirm(" Are you interested in submitting this form now? If not, click accordingly. "))
return false;
}
Or simply copy-paste this whole thing in a file called script.php:
<?php echo var_dump(isset($_POST['values']) ? $_POST['values'] : 'Submit first.'); ?>
<form action="script.php" method="post" id="the_form">
<input type="checkbox" name="chb1" value="html" />HTML<br/>
<input type="checkbox" name="chb2" value="css" />CSS<br/>
<input type="checkbox" name="chb3" value="javascript" />JavaScript<br/>
<input type="checkbox" name="chb4" value="php" />php<br/>
<input type="checkbox" name="chb5" value="python" />Python<br/>
<input type="checkbox" name="chb6" value="net" />Net<br/>
<input type="hidden" name="values" id="values" value="" />
<input type="submit" value="Click" id="btntest" />
</form>
<script type="text/javascript"><!--
function getSelectedChbox(frm) {
var selchbox = [];
var inpfields = frm.getElementsByTagName('input');
var nr_inpfields = inpfields.length;
for(var i=0; i<nr_inpfields; i++) {
if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true)
selchbox.push(inpfields[i].value);
}
return selchbox;
}
document.getElementById('the_form').onsubmit = function(){
var selchb = getSelectedChbox(this);
var values = selchb.join(', ');
if(!values.length){
alert('There was an error. You have to select some checkboxes. ');
return false;
}
document.getElementById('values').value = values;
if(!confirm(" Are you interested in submitting this form now? If not, click accordingly. "))
return false;
}
//-->
</script>
Have fun.
I need to figure out how to check that my radio buttons are all filled. This is what I have but it only checks one button
var btns = form.choice_1;
for (var i=0; el=btns[i]; i++) {
if (el.checked) return true;
}
alert('Please select a radio button');
return false;
This is the form that I am taking input from.
<form onsubmit="return checkRadios(this);" name = "form" action = "like.php" method ="post" >
<h1> Questions </h1>
<p> Question 1 </p>
<input type="radio" name="choice_1" value="1">Like <input type="radio" name="choice_1" value="2" > Dislike
<p> Question 2 </p>
<input type="radio" name="choice_2" value="1">Like <input type="radio" name="choice_2" value="2" > Dislike
<p> Question 3 </p>
<input type="radio" name="choice_3" value="1">Like <input type="radio" name="choice_3" value="2" > Dislike
<p> Question 4 </p>
<input type="radio" name="choice_4" value="1">Like <input type="radio" name="choice_4" value="2" > Dislike
<br> <br>
<input type="submit" value="Submit">
Any help is appreciated.
Try this:
var checkRadios = function () {
var btns = form.querySelectorAll('input[name^=choice_][type="radio"]');
for (var i = 0; i < btns.length; i = i + 2) {
var check = true;
if (!btns[i].checked && !btns[i + 1].checked) check = false;
}
if (!check) alert('Please select a radio button');
return check;
}
var form = document.querySelector('form[name="form"]');
form.onsubmit = checkRadios;
Fiddle
You should use jQuery for this. It makes it much easier.
You would do it like this:
var e = ('#[[[[id of your radio]]]]');
if($e.is(':checked'){
//do what you need to
};
Try this. You will need jQuery.
checkRadios = function() {
if $("input:radio :checked").length == 0 {
alert('Please select a radio button');
return false;
}
}
I have created a form with a dynamically created field and i am trying to find a way to validate all the fields with javascript. I just want to alert the user that a field is null. Here is my code:
<script>
var counter = 0;
function addInput(divName){
counter++;
var Ai8ousa = document.createElement('div');
Ai8ousa.innerHTML = "Field: "+(counter +1) + "<input type='text' name='field[]'>";
document.getElementById(divName).appendChild(Ai8ousa);
}
function validations(form){
var field;
var i=0;
do{
field=form['field[]'];
if (field.value=='')
{
alert('The field is null!!!');
return false;
}
i++;
}while(i<counter);
}
</script>
<form action="" method="post" onsubmit="return validations(this)" >
<div id="dynamicInput">
Field : <input type="text" name="field[]" /> <br />
</div>
<input type="button" value="New field" onClick="addInput('dynamicInput');">
<input type="submit" value="Submit" />
</form>
I was expecting that will work but i was obviously wrong:(
With this code if i haven't pressed the "New field" button and press submit i will get the alert as expected. But on all other cases i am not getting anything!
Thanks for your time anyway, and sorry if i have made grammar mistakes!
<script type="text/javascript">
var counter = 0;
function addInput(divName){
counter++;
var Ai8ousa = document.createElement('div');
Ai8ousa.innerHTML = "Field: "+(counter +1) + "<input type='text' name='field[]'>";
document.getElementById(divName).appendChild(Ai8ousa);
}
function validations(form){
var field;
var i=0;
do{
field=form[i];
if (field.value=='')
{
alert('The field is null!!!');
return false;
}
i++;
}while(i<counter);
}
</script>
<form action="" method="post" onsubmit="return validations(this)" >
<div id="dynamicInput">
Field : <input type="text" name="field[]" /> <br />
</div>
<input type="button" value="New field" onClick="addInput('dynamicInput');">
<input type="submit" value="Submit" />
</form>
I don't understand this line: field=form['field[]'];, so I changed it to field=form[i];
http://jsfiddle.net/sZ4sd/