multiple radio buttons forms with jquery - javascript

I have a form that will be presented multiple times dynamically with php depending on the amount of data from the database.
For our example let's say that we have 2 objects and by that we have 2 similar forms. for example:
<form name="form1">
<li class="list-group-item">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" class="btn btn-danger" value="no" id="option1" autocomplete="off"> Not going
</label>
<label class="btn btn-default">
<input type="radio" name="options" class="btn btn-success" value="maybe" id="option2" autocomplete="off"> Maybe
</label>
<label class="btn btn-default">
<input type="radio" name="options" class="btn btn-success" value="going" id="option3" autocomplete="off"> Going
</label>
</div>
</li>
</form>
My current jquery code is:
$(document).ready(function() {
$("input:radio").change(function(){
var form = $(this);
var form1 = $('input:radio[name=options]:checked').val();
var form2 = $('input:radio[name=options2]:checked').val();
console.log("option 1:" + form1);
console.log("option 2:" + form2);
});
});
as you can see I am creating a new var to be assigned with each form value.
I am looking for a build to build this dynamically based on the amount of forms created without having to create a var for each form hardcoded.
Thanks,
Nimi

Related

Change radio on click with given background color

I am trying to change the Bootstrap v5 class of the buttons when they are clicked. They all have a same background-color constant (#cd6133). However when clicked i'd like then to have the following colors; and also radio button to be hidden and bootstrap button to be visible with provided colors
btn-default (#cd6133)
Entry (#05c46b)
Proffessional (#2c2c54)
Excutive (#227093)
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="change" id="entry" value="1" autocomplete="off">Entry
</label>
<label class="btn btn-default">
<input type="radio" name="change" id="proffessional" value="2" autocomplete="off">Proffessional
</label>
<label class="btn btn-default">
<input type="radio" name="change" id="excutive" value="3" autocomplete="off">Excutive
</label>
</div>
<script>
$("#cd6133").on("click", function() {
var classArr = ["#05c46b", "#2c2c54", "#227093"];
$("#cd6133").removeClass(classArr.toString().replace(/,/g," "));
var value = $(this).find("input[name='change']").val();
$(this).addClass(classArr[value - 1]);
});
</script>

Update buttons-group checked state according to value in controller

I have buttons-group as filter like the following snapshot:
after selecting one, I update my filter object by calling a controller action.
The problem is, when I reload the page my buttons-group in view come back to initial state.
I'm new in web app programming, I don't know if I should use a html helper to linking the html components with filter model, or simply use a javascript onload event to populate my buttons-group. I already tested the last one but it doesn't work.
window.onload = function() {
document.getElementById("element2").checked = true;
}
<div id="session_group" class="filter-group">
<label for="session_group" class="control-label col-sm-3">Session </label>
<div class="btn-group user_toggle" data-toggle="buttons">
<label class="btn btn-default btn-large btn-info active">
<input type="radio" name="session_group_btn" id="element1" value="All" autocomplete="off">All
</label>
<label class="btn btn-default btn-large btn-info">
<input type="radio" name="session_group_btn" id="element2" value="1" autocomplete="off">Automne
</label>
<label class="btn btn-default btn-large btn-info">
<input type="radio" name="session_group_btn" id="element3" value="2" autocomplete="off">Automne A
</label>
<label class="btn btn-default btn-large btn-info">
<input type="radio" name="session_group_btn" id="element4" value="3" autocomplete="off">Été
</label>
<label class="btn btn-default btn-large btn-info">
<input type="radio" name="session_group_btn" id="element5" value="4" autocomplete="off">Été A
</label>
<label class="btn btn-default btn-large btn-info">
<input type="radio" name="session_group_btn" id="element6" value="5" autocomplete="off">Printemps
</label>
<label class="btn btn-default btn-large btn-info">
<input type="radio" name="session_group_btn" id="element7" value="6" autocomplete="off">Printemps/Été
</label>
</div>
</div>
Thank you for your help.
To manually enable a button in the group, you need to use the Bootstrap button's toggle method $().button('toggle')
$(document).ready(function{
// Toggles push state. Gives the button the appearance that it has been activated.
$("#element2").parent().button('toggle');
});
Reference Link:
https://getbootstrap.com/docs/4.3/components/buttons/#checkbox-and-radio-buttons

Setting hidden field value with bootstrap radion button

I am have some trouble with setting the value of a hiddenfield with a boostrap radio button. here is the button group with the radio buttons and the hiddenfield.
<div class="myRow">
<div class="smallCol">
<div class="btn-group hiddenRFIDValue" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" class="btn" name="options" id="alwaysRFID" autocomplete="off">
Always
</label>
<label class="btn btn-default">
<input type="radio" class="btn" name="options" id="neverRFID" autocomplete="off">
Never
</label>
<label class="btn btn-default">
<input type="radio" class="btn" name="options" id="sometimesRFID" autocomplete="off">
Sometimes
</label>
</div>
</div>
</div>
</div>
<asp:HiddenField ID="hiddenRFIDValue" runat="server" />
Here is the script that i am trying to set the value with.
<script>
$(".hiddenRFIDValue .btn").click(function () {
// whenever a button is clicked, set the hidden helper
$("#hiddenRFIDValue").val($(this).text());
});
</script>
Hope one of you can help with it. Thanks
I fixed it! when the html is generated it changed the id of the hidden field so the scipt needed to look like this.
<script>
$(".hiddenRFIDValue .btn").click(function () {
$("#MainContent_hiddenRFIDValue").val($(this).text());
});
</script>

get child element that gets selected inside div element [duplicate]

This question already has answers here:
In jQuery, how do I select an element by its name attribute?
(18 answers)
Closed 7 years ago.
How do I get the radio button that is checked from inside my div
Here is my jquery but c is returning undefined
$('#SpaceType').change(function () {
var kids = $(this).children();
$(kids).each(function() {
var c = $(this).data('id');
});
});
Here is my div
<div class="btn-group" data-toggle="buttons" id="SpaceType">
<label id="SpaceTypeLabelHouse" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="0"> House
</label>
<label id="SpaceTypeLabelApartment" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="1"> Apartment
</label>
<label id="SpaceTypeLabelStudio" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="2"> Studio
</label>
<label id="SpaceTypeLabelOther" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="3"> Other
</label>
</div>
Use the :checked selector
$('#SpaceType').change(function () {
var c = $(this).find(':checked').attr('id');
alert(c)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="SpaceType">
<label id="SpaceTypeLabelHouse" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="0"> House
</label>
<label id="SpaceTypeLabelApartment" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="1"> Apartment
</label>
<label id="SpaceTypeLabelStudio" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="2"> Studio
</label>
<label id="SpaceTypeLabelOther" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="3"> Other
</label>
</div>
In your case you are iterating over the children of SpaceType which are the label elements and they don't have an id, also you are reading the data called id not the id attribute.

How to check input radio from a button - AngularJS

I'm trying to make a work a simple task without lucky, I'm trying to check an input radio by clicking on a button. Each input radio as their button. How do you achieve that in angular way?
<button class="btn btn-primary">
<input type="radio" ng-model="color" value="1">
</button>
<button class="btn btn-primary">
<input type="radio" ng-model="color" value="2">
</button>
<button class="btn btn-primary">
<input type="radio" ng-model="color" value="3">
</button>
How you can see I put the input inside the element button, if you have different thoughts please correct me.
Set the associated ng-model equal to the value of the radio you want selected:
<button class="btn btn-primary" ng-click="color = 1">
<input type="radio" name="radioGroup" ng-model="color" value="1">
</button>
Use <label> and style it as button:
<label class="btn btn-default"> Button 1
<input type="radio" ng-model="color" value="1">
</label>
<label class="btn btn-default"> Button 2
<input type="radio" ng-model="color" value="2">
</label>
and add css to hide the input[type="radio"].
Not everything needs Angular.

Categories

Resources