I have a basic quiz/survey type application I'm working on, and I'd like to give the user a prompt before they submit if they haven't answered all the questions. All the questions are multiple choice using radio buttons:
<div class="question">
Q1: What is the second letter of the alphabet?
<div class="choices">
<input type="radio" name="question_1" value="1" /> A
<input type="radio" name="question_1" value="2" /> B
<input type="radio" name="question_1" value="3" /> C
</div>
</div>
<div class="question">
Q2: Which out of these is a berry?
<div class="choices">
<input type="radio" name="question_2" value="1" /> Apples
<input type="radio" name="question_2" value="2" /> Bananas
<input type="radio" name="question_2" value="3" /> Carrots
</div>
</div>
<div class="question"> ...etc
How do you find which groups haven't got an option ticked? Or at least, if there are any which haven't been answered?
jQuery is ok, and even preferred.
Ah, I figured it out:
$('div.question:not(:has(:radio:checked))')
Related
Is it possible to have multiple radio button groups in a single form? Usually selecting one button deselects the previous, I just need to have one of a group deselected.
<form>
<fieldset id="group1">
<input type="radio" value="">
<input type="radio" value="">
</fieldset>
<fieldset id="group2">
<input type="radio" value="">
<input type="radio" value="">
<input type="radio" value="">
</fieldset>
</form>
Set equal name attributes to create a group;
<form>
<fieldset id="group1">
<input type="radio" name="group1">value1</input>
<input type="radio" name="group1">value2</input>
</fieldset>
<fieldset id="group2">
<input type="radio" name="group2">value1</input>
<input type="radio" name="group2">value2</input>
<input type="radio" name="group2">value3</input>
</fieldset>
</form>
This is very simple you need to keep different names of every radio input group.
<input type="radio" name="price">Thousand<br>
<input type="radio" name="price">Lakh<br>
<input type="radio" name="price">Crore
</br><hr>
<input type="radio" name="gender">Male<br>
<input type="radio" name="gender">Female<br>
<input type="radio" name="gender">Other
Just do one thing,
We need to set the name property for the same types. for eg.
Try below:
<form>
<div id="group1">
<input type="radio" value="val1" name="group1">
<input type="radio" value="val2" name="group1">
</div>
</form>
And also we can do it in angular1,angular 2 or in jquery also.
<div *ngFor="let option of question.options; index as j">
<input type="radio" name="option{{j}}" value="option{{j}}" (click)="checkAnswer(j+1)">{{option}}
</div>
in input field make name same
like
<input type="radio" name="option" value="option1">
<input type="radio" name="option" value="option2" >
<input type="radio" name="option" value="option3" >
<input type="radio" name="option" value="option3" >
To create a group of inputs you can create a custom html element
window.customElements.define('radio-group', RadioGroup);
https://gist.github.com/robdodson/85deb2f821f9beb2ed1ce049f6a6ed47
to keep selected option in each group, you need to add name attribute to inputs in group, if you not add it then all is one group.
I have two forms
only one of them is working probably "example 2"
and both of them are almost the same in terms of functionality
"example 1" is the one in question , "example 2" works fine.
<h4>example 1<h4/>
<form class="answerFormClass" action="http://127.0.0.1:5000" method="PSOT" >
<div name="choiceDivName_0" id="choiceDivId_0">
<input type="radio" name="choice_radio_0" id="choiceId_radio_0" value="get">
<label for="choiceId_radio_0">get</label>
</div>
<div name="choiceDivName_1" id="choiceDivId_1">
<input type="radio" name="choice_radio_1" id="choiceId_radio_1" value="give">
<label for="choiceId_radio_1">give</label>
</div>
<div name="choiceDivName_2" id="choiceDivId_2">
<input type="radio" name="choice_radio_2" id="choiceId_radio_2" value="gone">
<label for="choiceId_radio_2">gone</label>
</div>
<input type="submit" name="submitBtnName" id="submitBtnid" value="CLick here"></button>
</form>
<h4>example 2<h4/>
<form action="/action_page.php">
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>
here is the code in codepen : https://codepen.io/anon/pen/zbOOMM?editors=1010
*"example 1" was created by a dynamic java script "example 2" found online*
Because radio buttons are grouped according to them having the same name, but your radio buttons all have different names. To make a group of radio buttons, give them all the same name attribute.
(Side note: You usually don't need an id attribute on radio button elements, but if you do have one, it doesn't have to be the same as its name.)
Here they are with the same name:
<h4>example 1<h4/>
<form class="answerFormClass" action="http://127.0.0.1:5000" method="PSOT" >
<div name="choiceDivName_0" id="choiceDivId_0">
<input type="radio" name="choice" id="choiceId_radio_0" value="get">
<label for="choiceId_radio_0">get</label>
</div>
<div name="choiceDivName_1" id="choiceDivId_1">
<input type="radio" name="choice" id="choiceId_radio_1" value="give">
<label for="choiceId_radio_1">give</label>
</div>
<div name="choiceDivName_2" id="choiceDivId_2">
<input type="radio" name="choice" id="choiceId_radio_2" value="gone">
<label for="choiceId_radio_2">gone</label>
</div>
<input type="submit" name="submitBtnName" id="submitBtnid" value="CLick here">
</form>
I was trying to create something similar to this: https://www.123test.com/disc-personality-test/
Only one "Yes" and one "No" options must be selected in a group, so there wont be two selections in a row or column
I tried to create a basic html grouping:
<div id="main1">
<div id="group1">
<input type="radio" name="group1" class="group1" value="test1">
<input type="radio" name="group1" class="group1" value="test2"> Group 1
</div>
<div id="group2">
<input type="radio" name="group2" class="group2" value="test1">
<input type="radio" name="group2" class="group2" value="test2"> Group 2
</div>
<div id="group3">
<input type="radio" name="group3" class="group3" value="test1">
<input type="radio" name="group3" class="group3" value="test2"> Group 3
</div>
<div id="group4">
<input type="radio" name="group4" class="group4" value="test1">
<input type="radio" name="group4" class="group4" value="test2"> Group 4
</div>
</div>
But i still have no idea about how the Javascript / jQuery code is supposed to be like. If you have better suggestions for the HTML structure, please do suggest that too. The information from this survey is supposed to be uploaded into a database.
Try this one
html-->
<div id="main1">
<div id="group1">
<input type="radio" name="group1" class="team1" value="test1">
<input type="radio" name="group1" class="team2" value="test2"> Group 1
</div>
<div id="group2">
<input type="radio" name="group2" class="team1" value="test1">
<input type="radio" name="group2" class="team2" value="test2"> Group 2
</div>
<div id="group3">
<input type="radio" name="group3" class="team1" value="test1">
<input type="radio" name="group3" class="team2" value="test2"> Group 3
</div>
<div id="group4">
<input type="radio" name="group4" class="team1" value="test1">
<input type="radio" name="group4" class="team2" value="test2"> Group 4
</div>
</div>
javascript-->
$("input:radio").change(function(){
var group = ":radio[name='"+ $(this).attr("name") + "']";
if ($(this).is(':checked')) {
$("input:radio[class^='"+ $(this).attr('class')+"']").each(function(i) {
this.checked = false;
});
$(this).prop('checked', 'checked');
}
});
this working fine for me...
This will do the trick but you must use event binding on radio buttons to check for the condition where two radio buttons are clicked on the same row.
jsfiddle.net/g8gvof06
You have to define the YES buttons with the same name and the NO buttons with the same name to achive the vertical grouping. For each line I would integrate some Javascript which deselects the counterpart of the selected option.
$("input:radio").change(function(){
if ($(this).is(':checked')) {
var name = $(this).attr("name");
$(this).parent().children().each(function(i) {
if(this.getAttribute("name") != name){
this.checked = false;
}
});
}
});
https://jsfiddle.net/yeqsqxcq/
Try this,
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div id="main1">
<div id="group1">
<input type="radio" name="say_yes" class="group1" value="test1">
<input type="radio" name="say_no" class="group1" value="test2"> Group 1
</div>
<div id="group2">
<input type="radio" name="say_yes" class="group2" value="test1">
<input type="radio" name="say_no" class="group2" value="test2"> Group 2
</div>
<div id="group3">
<input type="radio" name="say_yes" class="group3" value="test1">
<input type="radio" name="say_no" class="group3" value="test2"> Group 3
</div>
<div id="group4">
<input type="radio" name="say_yes" class="group4" value="test1">
<input type="radio" name="say_no" class="group4" value="test2"> Group 4
</div>
</div>
And some Jquery,
$('input').click(function(){
$(this).parent().find('input').not(this).removeAttr('checked');
});
Demo http://jsbin.com/runocizugo/edit?html,js,output
Thanks!
I know this may sound like a basic question but the truth is I'm not that of an expert with animations and it's hard to calculate the math from x and y. So, I would like to know how to make the "gl_banner" div simply slide up after a 0.5-1 second(s) and disappear and the content below it will be pushed up to its original position. What css properties do I use? css-animation? transition? How do I do it?
P.S. I did some research on animations and I saw a lot of animations, advanced animations but couldn't find a simple slide up animation. A little help is appreciated! Thanks!
HTML CODE:
<div id="gl_banner" style="display:none; visibility:hidden;">Good Luck! :)</div>
<form id="quiz" action="grade.php" method="post" style="visibility:hidden;">
<!--Question 1-->
<h3>1. How many percent of modern camera phones use CMOS?</h3>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A" />
<label for="question-1-answers-A">A) 20%</label>
<br/>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B" />
<label for="question-1-answers-B">B) 80%</label>
<br/>
<input type="radio" name="question-1-answers" id="question-1-answers-C" value="C" />
<label for="question-1-answers-C">C) 50%</label>
<br/>
<input type="radio" name="question-1-answers" id="question-1-answers-D" value="D" />
<label for="question-1-answers-D">D) 90%</label>
</div>
<!--Question 2-->
<h3>2. Which type of camera setting(s) is best for greater control and flexibility in terms of focusing on a subject?</h3>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-A" value="A" />
<label for="question-2-answers-A">A) Manual Focus</label>
<br/>
<input type="radio" name="question-2-answers" id="question-2-answers-B" value="B" />
<label for="question-2-answers-B">B) Auto Focus</label>
<br/>
<input type="radio" name="question-2-answers" id="question-2-answers-C" value="C" />
<label for="question-2-answers-C">C) Both A and B</label>
<br/>
<input type="radio" name="question-2-answers" id="question-2-answers-D" value="D" />
<label for="question-2-answers-D">D) Neither</label>
</div>
<!--Question 3-->
<h3>3. What are the three properties included in an exposure triangle?</h3>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-A" value="A" />
<label for="question-3-answers-A">A) White Balance, ISO, Low Light</label>
<br/>
<input type="radio" name="question-3-answers" id="question-3-answers-B" value="B" />
<label for="question-3-answers-B">B) Shutter Speed, Exposure, ISO</label>
<br/>
<input type="radio" name="question-3-answers" id="question-3-answers-C" value="C" />
<label for="question-3-answers-C">C) Aperture, ISO, Exposure</label>
<br/>
<input type="radio" name="question-3-answers" id="question-3-answers-D" value="D" />
<label for="question-3-answers-D">D) ISO, Aperture, Shutter Speed</label>
</div>
<!--Question 4-->
<h3>4. The higher the ISO, the more noise it produces in an image.</h3>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-A" value="A" />
<label for="question-4-answers-A">A) True</label>
<br/>
<input type="radio" name="question-4-answers" id="question-4-answers-B" value="B" />
<label for="question-4-answers-B">B) False</label>
</div>
<!--Question 5-->
<h3>5. What is the name of the smartphone you've seen all over this site?</h3>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-A" value="A" />
<label for="question-5-answers-A">A) Nokia Pureview 808</label>
<br/>
<input type="radio" name="question-5-answers" id="question-5-answers-B" value="B" />
<label for="question-5-answers-B">B) Nokia Lumia 1020</label>
<br/>
<input type="radio" name="question-5-answers" id="question-5-answers-C" value="C" />
<label for="question-5-answers-C">C) Nokia Lumia 925</label>
<br/>
<input type="radio" name="question-5-answers" id="question-5-answers-D" value="D" />
<label for="question-5-answers-D">D) Nokia Lumia 920</label>
</div>
<br />
<hr style="border-top:1px; border-style:solid; border-color: #000;" />
<input style="cursor:pointer;" type="submit" value="Submit Quiz" />
</form>
JavaScript Code:
function takeQuiz()
{
// hide the intro
document.getElementById('intro').style.display = 'none';
// display the quiz
document.getElementById('quiz').style.visibility = 'visible';
document.getElementById('gl_banner').style.display = 'block';
document.getElementById('gl_banner').style.visibility = 'visible';
}
Use jQuery library .
Ex:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
$( "intro" ).hide(); //hide div "intro" immd
$( "intro" ).click(function( event ) {//hide div "intro" on click
event.preventDefault();
$( this ).hide();
});
$( "intro" ).show(); //to show after hide
$( "intro" ).fadeOut();
$( "intro" ).fadeIn();
Check an example made by me with click function from JQuery:
Knee's Fiddle
Have fun (:
I've an HTML form that I've put together...
There is a question "Can you attend?" with a "Yes" and "No" checkbox.
Obviously who submits the form will either attend or not, so I would like for the form to only allow one checkbox to be selected of the two.
Here's the HTML:
<p>Can you attend?</p>
<label>
<input type="checkbox" name="attendance" value="checkbox" id="Yes" />
Yes</label>
<label>
<input type="checkbox" name="attendance" value="checkbox" id="No" />
No</label>
What does my code need to be? I'm guessing some JavaScript?
Thank you
And thus the radio was born :-)
<p>Can you attend?</p>
<label>
<input type="radio" name="attendance" value="checkbox" id="Yes" />
Yes</label>
<label>
<input type="radio" name="attendance" value="checkbox" id="No" />
No</label>
Demo: http://jsbin.com/oreped/