I have multiple buttons that has a same class. When clicking the button, there's a form popups. how can I make it dynamic? so whenever I click a button not all form will popup.
See sample code below.
$(".plans-de-mesure-form-button").click(function(){
$(".evaluation-gratuite-form").fadeIn("slow");
});
a.plans-de-mesure-form-button {
cursor:pointer;
}
.evaluation-gratuite-form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listing">
<a class="plans-de-mesure-form-button">Evaluation</a>
<div class="evaluation-gratuite-form">
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
</div>
</div>
<div class="listing">
<a class="plans-de-mesure-form-button">Evaluation</a>
<div class="evaluation-gratuite-form">
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
</div>
</div>
up to your structure you can use $(this) and .next()
$(".plans-de-mesure-form-button").click(function(){
$(this).next(".evaluation-gratuite-form").fadeIn("slow");
});
to close the form
$('.Close_Button_Class').on('click',function(){
$(this).closest(".evaluation-gratuite-form").fadeOut("slow");
});
Try this way $(this).next(".evaluation-gratuite-form")
$(".plans-de-mesure-form-button").click(function(){
$(this).next(".evaluation-gratuite-form").fadeIn("slow");
});
a.plans-de-mesure-form-button {
cursor:pointer;
}
.evaluation-gratuite-form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listing">
<a class="plans-de-mesure-form-button">Evaluation</a>
<div class="evaluation-gratuite-form">
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
</div>
</div>
<div class="listing">
<a class="plans-de-mesure-form-button">Evaluation</a>
<div class="evaluation-gratuite-form">
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
</div>
</div>
More Elegant solution will be that which is DOM independent because there can be more elements who are siblings.
Use parents instead of parent function if a tag is present at nested levels.
So use below code:
$(".plans-de-mesure-form-button").click(function(){
$(this).parent('.listing').find(".evaluation-gratuite-form").fadeIn("slow");
});
Related
I have a series of dynamically generated div that each one has 4 radio buttons inside:
$(".wrapper").on("custom", ".item", function(){
$.each($(".item"),function(){
// Get all radio names and check if at least one is checked
var radio_groups = [];
$.each($(this).find('input[type="radio"]'), function(){
var myname= this.name;
if($.inArray( myname, radio_groups ) < 0){
radio_groups.push(myname);
}
});
console.log(radio_groups);
return false;
// Check if there is a radio selected for each radio group
for(var i=0; i<radio_groups.length; i++) {
if($(this).find('input[type="radio"][name="' + radio_groups[i] + '"]:checked').length <= 0) {
// $('input[type="radio"][name="' + radio_groups[i] + '"]').first().closest('.row').append('<p class="input-error">Please select one option.</p>');
$('input[type="radio"][name="' + radio_groups[i] + '"]').first().closest('.condition').append('<p class="input-error">Please select one option.</p>');
errors = true;
}
}
})
})
$('.item').trigger("custom");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
</div>
I have tried this but doesn't seem to work, mostly the problem is that the .item divs are dynamically generated with php.
I probably didn't understand the problem but why not just use querySelectorAll with a simple forEach like that:
let result = [];
document.querySelectorAll('.item').forEach((el) =>{
const radioboxname = el.querySelectorAll('input[type="radio"]')[0].name;
if(!result.includes(radioboxname)){
result.push(radioboxname);
}
});
console.log(result);
<div class="wrapper">
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_124">
<input type="radio" name="dynamic_name_124">
<input type="radio" name="dynamic_name_124">
<input type="radio" name="dynamic_name_124">
</div>
<div class="item">
<input type="radio" name="dynamic_name_125">
<input type="radio" name="dynamic_name_125">
<input type="radio" name="dynamic_name_125">
<input type="radio" name="dynamic_name_125">
</div>
<div class="item">
<input type="radio" name="dynamic_name_126">
<input type="radio" name="dynamic_name_126">
<input type="radio" name="dynamic_name_126">
<input type="radio" name="dynamic_name_126">
</div>
</div>
After comment by OP
I add an array and instead of select all radios i select all item divs and check the name of first radio button compare with array and include if wasn't include
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 have a multi-row form with single choice radio buttons in each row. I'd like the final <button> tag to be disabled until a radio button as been checked from each row.
I currently have a solution from a previous question (jQuery multi-step form: disable 'next' button until input is filled in each section) that removes the disabled attribute from the button when you select any radio button but i'd like to be more specific if possible.
Is this possible? Here's a Codepen of what I'm working on currently: https://codepen.io/abbasarezoo/pen/vdoMGX - as you can see when hit any radio in any row the disabled attribute comes off.
HTML:
<form>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio-row-2" />
<label for="radio-3">Radio 3</label>
<input type="radio" id="radio-3" name="radio-row-3" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-4" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-5" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-6" />
</div>
<button disabled>Next</button>
</fieldset>
</form>
jQuery:
$('fieldset input').click(function () {
if ($('input:checked').length >= 1) {
$(this).closest('fieldset').find('button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
You need to specify the same name for the radio button group so that only one radio button is selected per row. Then, you can simply compare the length of the checked radio button with the length of the radio button group like this,
$('fieldset input').click(function () {
var radioLength = $('.radio-group').length;
if ($('input:checked').length == radioLength) {
$('fieldset button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-3">Radio 3</label>
<input type="radio" id="radio-3" name="radio-row-1" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-2" />
<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-2" />
</div>
<button disabled>Next</button>
</fieldset>
</form>
I m new to jquery,I am supposed to do the simple task.If i click on the radio button means the text along with that radio button has to be bolded.please help me with this one.My HTML Markup is here
<form role="form">
<p><b>What concerns you most as you manage your business?</b>(Select all that apply.)</p>
<div class="radio active">
<label>
<input type="radio" name="optradio">IT infrastructure alignment with business goals and growth<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Controlling capital and expense<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Managing financial risk<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Data security and privacy<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Flexibility of services to meet customer needs<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Political climate for business<img /></label>
</div>
<div class="form-group radio">
<label>
<input type="radio" name="optradio">
</label>
<textarea class="form-control" rows="2" placeholder="Other(please specify)" id="comment"></textarea>
</div>
</form>
And my jquery code is here
$(document).ready(function(e) {
$(".radio label input").click(function() {
$('.radio').each(function(event) {
if ($(this).hasClass('active')) {
$(this).css("font-family", "helveticabold");
$('.radio').removeClass('active');
if ($(this).next().hasClass('radio'))
$(this).next().addClass('active');
else
$('.radio:last-child').addClass('active');
return false;
}
});
});
});
I know it needs small changes in code please help me out guys
You don't need to use each as only one radio can be selected.
This will do:
Javascript:
$('.radio').on('click', function() {
$('.bold').removeClass('bold');
$(this).addClass('bold');
});
CSS:
.bold {
font-weight: 800;
}
Demo: https://jsfiddle.net/tusharj/3zzaLre0/
You can use $(this) selector for that
$(document).ready(function(e) {
$("input[type='radio']").click(function() {
$("input[type='radio']").parent().css('font-weight','');
$(this).parent().css('font-weight','bold');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form role="form">
<p><b>What concerns you most as you manage your business?</b>(Select all that apply.)</p>
<div class="radio active">
<label><input type="radio" name="optradio"><span>IT infrastructure alignment with business goals and growth<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Controlling capital and expense<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Managing financial risk<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Data security and privacy<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Flexibility of services to meet customer needs<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Political climate for business<img /></label>
</div>
<div class="form-group radio">
<label><input type="radio" name="optradio"></label><span>
<textarea class="form-control" rows="2" placeholder="Other(please specify)" id="comment"></textarea>
</div>
</form>
I have:
<div class="group">
<input type="radio" name="myradio" value="1">a
<input type="radio" name="myradio" value="2">b
</div>
<div class="group">
<input type="radio" name="two" value="3">a
<input type="radio" name="two" value="4">b
</div>
<div class="group">
<input type="radio" name="aaa" value="5">a
<input type="radio" name="aaa" value="6">b
</div>
http://jsfiddle.net/jz84u/2/
How can i check if minimum one group is checked in this example? If no then should be alert('error').
I would like use jQuery.
$(".group").each(function(){
})
but how can i check this? For my example should be return error - any input is checked, but if i have:
<div class="group">
<input type="radio" name="myradio" value="1">a
<input type="radio" name="myradio" value="2">b
</div>
<div class="group">
<input type="radio" name="two" value="3">a
<input type="radio" name="two" value="4" checked="checked">b
</div>
<div class="group">
<input type="radio" name="aaa" value="5">a
<input type="radio" name="aaa" value="6">b
</div>
for this example is ok - input in second group is checked.
How can i validate this?
Will this fit your needs?
var n = $(".group input:checked").length;
if(n>0){do something}
Try like below it will work...
Add a button
<input type="button" value="check" id="btnCheck">
<div class="group">
<input type="radio" name="myradio" value="1">a
<input type="radio" name="myradio" value="2">b
</div>
<div class="group">
<input type="radio" name="two" value="3">a
<input type="radio" name="two" value="4">b
</div>
<div class="group">
<input type="radio" name="aaa" value="5">a
<input type="radio" name="aaa" value="6">b
</div>
write a jquery like below
$("#btnCheck").click(function() {
if($(".group input:radio:checked").val())
alert("checked");
else
alert("Nothing checked");
});
Fiddle : http://jsfiddle.net/jz84u/6/