I have a simple html form with a series of questions in a table. If a user answers yes to a yes/no radio button question I then want to show a hidden row that allows them to enter details into a textarea field. If they click No the textarea input should be cleared and hidden again.
Here's my html form with one yes/no question and one hidden row for more details if they click yes:
<form class="form-horizontal" action="#" method="post" id="questionForm">
<input type="hidden" name="recid" value="1">
<table class="table table-condensed table-hover table-bordered">
<tr>
<td><strong>Question 1</strong></td>
<td>please answer yes or no to this question</td>
<td>
<div class="controls">
<label class="radio inline">
<input type="radio" name="question1" id="question1" value="Yes" required>Yes </label>
<label class="radio inline">
<input type="radio" name="question1" id="question1" value="No" required>No </label>
<label for="question1" class="error"></label>
</div>
</td>
</tr>
<tr class="question1yes">
<td></td>
<td>Please describe this and when it started</td>
<td>
<div class="controls">
<textarea name="question1Details" rows="3"></textarea>
<label for="question1Details" class="error"></label>
</div>
</td>
</tr>
</table>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-primary">Continue</button>
<button type="reset" class="btn">Reset</button>
</div>
</div>
</form>
Here's my current script that isn't working:
$().ready(function() {
// validate the form when it is submitted
$("#questionForm").validate();
if($("#question1:checked").length != 0){
// yes is checked... show the dependent fields
$(".question1yes").show();
}else{
// hide it and blank the fields, just in case they have something in them
$(".question1yes").hide();
$("#question1Details").val("");
}
$("#question1").click(function(){
// show the dependent fields
if(this.value == "Yes"){
$("#question1yes").show();
}else{
// hide the dependent fields and blank them
$(".question1yes").hide();
$("#question1Details").val("");
}
});
});
I've setup a jsFiddle here that demonstrates my form as it currently stands. My optional row is starting as hidden but is not becoming visible when you click the yes radio button.
You can't have 2 elements with the same ID, to select them you can use $('.controls input[type="radio"]') or a class selector exemple $('.radio').
Your radio inputs have identical IDs, and that is not valid HTML. Also, it is breaking your code, because you can't manipulate them independently.
My advice:
Append _y and _n (or whatever you prefer) to the IDs, respectively. (Or use any other unique ID)
Bind the click events to the new IDs.
Code:
$("#question1_y").click(function () {
$(".question1yes").show();
});
$("#question1_n").click(function () {
$(".question1yes").hide();
$(".question1yes textarea").val("");
});
Try this
$().ready(function() {
// validate the form when it is submitted
$("#questionForm").validate();
if($("#question1:checked").length > 0){
// yes is checked... show the dependent fields
$(".question1yes").show();
}else{
// hide it and blank the fields, just in case they have something in them
$(".question1yes").hide();
$("#question1Details").val("");
}
$("#question1").click(function(){
// show the dependent fields
if($(this).val() == "Yes"){
$("#question1yes").show();
}else{
// hide the dependent fields and blank them
$(".question1yes").hide();
$("#question1Details").val("");
}
});
});
Demo
try this following it working as it should be
$("input:radio[name=question1]").click(function(){
// show the dependent fields
if(this.value == "Yes"){
$(".question1yes").show();
}else{
// hide the dependent fields and blank them
$(".question1yes").hide();
$("#question1Details").val("");
}
});
the problem is you are calling $("#question1yes").show(); instead of $(".question1yes").show(). question1yes is class implemented on tr not id.
Hope it will help you
Related
I have two forms with radio type inputs, I would like that when we check an input in the 1st form another input is automatically checked in the second.
Here is the code of the 1st form:
<div class="color-box cta-box">
<label>Colors</label>
<div class="vpc-single-option-wrap">
<input id="cta-couleur_noir-color-selector" type="radio" name="couleur-color-selector" data-field="couleur-field" checked="" data-qtip="no">
<label for="cta-couleur_Noir-color-selector" class="vpc-custom-color custom" data-selector="couleur-field" data-color="Noir" data-name="Noir" data-oriontip="Noir" style="background-color:#000000"></label>
</div>
<div class="vpc-single-option-wrap">
<input id="cta-couleur_bleu-color-selector" type="radio" name="couleur-color-selector" data-field="couleur-field" data-qtip="no">
<label for="cta-couleur_Bleu-color-selector" class="vpc-custom-color custom" data-selector="couleur-field" data-color="Bleu" data-name="Bleu" data-oriontip="Bleu" style="background-color:#0419bd"></label>
</div>
</div>
And here is the code of the 2nd form:
<div class="color-box cta-box">
<label>Colors</label>
<div class="vpc-single-option-wrap">
<input id="cta-texte-en-tete-centre_noir-color-selector" type="radio" name="texte-en-tete-centre-color-selector" data-field="texte-en-tete-centre-field" checked="" data-qtip="no">
<label for="cta-texte-en-tete-centre_Noir-color-selector" class="vpc-custom-color custom" data-selector="texte-en-tete-centre-field" data-color="Noir" data-name="Noir" data-oriontip="Noir" style="background-color:#000000"></label>
</div>
<div class="vpc-single-option-wrap">
<input id="cta-texte-en-tete-centre_bleu-color-selector" type="radio" name="texte-en-tete-centre-color-selector" data-field="texte-en-tete-centre-field" data-qtip="no">
<label for="cta-texte-en-tete-centre_Bleu-color-selector" class="vpc-custom-color custom" data-selector="texte-en-tete-centre-field" data-color="Bleu" data-name="Bleu" data-oriontip="Bleu" style="background-color:#0419bd"></label>
</div>
</div>
So I would like that when I check the input with the ID cta-couleur_noir-color-selector in the 1st form, the input with the ID cta-texte-en-tete-centre_noir-color-selector "is automatically checked in the second form and the same for the id" cta-couleur_bleu-color-selector "which would correspond to the ID" cta-texte-en-tete-center_bleu-color-selector .
I tried with this script but it doesn't work:
<script type="text/javascript">
jQuery('input[type=radio][name=couleur-color-selector]').on('change', function () {
if ( jQuery(this).attr('id') == 'cta-couleur_bleu-color-selector'.checked) {
jQuery('#cta-texte-en-tete-centre_bleu-color-selector').prop(checked, true);
}else
{
jQuery('#cta-texte-en-tete-centre_noir-color-selector').prop('checked', true);
}
});
</script>
Could someone help me?
You must set unique value for each radio box in 1st form.
and check when radio click => get value and check to same unique value in 2nd form.
example:
$(document).on('click', '[type="radio"]', function () {
let value = $(this).val();
$('[value="'+value+'"]').prop('checked', true);
});
How can i check the value of the radio box whether its Pearson or euclidean.
So what i have now is this:
if ($_SERVER['REQUEST_METHOD'] === 'POST')
{
if($_POST['radio'] == 'Euclidean'){
$get_recommendations = get_recommendations($new_videos,$user_data['username'], $sim_score='sim_euclidean');
}
}
// as default i want the pearson method to be used
else{
$get_recommendations = get_recommendations($new_videos,$user_data['username'], $sim_score='sim_pearson');
Do i have to have a button to subit the value chosen, or is there a way to get the value without having a submit button?
This is the form i have:
<form action="" method="post">
<div class="control-group">
<h1 style="font-size:22px;">Choose method to recommend with:</h1>
<label class="control control--radio">Pearson
<input type="radio" name="radio" value="Pearson" checked="checked"/>
<div class="control__indicator"></div>
</label>
<label class="control control--radio">Euclidean
<input type="radio" name="radio" value="Euclidean"/>
<div class="control__indicator"></div>
</label>
</div>
</form>
With jquery, give radio a class or id of radio for example:
$(document).ready(function()){
$('input:radio[name="radio"]').change(function()){
var value = $('form input[type=radio]:checked').val(); // Gets val of checked on change event
// code to manipulate it, can also be sent to a php file via ajax if you need it that way
}
}
Link for passing variables around jquery to php
Passing jQuery Value to PHP
I am using the following code to show "pers" and hide "bus" and vice versa
JQuery:
$('input[name="perorbus"]').click(function() {
if ($(this).attr('id') == 'bus') {
$('#showbus').show();
$('#showper').hide();
}
if ($(this).attr('id') == 'pers') {
$('#showper').show();
$('#showbus').hide();
}
});
HTML:
<fieldset id="perorbus">
<label style="font-size: large;">Personal Or Business?</label>
<br/>
<input type="radio" class="PerOrBus" value="pers" id="pers" name="perorbus"/>
<label style="font-size: medium;">Personal Customer</label>
<input type="radio" class="PerOrBus" id="bus" value="bus" name="perorbus"/>
<label style="font-size: medium;">Business Customer?</label>
<br/>
</fieldset>
<table id="showper">
<tr>
<td>Show Personal</td>
</table>
<table id="showbus">
<tr>
<td>Show Business</td>
</table>
Any other Radio button that I put on the page triggers this. They are all given a name attribute like the following:
<fieldset id="CACCc">
<input type="radio" id="1b" class="2b" value="4b" name="1b"/> Yes
<br/>
<input type="radio" id="id12" class="4class" value="4c" name="id12"/> No
<br/></fieldset>
However, I have to assign the name on doc ready with jquery like the following:
document.getElementById("1b").setAttribute('name', '1b');
document.getElementById("id12").setAttribute('name', 'id12');
This is due to me being limited to not using name attributes in the HTML (long story)
Any help would be great, thanks
Try going by the radio button and then the name of the radio button. Also use the change trigger. By the way, your fieldset has the same name. That could be an issue.
$(document).ready(function() {
// Update names
$('input[type=radio][name=perorbus]').change(function() {
if (this.id == 'bus') {
$('#showbus').show();
$('#showper').hide();
}
if (this.id == 'pers') {
$('#showper').show();
$('#showbus').hide();
}
});
});
The answer to my issue specifically is that is was a Sharepoint caching issue. Because I do not have access to remove cache, I simply renamed and re-id'd everything and got it working.
This will not solve other peoples issues, probably but the other answers should.
I am creating a form with multiple radio buttons and text boxes.
Each Text box is next to radio button like below:
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="correct_answer_id">
Correct
</label>
</div>
<label for="answer" class="col-sm-2 control-label">Answer 2</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="answer[]" placeholder="Answer" required>
</div>
</div>
There are several radio button and text box pair like above in the form.
On click of the radio button, i want to get whatever has been written in the corresponding text box
i am trying to use Jquery's next() function like below:
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).next('input[type="text"]').val());
}
});
But my log shows undefined. What i am doing wrong?
Try this : find parent div of radio and do next().next() to get input box div and then find input box to get value.
NOTE - You need not to check if ($(this).is(':checked')) as when you click on radio button it will get checked always.
$('input[type="radio"]').click(function(){
var value = $(this).closest('.radio').next().next('.col-sm-10').find('input[type=text]').val();
console.log(value );
});
use below code using parents(); see working fiddle
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).parents('div.radio').next().next('div.col-sm-10').find('input[type="text"]').val());
}
});
You should put the value that you want submitted in the value attribute of your input elements.
e.g. <input type="radio" name="correct_answer_id" value="correct">
Your click handler would change to:
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).val());
}
});
If there's some value that you don't want to place in the value attribute then it's still best to have a reference to the value in the input element instead of relying on a particular document layout.
Try this
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).parent().parent().siblings().find('input[type="text"]').val());
}
});
Working Demo
If you can change the html a little, here is a different approach http://jsfiddle.net/xa9cjLd9/1/
<div class="form-group">
<div class="radio">
<label data-for='answer[]'>
<input type="radio" name="correct_answer_id" />Correct</label>
</div>
<label for="answer" class="col-sm-2 control-label">Answer 2</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="answer[]" placeholder="Answer" required />
</div>
</div>
$('input[type="radio"]').click(function () {
if ($(this).is(':checked')) {
var data = $(this).closest('label').attr('data-for');
console.log($('input[name=' + '"' + data + '"' + ']').val());
}
});
Just Define a data attribute to the label , which contains the name of the related input.
I have a form that may only be one page or may be two pages depending on whether it is a single individual or two people applying. What I am doing right now is enabling a link that allows the user to get to the next group of form elements for their co-applicant via an onchange event that shows the link that will slideToggle the first users inputs and show the inputs for the additional users. It's a pretty lengthy form so I cut it down to a few elements so I could fiddle it out:
Das Fiddle is here
<form method="POST" id="refiLoanForm" action="mailto:i#i.com">
<!--START PRIMARY APPLICANT -->
<div id="primary-applicant">
<label>
Application Type
<select name="applicationType" id="applicationType" class="wider" required>
<option value="individual">Individual</option>
<option value="joint">Joint</option>
</select>
</label>
<br>
<label for="loan-amount" id="loan-amount-label">Requested Finance Amount
<input type="text" id="loan-amount" name="loanAmount" required/></label>
<br>
<label for="remaining-term">Current Loan Remaining Term
<input type="text" id="remaining-term" name="remainingTerm" max="3" size="3" required class="override"/>
</label>
<br>
CONTINUE TO CO-APPLICANT
</div>
<!--END PRIMARY APPLICANT -->
<!--START CO_APPLICANT -->
<div id="co-applicant" style="display: none">
Back to Primary Applicant
<br>
<label for="co-first-name">First Name
<input type="text" id="co-first-name" name="coApplicantGivenName" maxlength="32" required/>
</label>
<br>
<label for="co-last-name">Last Name
<input type="text" id="co-last-name" name="coApplicantFamilyName" maxlength="32" required/>
</label>
</div>
JS:
$('#refiLoanForm').validate({
onkeyup: false,
ignore: ":disabled",
submitHandler: function (form) { // for demo
alert('valid form');
return false;
}
});
$("#singleSubmitBtnLoan").bind('click', function () {
$('#refiLoanForm').valid();
});
//Handle the content being shown
$("#singleSubmitBtnLink2").on('click', function () {
$("#primary-applicant").slideToggle("slow");
$("#co-applicant").slideToggle("slow");
});
$("#backToPrimary").on('click', function () {
$("#primary-applicant").slideToggle("slow");
$("#co-applicant").slideToggle("slow");
});
$('#applicationType').on('change', function() {
if ($(this).val() === 'joint') {
$('.primaryApplicantSwitch').slideToggle("slow");
$('.jointApplicantSwitch').slideToggle("slow");
} else {
$('.primaryApplicantSwitch').slideToggle("slow");
$('.jointApplicantSwitch').slideToggle("slow");
}
});
So in theory, the user can enter the fields and hit submit and the form is either valid or throws some errors. Or, the user can add a co-applicant, and validate the form on the link click before toggling to the next group of inputs.
Any ideas on how I would bind all of this to the one button and get it to play nice with jquery.validate?
You cannot dynamically "toggle" the rules of input fields.
However, you can use the .rules() method to dynamically add/change/remove rules, which essentially mimics the behavior of a toggle.
Also, since you're talking about fields that are hidden, you'll need to disable the option that makes validation ignore all hidden fields.
ignore: []