I have been asked to produce a 'workbook' in the form of a website. At the end of the workbook the user will be asked set of specific questions where he/she will answer yes/no - this will be in the form of radio buttons.
example: "Did you understand section 1?" ..... YES/NO
When the user has finished answering these questions a lightbox page should appear to tell them to go back to specific points in the website.
I have looked around and can't find any examples so it's quite hard to explain. does anybody know how this can be done? I appreciate any advice
To check if all questions are answered:
HTML:
<div class="question">
<input type="radio" name="q1" value="yes" />
<input type="radio" name="q1" value="no" />
</div>
<div class="question">
<input type="radio" name="q2" value="yes" />
<input type="radio" name="q2" value="no" />
</div>
<div class="question">
<input type="radio" name="q3" value="yes" />
<input type="radio" name="q3" value="no" />
</div>
jQuery:
$(":radio").change(function() {
if (!$('.question:not(:has(:radio:checked))').length) {
alert("all questions are filled in, add code to show colorbox/lightbox/bootstrap modal here")
}
})
See this jsfiddle. I would suggest to use colorbox to create the overlay popup. Another nice one is to use bootstrap modals.
EDIT: updates jsfiddle now working with bootstrap modal!
Related
Hi I have two ratings fields on my page, when the first rating is checked and I check the second one, the first one is unchecked. It's not a problem in back-end because the value of the ratings is already saved but for the visitors it's a problem because the stars disappears.
Is there a way in javascript or jQuery to say : if this field is check it remains check ?
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<fieldset class="rate">
<input id="5-stars-1" type="radio" name="firstRate" value="5" />
<label for="5-stars-1">5</label>
<input id="4-stars-1" type="radio" name="firstRate" value="4" />
<label for="4-stars-1">5</label>
</fieldset>
<fieldset class="rate2">
<input id="5-stars-2" type="radio" name="secondRate" value="5" />
<label for="5-stars-2">5</label>
<input id="4-stars-2" type="radio" name="secondRate" value="4" />
<label for="4-stars-2">5</label>
</fieldset>
Do you have any idea ?
If you need more infos or more extract from my code don't mind to ask !
Alright so thanks to Rory and Sathish, the answer is really simple :
Radio are designed to be checked once at a time so I couldn't do what I wanted, instead I simply need to switch to checkboxes and the problem is solved !
Thanks again !
I know this is a common question on SO, but none of those solve my issue.
This code doesn't allow me to click/select the radio button. And I am unable to see whats wrong. It may bey something simple that I am missing, I'll be glad if someone can help out.
<div input-field class="col m6" ng-init="student.username = 0">
<p>Username Generation</p>
<p>
<input class="with-gap" type="radio" name="user" ng-model="student.username" value="0" required />
<label>Same as Registration ID</label>
</p>
<p>
<input class="with-gap" type="radio" name="user" ng-model="student.username" value="1" required />
<label>Auto Generate</label>
</p>
The problem is I cannot select the Radio button, where set in ng-init or not.
JSFIDDLE: https://jsfiddle.net/znfvmr80/5/
Well the fix was relative easy, and kinda due to me missing out on a for attribute. Thanks to #Joyson for helping out, him thinking got me thinking.
This is the correct code:
<div input-field class="col m6" ng-init="student_username = 0">
<p>Username Generation</p>
<p>
<input class="with-gap" type="radio" name="user" ng-model="student_username" value="0" required id="same_as_reg" />
<label for="same_as_reg">Same as Registration ID</label>
</p>
<p>
<input class="with-gap" type="radio" name="user" ng-model="student_username" value="1" required id="autogen" />
<label for="autogen">Auto Generate</label>
</p>
Materialize requires a for attribute label for radio buttons to work.
Thanks everyone!
The code you have given is working fine i think you could check more in your js before or after initialization.
I have a Questionnaire form which is break down in steps by using JQuery steps plugin. In the process of form submission there is a certain point where i need to remove steps. When i use "destroy" JQuery steps method, the values filled in the form are lost.
For example:
<form>
<h3>Form A</h3>
<section>
What is your name?<br/>
<input type="text" value="" name="yourname" />
What is your age group? <br/>
<input type="radio" name="agegroup" value="1" />1-20
<input type="radio" name="agegroup" value="2" />20-40
<input type="radio" name="agegroup" value="3" />40-60
<input type="radio" name="agegroup" value="4" />60+
......
......
<section>
</form>
I am using following steps:
Convert form into Jquery steps
Opening this form in Simple modal dialog.
User fill this form and close modal dialog.
I am using "destroy" jQuery steps method after closing dialog.
When user re-open simple modal dialog again then i am converting this form into JQuery steps. At that point user see that all filled values in the form are lost.
The problem is at the 4th step. User have filled form at 3rd step. When i converted in back to original HTML, values given by user are lost.
Expected values at 4th step
<h3>Form A</h3>
<section>
What is your name?<br/>
<input type="text" value="Ishwar Lal" name="yourname" />
What is your age group? <br/>
<input type="radio" name="agegroup" value="1" />1-20
<input type="radio" name="agegroup" value="2" selected='selected' />20-40
<input type="radio" name="agegroup" value="3" />40-60
<input type="radio" name="agegroup" value="4" />60+
......
......
<section>
but output is:
<h3>Form A</h3>
<section>
What is your name?<br/>
<input type="text" value="" name="yourname" />
What is your age group? <br/>
<input type="radio" name="agegroup" value="1" />1-20
<input type="radio" name="agegroup" value="2" />20-40
<input type="radio" name="agegroup" value="3" />40-60
<input type="radio" name="agegroup" value="4" />60+
......
......
<section>
I need to remove JQuery steps from from with filled values. I have read JQuery documentation but not found any idea about this.
I think that you must to store data before you destroy the component. When you destroy a component it is destroyed, nothing else what to do.
If you store the data , then destroy object, and then initialize object with the data you stored. You can store in an array/object/variable, or you can store in sessionStorage / localStorage for use in other pages.
I am very new to coding and CS and so sorry if this question is kind of obvious. I couldn't really find anything about this before that I understood. I am making a set of radio buttons and I would like the user to check off what applies to them and submit it. How do I get the value of the button (with javascript) that they click so that my code could generate a corresponding output.
<p> Pick a hair length </p>
<input type="hidden" value="" id="rdValue" />
<div>
<label> <input type="radio" name="length" value="short"> Short </label>
</div>
<div>
<label> <input type="radio" name="length" value="med"> Medium </label>
</div>
<div>
<label><input type="radio" name="length" value="long"> Long </label>
</div>
<p> Pick a hair type </p>
<div>
<label> <input type="radio" name="type" value="curly"> Curly </label>
</div>
<div>
<label> <input type="radio" name="type" value="wavy"> Wavy </label>
</div>
<div>
<label><input type="radio" name="type" value="straight"> Straight </label>
</div>
You could use this to get the value for the selected radio button from the "length" radio buttons for example:
$("input:radio[name='length']").val();
This question is very similar to yours, and has answers in jQuery and Javascript. It's pretty simple.
Basically, you get the DOM elements of the radio buttons from the page, then loop through them checking their values. Once you find one that is "true", you've found the selected value.
I cannot get my jquery code to auto select a radiobox.
Here is my html:
<div class="formField rsform-block rsform-block-existingcustomer" style="margin-bottom: -22px;">
<!--<input name="form[existingCustomer]" type="radio" value="Yes" id="existingCustomer0" /><label for="existingCustomer0">Yes</label><input checked="checked" name="form[existingCustomer]" type="radio" value="No" id="existingCustomer1" /><label for="existingCustomer1">No</label><br/>
<span id="component100" class="formNoError">Please tell us if you're an existing customer.</span>-->
Are you an existing client?<br>
<label for="existingCustomer0" class="radio"><span class="icon"></span><span class="icon-to-fade"></span>Yes
<input name="form[existingCustomer]" type="radio" value="Yes" id="existingCustomer0" class="addRadio">
</label>
<label for="existingCustomer1" class="radio checked"><span class="icon"></span><span class="icon-to-fade"></span>No
<input checked="checked" name="form[existingCustomer]" type="radio" value="No" id="existingCustomer1" class="addRadio" style="display:none;">
</label>
</div>
and here is a snippet of the jQuery code that is supposed to do it:
if(aaid) {
var num_one = aaid;
jQuery('input[value="Yes"]').prop('checked', true);
Does anyone see the problem? I am trying to autoselect the "yes" checkbox, so that it will activate the next part which is create a dropdown menu.
Thanks in advance! :)
Try this:
$(document).ready(function () {
$('input:radio[name="form[existingCustomer]"][value="Yes"]').attr('checked',true);
//OR
$('input:radio[name="form[existingCustomer]"][value="Yes"]').prop('checked',true);
});
Example
I see a couple issues with your code here.
1. input hmtl does not have proper ending/end tag
2. not sure why you wrap it around the label
3. Be sure to put your jquery code in document ready so that it checks the radiobox when the page is loaded.
4. in you html code, you are pre-setting the No radio to be checked. Is that on purpose? It looks like you set it to no and then using jquery to set it back to yes.
Anyway, try attr instead of prop. Something like this.
$('input:radio[value="Yes"]').attr('checked', true);