I'm trying to create a yes or no questionaire for perfroming a test. If they answer yes to the first question then they are presented the second question and so forth. If they answer no to any of them it will tell them to contact the administrator and it will provide the POC.
I'm usinig this fiddle as my basis but I can't get it to work when I try to add the no option to display the POC.
Do you see the color red? Yes or No
If they select Yes then the next question will appear
Do you see the color blue? Yes or No
Once a No is selected the questions stop and it says contact your systems administrators.
http://jsfiddle.net/mail2zam/vQ4Up/
<form class="form-signin" role="form">
Do you see the color Red?
<input type="radio" name="myofficeissue" id="0" value="No">No
<input type="radio" name="myofficeissue" class="show_hide" rel="#slidingDiv" id="1" value="Yes">Yes
<div id="slidingDiv">
Do you see the color Blue?
<input type="radio" name="passwordissue" id="passwordissue-0" value="No">No
<input type="radio" name="passwordissue" class="show_hide" rel="#slidingDiv_2" id="passwordissue-1" value="Yes">Yes
</div>
<div>
<div id="alert-user">Please contact the administrator....</div>
</div>
</form>
Try this:
HTML:
<form class="form-signin" role="form">
I am having a Cloud My Office log in issue
<input type="radio" name="myofficeissue" id="0" value="No">No
<input type="radio" name="myofficeissue" class="show_hide" rel="#slidingDiv" id="1" value="Yes">Yes
<div id="slidingDiv">
I am having a username and password issue.
<input type="radio" name="passwordissue" id="passwordissue-0" value="No">No
<input type="radio" name="passwordissue" class="show_hide" rel="#slidingDiv_2" id="passwordissue-1" value="Yes">Yes
</div>
<br />
<div id="slidingDiv_2">
I need to reset my password
<input type="radio" name="password" id="password-0" value="No" checked="checked" required> No
<input type="radio" name="password" id="password-1" value="Yes" required> Yes
</br>
My username needs updated.
<input type="radio" name="username" id="username-0" value="No" checked="checked" required> No
<input type="radio" name="username" id="username-1" value="Yes" required> Yes</br>
My account is locked out
<input type="radio" name="locked" id="locked-0" value="No" checked="checked" required> No
<input type="radio" name="locked" id="locked-1" value="Yes" required> Yes</br>
I am experiencing other problems
<input type="radio" name="other" id="other-0" value="No" checked="checked" required>No
<input type="radio" name="other" id="other-1" value="Yes" required>Yes</br>
</div>
<div>
<div id="alert-user">Please contact the administrator....</div>
</div>
</form>
CSS:
body{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;}
#slidingDiv, #slidingDiv_2, #alert-user{
display:none;
}
JS:
$(document).ready(function(){
$("input:radio").change(function(){
console.log(this);
if(this.value == 'Yes' && this.name == 'myofficeissue'){
$('#slidingDiv').slideDown();
$('#alert-user').slideUp();
}else if(this.value == 'No' && this.name == 'myofficeissue'){
$('#alert-user').slideDown();
$('#slidingDiv').slideUp();
$('#alert-user').slideUp();
$('#slidingDiv_2').slideUp();
}else if(this.value == 'Yes' && this.name == 'passwordissue'){
$('#slidingDiv_2').slideDown();
$('#alert-user').slideUp();
}else if(this.value == 'No' && this.name == 'passwordissue'){
$('#slidingDiv_2').slideUp();
$('#alert-user').slideDown();
}
});
});
FIDDLE
I have add alert box in slideup event. that why any one click on ON option alter slider up it's show alert box.
$(document).ready(function() {
$("input:radio").change(function() {
console.log(this);
if (this.value == 'Yes' && this.name == 'myofficeissue') {
$('#slidingDiv').slideDown();
} else if (this.value == 'No' && this.name == 'myofficeissue') {
$('#slidingDiv').slideUp(function() {
alert('contact your admin');
});
$('#slidingDiv_2').slideUp();
} else if (this.value == 'Yes' && this.name == 'passwordissue') {
$('#slidingDiv_2').slideDown();
} else if (this.value == 'No' && this.name == 'passwordissue') {
$('#slidingDiv_2').slideUp(function() {
alert('contact your admin');
});
}
});
});
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
}
#slidingDiv,
#slidingDiv_2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-signin" role="form">
I am having a Cloud My Office log in issue
<input type="radio" name="myofficeissue" id="0" value="No">No
<input type="radio" name="myofficeissue" class="show_hide" rel="#slidingDiv" id="1" value="Yes">Yes
<div id="slidingDiv">
I am having a username and password issue.
<input type="radio" name="passwordissue" id="passwordissue-0" value="No">No
<input type="radio" name="passwordissue" class="show_hide" rel="#slidingDiv_2" id="passwordissue-1" value="Yes">Yes
</div>
<br />
<div id="slidingDiv_2">
I need to reset my password
<input type="radio" name="password" id="password-0" value="No" checked="checked" required>No
<input type="radio" name="password" id="password-1" value="Yes" required>Yes
</br>
My username needs updated.
<input type="radio" name="username" id="username-0" value="No" checked="checked" required>No
<input type="radio" name="username" id="username-1" value="Yes" required>Yes</br>
My account is locked out
<input type="radio" name="locked" id="locked-0" value="No" checked="checked" required>No
<input type="radio" name="locked" id="locked-1" value="Yes" required>Yes</br>
I am experiencing other problems
<input type="radio" name="other" id="other-0" value="No" checked="checked" required>No
<input type="radio" name="other" id="other-1" value="Yes" required>Yes</br>
</div>
</form>
Related
Hey guys can you help me solve this problem. when radio button value is "Reject" and checkbox1 checkbox2 checkbox3 is not checked then give alert "please choose reason"
<input type="checkbox" name="checkbox1" value="reason1" id="checkbox1"> Reason1
<input type="checkbox" name="checkbox2" value="reason2" id="checkbox2"> Reason2
<input type="checkbox" name="checkbox3" value="reason3" id="checkbox3"> Reason3
<br>
<br>
<input type="radio" name="radio" value="Approve" id="radio1" required> Approve
<input type="radio" name="radio" value="Reject" id="radio2" required> Reject
<button type="submit" href="#"> Submit</button>
Try this. Let me know if you want an explanation.
$('input').change(function () {
if($('#radio2').is(':checked') && $('#checkboxes input:checkbox:checked').length == 0) {
alert("please choose reason");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="checkboxes">
<input type="checkbox" name="checkbox1" value="reason1" id="checkbox1"> Reason1
<input type="checkbox" name="checkbox2" value="reason2" id="checkbox2"> Reason2
<input type="checkbox" name="checkbox3" value="reason3" id="checkbox3"> Reason3
</div>
<br>
<br>
<input type="radio" name="radio" value="Approve" id="radio1" required> Approve
<input type="radio" name="radio" value="Reject" id="radio2" required> Reject
<button type="submit" href="#"> Submit</button>
There are two radio buttons in my code:
<input type="radio" id='production' ng-click="division($event)" ng-model="formData.division" value="Production">
<label for="production">Production</label>
<input type="radio" id='operation' ng-click="division($event)" ng-model="formData.division" value="Operations">
<label for="operation">Operations</label>
And there are more radio buttons after:
<div class="prod">
<h2>Production</h2>
<label><b>Project Captain: <small id="small">*</small></b></label>
<input type="radio" class="projCap" ng-model="formData.projCap" value="yes">Yes
<input type="radio" class="projCap" ng-model="formData.projCap" value="no">No
<label><b>Supervisor: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.supervisor" value="yes">Yes
<input type="radio" ng-model="formData.supervisor" value="no">No<br><br>
</div>
<div class="op">
<h2>Operations</h2>
<label><b>Manager: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.mngr" value="yes">Yes
<input type="radio" ng-model="formData.mngr" value="no">No
<label><b>Assistant Manager: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.asMngr" value="yes">Yes
<input type="radio" ng-model="formData.asMngr" value="no">No <br><br>
</div>
I want to save time for the user so for example if user selects Production it should automatically set all radio buttons to no inside div op.
If Operations all radio buttons with value no should be selected inside div prod.
My function in controller:
$scope.division = function(event) {
if(event.target.id === 'production'){
$('.op').find('input:radio').prop('checked', true);
$('.prod').find('input:radio').prop('checked', false);
}else{
$('.prod').find('input:radio').prop('checked', true);
$('.op').find('input:radio').prop('checked', false);
}
};
It will select both yes and no values:
How can I auto select only radio buttons with no value?
Try this:
$('.op').find('input:radio[value="no"]').prop('checked', true);
and don't forget to provide the same name to all radio that comes under a group, otherwise they work as checkboxes.
Check this example:
$(document).ready(function(){
$('.op').find('input:radio[value="no"]').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="op">
<h2>Operations</h2>
<label><b>Manager: <small id="small">*</small></b></label>
<input type="radio" name="group1" ng-model="formData.mngr" value="yes">Yes
<input type="radio" name="group1" ng-model="formData.mngr" value="no">No
<label><b>Assistant Manager: <small id="small">*</small></b></label>
<input type="radio" name="group2" ng-model="formData.asMngr" value="yes">Yes
<input type="radio" name="group2" ng-model="formData.asMngr" value="no">No <br><br>
</div>
I am working on making a form that should take the three questions in the form and add them up. If the end value is equal to three it should open call another function called toggletab() when the submit button is clicked. I tried this with it telling me pass or false depending on the value but it won't work. I am not good at JavaScript and it is really confusing to me. It looks like it is running each question separately instead of waiting until the end and calculating them all together. I cannot figure out why this is happening. I also am not sure how to call another function that is in a separate file if someone would know how to do that.
Thank you. This is the HTML
<fieldset class="article">
<legend>Have you had your record expunged before?</legend>
<input type="radio" name="field1" value="0" />
<label>
Yes
</label>
<input type="radio" name="field1" value="1" />
<label>
No
</label>
</fieldset>
<fieldset class="article">
<legend>Do you have any charges pending against you?</legend>
<input type="radio" name="field2" value="0" onclick="getscores2(this)" />
<label>
Yes
</label>
<input type="radio" name="field2" value="1" onclick="getscores2(this)" />
<label>
No
</label>
</fieldset>
<fieldset>
<legend>Is your drivers license suspended?</legend>
<input type="radio" name="field3" value="0" onclick="getscores3(this)"/>
<label>
Yes
</label>
<input type="radio" name="field3" value="1" onclick="getscores3(this)"/>
<label>
No
</label>
</fieldset>
<fieldset id="submitbutton" class="article">
<input type="button" id="submit" value="submit" onclick='answer()' />
</fieldset>
</form>
<p id="totalScore">this is answer </p>
<button onclick = "toggletab()" id="tabButton"><h3>first results</h3>
</button>
<form>
<div id="first" >
<fieldset>
<label>
<fieldset class="article">
<legend>Have you had your record expunged before?</legend>
<input type="radio" name="field1" value="0" />
<label>
Yes
</label>
<input type="radio" name="field1" value="1" />
<label>
No
</label>
</fieldset>
<fieldset class="article">
<legend>Do you have any charges pending against you?</legend>
<input type="radio" name="field2" value="0" onclick="getscores2(this)" />
<label>
Yes
</label>
<input type="radio" name="field2" value="1" onclick="getscores2(this)" />
<label>
No
</label>
</fieldset>
<fieldset>
<legend>Is your drivers license suspended?</legend>
<input type="radio" name="field3" value="0"
onclick="getscores3(this)"/>
<label>
Yes
</label>
<input type="radio" name="field3" value="1"
onclick="getscores3(this)"/>
<label>
No
</label>
</fieldset>
<fieldset id="submitbutton" class="article">
<input type="button" id="submit" value="submit" onclick='answer()' />
</fieldset>
</form>
<p id="totalScore">this is answer </p>
<button onclick = "toggletab()" id="tabButton"><h3>first results</h3>
</button>
<form>
<div id="first" >
<fieldset>
<label>
<legend>Is your arrest record a:</legend>
<input type="radio" name="field4" value="1"
onclick="getscores4(this)"/>
IC 35-38-9-1
</label>
<label>
<input type="radio" name="field4" value="2"
onclick="getscores4(this)"/>
IC 35-38-9-2
</label>
<label>
<input type="radio" name="field4" value="3"
onclick="getscores4(this)"/>
IC 35-38-9-3
</label>
<label>
<input type="radio" name="field4" value="4"
onclick="getscores4(this)"/>
IC 35-38-9-4
</label>
<label>
<input type="radio" name="field4" value="5"
onclick="getscores4(this)"/>
IC 35-38-9-5
</label>
</fieldset>
This is the JavaScript
function getscores1(score1) {
var getscores1 = (score1.value);
sendScores(getscores1);
}
function getscores2(score2) {
var getscores2 = (score2.value);
sendScores(getscores2);
}
function getscores3(score3) {
var getscores3 = (score3.value);
sendScores(getscores3);
}
function sendScores(getscores1, getscores2, getscores3){
var total = getscores1 + getscores2 + getscores3;
answer(total);
}
function answer(total) {
if (total == 3) {
document.getElementById('totalScore').innerHTML = "false";
} else{
document.getElementById('totalScore').innerHTML = "pass";
}
}
The variables your functions are defining are not global. Their values disappear after the function returns. So your sendScores function does not actually have access to those values unless you pass them as arguments. But while sendScores takes 3 arguments, you are only sending one (the one you have access too when you call the function).
One option would be to store these as global variables, but global variables are Generally Evil™. Alternatively, you can get all the values when you click submit. Here is a working example. Note this does not catch the case when the user does not respond to one or more of the questions. Click the "run snippet" button below to see it in action.
For your final question, you can put your js in a separate file and then put <script src="path/to/your/file/js"></script> in your html to load it.
function answer(total) {
var score = 0;
if (document.getElementById('exp_yes').checked) {
score++;
}
if (document.getElementById('chg_yes').checked) {
score++;
}
if (document.getElementById('sus_yes').checked) {
score++;
}
if (score > 0) {
document.getElementById('totalScore').innerHTML = "false";
} else {
document.getElementById('totalScore').innerHTML = "pass";
}
}
<fieldset class="article">
<legend>Have you had your record expunged before?</legend>
<input id=exp_yes type="radio" name="field1" value="0" />
<label>
Yes
</label>
<input id=exp_no type="radio" name="field1" value="1" />
<label>
No
</label>
</fieldset>
<fieldset class="article">
<legend>Do you have any charges pending against you?</legend>
<input id=chg_yes type="radio" name="field2" value="0" />
<label>
Yes
</label>
<input id=chg_no type="radio" name="field2" value="1" />
<label>
No
</label>
</fieldset>
<fieldset>
<legend>Is your drivers license suspended?</legend>
<input id=sus_yes type="radio" name="field3" value="0" />
<label>
Yes
</label>
<input id=sus_no type="radio" name="field3" value="1" />
<label>
No
</label>
</fieldset>
<fieldset id="submitbutton" class="article">
<input type="button" id="submit" value="submit" onclick='answer()' />
</fieldset>
</form>
<p id="totalScore">this is answer </p>
I'm trying to get some js to work in checking if one of 3 radio buttons is selected in my html form, but I can't seem to get it to work.
Currently, I'm using
<label for="ctype"> Select Card Type:</label>
<br>
<label for="visa">Visa</label>
<input type="radio" name="ctype" id="visa" value="visa" ></input><br>
<label for="mastercard">Master Card</label>
<input type="radio" name="ctype" id="mastercard" value="mastercard"></input><br>
<label for="amex">American Express</label>
<input type="radio" name="ctype" id="amex" value="amex"></input>
if (document.forms[0].visa.checked == true){
}
else if (document.forms[0].mastercard.checked == true){
}
else if (document.forms[0].amex.checked == true){
}
else {
alert("Please select a credit card type.");
return false;
}
I've also tried running it with document.getElementById(visa/mastercard/amex).checked but had no luck there either.
Unfortunately, I cannot just use the html required as it has to be a js validation.
JavaScript comparison operator is === instead of ==.
To get the value of the selected ctype item of a form with id myForm:
$('input[name=radioName]:checked', '#myForm').val()
Here's an example:
$('#myForm input').on('change', function() {
alert($('input[name=ctype]:checked', '#myForm').val());
});
<form id="myForm">
<input type="radio" name="ctype" value="1" /> 1 <br />
<input type="radio" name="ctype" value="2" /> 2 <br />
<input type="radio" name="ctype" value="3" /> 3 <br />
</form>
// alert(document.querySelector('input[type="radio"]:checked').outerHTML);
if (document.querySelector('input[type="radio"]:checked')==undefined){
alert("Please select a credit card type.");
// return false;
}
<label for="ctype"> Select Card Type:</label>
<br>
<label for="visa">Visa</label>
<input type="radio" name="ctype" id="visa" value="visa" checked="true" ></input><br>
<label for="mastercard">Master Card</label>
<input type="radio" name="ctype" id="mastercard" value="mastercard"></input><br>
<label for="amex">American Express</label>
<input type="radio" name="ctype" id="amex" value="amex"></input>
<form>
<p class="question"> Hold Old are you</p>
<p ><input name="1" type="radio" value="15"> 12</p>
<p ><input name="1" type="radio" value="8"> 45</p>
<p ><input name="1" type="radio" value="2"> 23</p>
<p class="question"> What is you name<p/>
<p ><input name="2" type="radio" > Jerry</p>
<p ><input name="2" type="radio" > Tom</p>
<p ><input name="2" type="radio" > Becky</p>
<p class="question"> Are you single</p>
<p ><input name="3" type="radio" > yes</p>
<p ><input name="3" type="radio" > no</p>
<p ><input name="4" type="radio" > married</p>
</form>
Hello How are you?
I have a form here that ask 3 questions and each have 3 answers has a point and there will be a score:
if the score is >= 91, then after submitting it should take them to 90.html page
if the score is < 90 And >= 21) then after submitting it should take them to 20.html page
if the score is <= 20) then it should take them to the below20.html
the form should validate to make sure all question have an answer chosen
I need some direction on how i should set this up
HELP please thanks
I think I know what you're looking for. Here is a working sample: http://jsfiddle.net/NLJvZ/
var $rs = $(':radio');
$(':button').click(function(){
var $ch = $(':radio:checked');
if($ch.length < 3)
alert('Please answer all questions');
else{
var score = 0;
$ch.each(function(){
score += parseInt($(this).val(), 10);
});
var url = 'below20.html';
if(score >= 91)
url = '90.html';
else if(score < 90 && score >= 21)
url = '20.html';
alert('Going to URL: ' + url);
location.href = url;
}
});
HTML:
<div id="question1">
<h3>What is your name?</h3>
<label>
<input type="radio" name="first1" value="1" />
Tom
</label>
<label>
<input type="radio" name="first2" value="3" />
Jerry
</label>
<label>
<input type="radio" name="first3" value="2" />
Becky
</label>
</div>
<br />
<div id="question2">
<h3>Are you single?</h3>
<label>
<input type="radio" name="second1" value="1" />
Yes
</label>
<label>
<input type="radio" name="second2" value="3" />
No
</label>
<label>
<input type="radio" name="second3" value="2" />
Married
</label>
</div>
<br />
<div id="question3">
<h3>How old are you?</h3>
<label>
<input type="radio" name="third" value="1" />
12
</label>
<label>
<input type="radio" name="third" value="3" />
23
</label>
<label>
<input type="radio" name="third" value="2" />
45
</label>
</div>
<br />
<input type="button" value="Submit" />