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>
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>
I have a multi-step form with different input types inside each <fieldset>. I have a 'next' <button> which will trigger the next section of the form once the current fieldset has been completed.
Currently the next button is set to disabled until the user has met the criteria for that fieldset - ie: checked radios/checkboxes etc.
The issue I'm having is the jQuery I'm using to switch the button attribute to .prop('disabled', false); changes all of the buttons in the entire form to false. Is it possible to target the <button> within the current fieldset only?
Additionally, is it possible to disable the next button if a user goes back to a section and unchecks all inputs?
Here's a previous answer containing the script i'm currently using: Disable button until one radio button is clicked
I have a Codepen with a prototype of what I'm working on here: https://codepen.io/abbasarezoo/pen/jZgQOV - you can assume once live each one fieldset will show at a time.
Code below:
HTML:
<form>
<fieldset>
<h2>Select one answer</h2>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-1" name="radio" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio" />
<label for="radio-2">Radio 3</label>
<input type="radio" id="radio-3" name="radio" />
<br />
<button disabled>Next</button>
</fieldset>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-1" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-2" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-3" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-7">Radio 1</label>
<input type="radio" id="radio-7" name="radio-row-4" />
<label for="radio-8">Radio 2</label>
<input type="radio" id="radio-8" name="radio-row-5" />
<label for="radio-9">Radio 3</label>
<input type="radio" id="radio-9" name="radio-row-6" />
</div>
<button disabled>Next</button>
</fieldset>
<fieldset>
<h2>Select multiple answers</h2>
<label for="checkbox-1">Checkbox 1</label>
<input type="checkbox" id="checkbox-1" name="checkbox" />
<label for="checkbox-2">Checkbox 2</label>
<input type="checkbox" id="checkbox-2" name="checkbox" />
<label for="checkbox-2">Checkbox 3</label>
<input type="checkbox" id="checkbox-3" name="checkbox" />
<br />
<button disabled>Next</button>
</fieldset>
</form>
JS:
$('fieldset').click(function () {
if ($('input:checked').length >= 1) {
$('button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
Thanks in advance for any help!
i have just change your js into this .. this will help you to enable current button in the fieldset not all of them
$('fieldset').click(function () {
if ($('input:checked').length >= 1) {
$(this).closest('fieldset').find('button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
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 have this issue:
The user inputs only gender (male/female) and the code must automatic fill the "Coefficient" 1 and "Coefficient 2" in two different input fields. I managed to do it for Coefficient 1, but my code for Coefficient 2 is not working.
Or maybe there is a better an easy way.
Coefficient 1 is 1 for male and 0.75 for female.
Coefficient 2 is 1 for male and 0.85 for female.
function getC2 () {
var cc = parseFloat($("#kog").val());
if (cc == 1){
$('#kocc').val(1);
}
else {
$('#kocc').val("0.85");
}
}
$(document).ready(function() {
$('#kog').change(function(event) {
getC2();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="demo09a" class="gender" type="radio" name="gender" value="0.75" onClick="document.getElementById('kog').value=this.value">
<label for="demo09a">female</label>
<input type="radio" name="gender" id="demo09b" class="gender" value="1" onClick="document.getElementById('kog').value=this.value">
<label for="demo09b">male</label>
<br />
<input id="kog" type="text" name="Co1" readonly="true" placeholder="Coefficient 1 ">
<label for="kog">Coefficient 1 </label>
<br />
<input id="kocc" type="text" name="kocc" readonly="true" placeholder="Coefficient 2">
<label for="kocc">Coefficient 2</label>
<br />
Well you used jquery it would be easy to handle the radio button change using $('input[name=gender]').click(function(e) {}); see this example :
function getC2 () {
var cc = parseFloat($("#kog").val());
if (cc == 1){
$('#kocc').val(1);
}
else {
$('#kocc').val("0.85");
}
}
$(document).ready(function() {
$('input[name=gender]').click(function(e) {
$('#kog').val($(this).val());
getC2();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="demo09a" class="gender" type="radio" name="gender" value="0.75">
<label for="demo09a">female</label>
<input type="radio" name="gender" id="demo09b" class="gender" value="1">
<label for="demo09b">male</label>
<br />
<input id="kog" type="text" name="Co1" readonly="true" placeholder="Coefficient 1 ">
<label for="kog">Coefficient 1 </label>
<br />
<input id="kocc" type="text" name="kocc" readonly="true" placeholder="Coefficient 2">
<label for="kocc">Coefficient 2</label>
<br />
You were on the right track. But with jQuery you can always be more efficient. Take a look:
//lets set the event handlers
$('input[type=radio].gender').click(function(e){
//if the click comes from the female radio set coefficients differently
if ($(this).attr("id") == "demo09a")//female
{
$("#kog").val(0.75);
$("#kocc").val(0.85);
}
else
{
//male, select both id's and set to 1.
$("#kog, #kocc").val(1);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="demo09a" class="gender" type="radio" name="gender">
<label for="demo09a">female</label>
<input type="radio" name="gender" id="demo09b" class="gender" >
<label for="demo09b">male</label>
<br />
<input id="kog" type="text" name="Co1" readonly="true" placeholder="Coefficient 1 ">
<label for="kog">Coefficient 1 </label>
<br />
<input id="kocc" type="text" name="kocc" readonly="true" placeholder="Coefficient 2">
<label for="kocc">Coefficient 2</label>
<br />
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>