get radio checked values and switch div without reload page - javascript

My first question here. I have two option groups, when I use the selected option of two groups, I expect the page to show result div ( without the page reloading )
My code is below
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="location" vaule="vn" checked>Viet Nam
</label>
<label class="btn btn-default">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="location" vaule="us">US
</label>
<label class="btn btn-default">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="location" vaule="eu">Europe
</label></div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="type" vaule="bikers" checked>bikers
</label>
<label class="btn btn-default">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="type" vaule="cars">cars
</label>
<label class="btn btn-default">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="type" vaule="planes">planes
</label>
</div>
I want, eg location == vn AND type == biker ==> replace div id=result by div id=vnbiker
or if location == eu AND type = cars ==> replace div id=result by div id=eunotplanes
When any radio button is changed, the result div should change too (without a page reload).


is this what you're looking for? http://jsfiddle.net/swm53ran/60/
i added <div id="result">vn + bikers</div> to the html
js:
$(document).ready(function() {
$('input:radio').on('change', function() {
var resultArray = [];
$('input:radio').each(function() {
if ($(this).is(':checked') == true) {
resultArray.push($(this).val());
}
});
$('#result').html(resultArray[0] + ' + ' + resultArray[1]); //or whatever you want to put here
});
});
pretty much what the js is doing is on change of any radio button, it searches through and finds the checked radio buttons and pushes their values into an array, then it puts those two values in div with id="result".
**also note: in your markup, you spelled value wrong ("vaule" is how its spelled in the question for all 6 radio button inputs).
hope this helps!
EDIT: to help you with your new requirements, i created a loop which iterates through the result array i previously set up. see demo: http://jsfiddle.net/swm53ran/68/
different code:
var html = '';
for (var i = 0; i < resultArray.length; i++) {
if (i == 0) {
html += resultArray[0];
}
else {
html += ' + ' + resultArray[i];
}
}
$('#result').html(html);


I made some modifications to your code, and added the necessary to make it a full HTML file, here it is:
<html>
<head>
<script type="text/javascript">
function clk () {
if ( ( document.getElementById("vn").checked == true ) &&
( document.getElementById("bk").checked == true ) )
{ document.getElementById("result").style.cssText =
document.getElementById("vnbiker").style.cssText;
document.getElementById("result").innerHTML =
document.getElementById("vnbiker").innerHTML;
return;
}
if ( ( document.getElementById("eu").checked == true ) &&
( document.getElementById("cr").checked == true ) )
{ document.getElementById("result").style.cssText =
document.getElementById("eunotplanes").style.cssText;
document.getElementById("result").innerHTML =
document.getElementById("eunotplanes").innerHTML;
}
}
</script>
</head>
<body>
<div id="vnbiker" style="background-color:green;">div vnbiker</div>
<div id="eunotplanes" style="background-color:orange;">div eunotplanes</div>
<!-- ABOVE IS MY NEW CODE -->
<!-- BELOW IS YOUR CODE, I ADDED "ID" AND "ONCLICK" TO RADIOBUTTONS -->
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="location" value="vn" id="vn" onclick="clk();">Viet Nam
</label>
<label class="btn btn-default">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="location" value="us" checked id="us" onclick="clk();">US
</label>
<label class="btn btn-default">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="location" value="eu" id="eu" onclick="clk();">Europe
</label></div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="type" value="bikers" checked id="bk" onclick="clk();">bikers
</label>
<label class="btn btn-default">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="type" value="cars" id="cr" onclick="clk();">cars
</label>
<label class="btn btn-default">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="type" value="planes" id="pl" onclick="clk();">planes
</label>
</div>
<!-- BELOW CODE IS MINE -->
<div id="result" style="background-color:magenta;">div result</div>
</body>
</html>

Related

How to change the input and label ids?

I making button when a click clones the input with label. I need to auto-increment the input and label ids while cloning.
My code changes the id for the div but not input and label ids.
any solution
var cloneCount = 1;
///////////////////////////////
var stdTrip = $("#parentImagesContainer").children(".childImagesContainer").first().clone('.addImage').attr('id', 'customFile' + cloneCount++).insertAfter($('[id^=customFile]:last'));
$(document).on('click', '.addImage',function() {
append_trips();
});
function append_trips() {
var objHtml = stdTrip.clone('.addImage').attr('id', 'customFile' + cloneCount++).insertAfter($('[id^=customFile]:last'));
$("#parentImagesContainer").append(objHtml);
}
//////////////////////////////////////////////
$(document).on("click", ".removeImage", function(){
if($('#parentImagesContainer .childImagesContainer').length > 1)
{
$(this).closest(".childImagesContainer").remove();
}
else
{
alert(300);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parentImagesContainer">
<div class="form-group m-form__group row childImagesContainer">
<label class="col-form-label col-lg-2">title</label>
<div class="col-lg-8">
<div></div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile" name="images[]">
<label class="custom-file-label" for="customFile">image</label>
</div>
</div>
<div class="col-2">
<a href="javascript:;" class="btn btn-brand m-btn m-btn--custom addImage">
<i class="fa fa-plus"></i>add
</a>
<a href="javascript:;" class="btn btn-danger m-btn m-btn--custom removeImage">
<i class="fa fa-minus"></i>remove
</a>
</div>
</div>
</div>

There should almost never be a need for auto-incrementing IDs.
In your case...
<input type="file" class="custom-file-input" id="customFile" name="images[]">
<label class="custom-file-label" for="customFile">image</label>
Should be...
<label class="custom-file-label">
<input type="file" class="custom-file-input" name="images[]">
image
</label>

How to check which checkbox is checked and save the data into database using Angular

I have 4 different checkboxes and when I check one(or two, or three, or all) I want to save some data into a database with a click on the button "Save". I'm using angular.
How I can do this?
I have this HTML code:
<div class="addMode1" style="display: none;">
<div class="form">
<form ng-submit="createReason(reasonsForm1.$valid)" name="reasonsForm1">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="database_address">Name of reason:</label>
<input type="text" class="form-control" ng-model="reasonname" placeholder="Име основание за добавяне" />
</div>
<div class="container">
<p>Using in::</p>
<input type="checkbox" ng-model="all">Buy<br>
<input type="checkbox" ng-checked="all">Sell<br>
<input type="checkbox" ng-checked="all">PKO<br>
<input type="checkbox" ng-checked="all">RKO
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Save</button>
<button class="btn btn-primary" id="cnlbtn1" type="button">Cancel</button>
<!--ng-click="createUser()"-->
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>
</div>
</div>
And Angular code(createReason function which saves data from input box into the database):
$scope.createReason=function()
{
var objectToSave = {
name: $scope.reasonname,
};
defaultAdapter.query('INSERT INTO reasons(name) VALUES(:name)',
{ replacements: objectToSave, type: Sequelize.QueryTypes.UPDATE }
).then(projects => {
console.log(projects);
$scope.editMode = false;
$scope.activeItem = false;
$scope.refresh();
});
}
Please help me.
Thanks!

enter image description here
<label><input type="checkbox" name="test" ng-model="testModel['item1']" /> Testing</label><br />
<label><input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2</label><br />
<label><input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3</label><br />
After this on submit check the testModel index value which one is true or false then send that value in database.
try this i hope its helpful to you

how retrieve the value from checkbox buttons on Bootstrap 4?

I Am using Bootstrap's button plugin for my buttons, currently I have 6 Checkbox buttons and I need a Method to retrieve the value of every checked button to make some calculations. But I cannot figure how, I tried searching here And found a pretty good way but for Radio Buttons and for a single checkbox but didn't find any for multiple.
how can I make a Jquery method for sweeping the btnGroup elements and retrieve all the checked values in an array?
Please help!!
PS. I Am not native English speaker and I Am pretty new to Jquery, so sorry if its a noob question.
Example Html:
<div class="btn-toolbar btn-group-toggle" data-toggle="buttons id="btnGroup">
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn1" id="" autocomplete="off" value="value1">value1</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn2" id="" autocomplete="off" value="value2">value2</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn3" id="" autocomplete="off" value="value3">value3</label>
</div>
</div>

You can use this selector:
$("#btnGroup input[type='checkbox']:checked")
To get all the checked checkboxes in the div with the id btnGroup. You can then use .each() to loop over all the checked boxes and use destructuring assignment to get the value of each checked box.
Here I have logged out each value as an example.
See example below:
let values = [];
$('.calculate').click(_ => {
values = [];
$("#btnGroup input[type='checkbox']:checked").each((_, {value}) => {
values.push(value);
});
console.log(values);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-toolbar btn-group-toggle" data-toggle="buttons" id="btnGroup">
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn1" id="" autocomplete="off" value="value1">value1</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn2" id="" autocomplete="off" value="value2">value2</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn3" id="" autocomplete="off" value="value3">value3</label>
</div>
</div>
<button class="calculate btn btn-primary btn-lg">Calculate</button>

How to perform if else operation in angular js depends on which radio button is selected?

I have two radio buttons in my project. Depending on which radio button is selected I need to send a command to back-end. I tried many ng-**** if else operations which didn't work for me. Kindly help me over the same
$scope.compareReference = function() {
if($scope.radoreslt is checked){
Factory.send("GetAddonData(CompareBkcXml,$scope.filetxt,File)");
}else{
Factory.send("GetAddonData(CompareBkcXml,$scope.filetxt,All)");
}
};
<div id="collapseTwo" class="panel-collapse collapse" aria-expanded="false">
<div class="box-body">
<div class="input-group">
<div class="form-group">
<label>
<input type="radio" ng-model="radoreslt" name="r1" checked>Compare with File Specific
</label>
<label>
<input type="radio" ng-model="radoreslt" name="r1">Compare All
</label>
</div>
<input type="text" class="form-control" ng-model="filetxt">
<span class="input-group-addon"><input type="File" onchange="copyMe(this)" ></span>
</div>
<br/>
<button class="btn btn-primary btn-sm" ng-click="compareReference()">Compare</button>
</div>
</div>

You should always pass a value attribute to each radio button since the bind model is updated with that value only. Here is an example.
<input type="radio" ng-model="radoreslt" name="r1" value="compareWithSpecific">
<input type="radio" ng-model="radoreslt" name="r1" value="compareAll">
JS
$scope.compareReference = function() {
if ($scope.radoreslt == "compareWithSpecific") {
Factory.send("GetAddonData(CompareBkcXml,$scope.filetxt,File)");
} else {
Factory.send("GetAddonData(CompareBkcXml,$scope.filetxt,All)");
}
};

how to get radio input value that the selector gotten using find() function

I try to get value from children element that each child (item) has input fields with the same name. To do that, I used each() function. I get problem when retrieving value from radio input, I get the value from radio input that shouldn't. Here the code
<div class="accordion" id="menu-ui-sortable" role="tablist" aria-multiselectable="true">
<div class="panel menu-item">
<a class="panel-heading collapsed" role="tab" id="heading-menu-item-1" data-toggle="collapse" data-parent="#menu-ui-sortable" href="#menu-item-settings-1" aria-expanded="false" aria-controls="menu-item-settings-1">
<h4 class="panel-title">Menu Item 1</h4>
<i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
<i class="item-type pull-right">Halaman Web</i>
</a>
<input type="hidden" name="menu_item_type" value="page"/>
<input type="hidden" name="menu_item_page_id" value="12"/>
<input type="hidden" name="menu_item_content_id" value=""/>
<input type="hidden" name="menu_item_url" value="www.example.com/page-12"/>
<div id="menu-item-settings-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-menu-item-1">
<div class="panel-body">
<label>Label Navigasi</label>
<input type="text" class="form-control" name="menu_item_title" value="label 1"/>
<label>Atribut Judul</label>
<input type="text" class="form-control" name="menu_item_attr_title" value="attr 1"/>
<p class="menu_item_target"><label><input type="checkbox" name="menu_item_target" value="1" checked=""> Buka tautan di tab baru</label></p>
<label>CSS Classes/Icon</label>
<input type="text" class="form-control" name="menu_item_classes" value="fa fa-glass"/>
<label>Letak CSS Classes/Icon</label>
<div class="radio">
<label><input type="radio" name="menu_item_classes_position" value="left" checked=""> Sebelah kiri label</label>
<label><input type="radio" name="menu_item_classes_position" value="right"> Sebelah kanan label</label>
</div>
<label class="move-button-handle">
<span>Pindahkan: </span>
Naik Satu
Turun Satu
Urutan Pertama
Urutan Terakhir
</label>
<div class="menu-item-actions submitbox">
<p class="link-to-original">Asli: <a class="a-link" href="http://wordpress.dev/new-page-page/">new page page</a></p>
<a class="item-delete danger-highlight" href="#">Hapus</a><span> | </span>
<a class="item-cancel" href="#">Cancel</a>
</div>
</div>
</div>
</div>
<div class="panel menu-item">
<a class="panel-heading collapsed" role="tab" id="heading-menu-item-2" data-toggle="collapse" data-parent="#menu-ui-sortable" href="#menu-item-settings-2" aria-expanded="false" aria-controls="menu-item-settings-2">
<h4 class="panel-title">Menu Item 2</h4>
<i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
<i class="item-type pull-right">Homepage Content</i>
</a>
<input type="hidden" name="menu_item_type" value="homepage-content"/>
<input type="hidden" name="menu_item_page_id" value=""/>
<input type="hidden" name="menu_item_content_id" value="4"/>
<input type="hidden" name="menu_item_url" value="#content-4"/>
<div id="menu-item-settings-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-menu-item-2">
<div class="panel-body">
<label>Label Navigasi</label>
<input type="text" class="form-control" name="menu_item_title" value="label 2"/>
<label>Atribut Judul</label>
<input type="text" class="form-control" name="menu_item_attr_title" value="attr 2"/>
<p class="menu_item_target"><label><input type="checkbox" name="menu_item_target" value="1"> Buka tautan di tab baru</label></p>
<label>CSS Classes/Icon</label>
<input type="text" class="form-control" name="menu_item_classes" value="fa fa-search"/>
<label>Letak CSS Classes/Icon</label>
<div class="radio">
<label><input type="radio" name="menu_item_classes_position" value="left"> Sebelah kiri label</label>
<label><input type="radio" name="menu_item_classes_position" value="right" checked=""> Sebelah kanan label</label>
</div>
<label class="move-button-handle">
<span>Pindahkan: </span>
Naik Satu
Turun Satu
Urutan Pertama
Urutan Terakhir
</label>
<div class="menu-item-actions submitbox">
<a class="item-delete danger-highlight" id="delete-2" href="#">Hapus</a><span> | </span>
<a class="item-cancel" id="cancel-2" href="#">Cancel</a>
</div>
</div>
</div>
</div>
<div class="panel menu-item">
<a class="panel-heading collapsed" role="tab" id="heading-menu-item-3" data-toggle="collapse" data-parent="#menu-ui-sortable" href="#menu-item-settings-3" aria-expanded="false" aria-controls="menu-item-settings-3">
<h4 class="panel-title">Menu Item 3</h4>
<i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
<i class="item-type pull-right">Tautan Tertentu</i>
</a>
<input type="hidden" name="menu_item_type" value="custom-link"/>
<input type="hidden" name="menu_item_page_id" value=""/>
<input type="hidden" name="menu_item_content_id" value=""/>
<div id="menu-item-settings-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-menu-item-3">
<div class="panel-body">
<label>URL</label>
<input type="text" class="form-control" name="menu_item_url" value="www.example.com"/>
<label>Label Navigasi</label>
<input type="text" class="form-control" name="menu_item_title" value="label 3"/>
<label>Atribut Judul</label>
<input type="text" class="form-control" name="menu_item_attr_title" value="attr 3"/>
<p class="menu_item_target"><label><input type="checkbox" name="menu_item_target" value="1"> Buka tautan di tab baru</label></p>
<label>CSS Classes/Icon</label>
<input type="text" class="form-control" name="menu_item_classes" value="fa fa-files"/>
<label>Letak CSS Classes/Icon</label>
<div class="radio">
<label><input type="radio" name="menu_item_classes_position" value="left" checked=""> Sebelah kiri label</label>
<label><input type="radio" name="menu_item_classes_position" value="right"> Sebelah kanan label</label>
</div>
<label class="move-button-handle">
<span>Pindahkan: </span>
Naik Satu
Turun Satu
Urutan Pertama
Urutan Terakhir
</label>
<div class="menu-item-actions submitbox">
<a class="item-delete danger-highlight" id="delete-3" href="#">Hapus</a><span> | </span>
<a class="item-cancel" id="cancel-3" href="#">Cancel</a>
</div>
</div>
</div>
</div>
</div>
<br/>
<button id="menu-nav-action" type="submit" class="btn btn-success btn-sm">Save</button>
The js
$(document).ready(function () {
$("#menu-ui-sortable").collapse().sortable({
placeholder: "ui-sortable-placeholder",
start: function(evt, ui ){
ui.placeholder.height(ui.helper.outerHeight());
},
helper: function(evt, ui){
var $clone = $(ui).clone();
$clone .css('position','absolute');
return $clone.get(0);
}
});
$(document).on('click', '#menu-nav-action', function (evt) {
var menuNav = [];
var ctn = 0;
$("#menu-ui-sortable > div.panel.menu-item").each(function () {
var menu_item_target = $(this).find('input[name="menu_item_target"]');
var menu_item_target_ = menu_item_target.is(':checked') ? menu_item_target.val() : '0';
var menu_item_classes_position = $(this).find('input[name="menu_item_classes_position"]');
var menu_item_classes_position_ = '';
for (var i = 0, length = menu_item_classes_position.length; i < length; i++) {
if (menu_item_classes_position[i].checked) {
menu_item_classes_position_ = menu_item_classes_position[i].value;
console.log(menu_item_classes_position_);
break;
}
}
/* Using each() function not work too */
/*$(menu_item_classes_position).each(function () {
if ($(this).is(':checked')) {
menu_item_classes_position_ = $(this).val();
console.log(menu_item_classes_position_);
}
});*/
menuNav.push({
nav_label: $(this).find('input[name="menu_item_title"]').val(),
nav_title_attr: $(this).find('input[name="menu_item_attr_title"]').val(),
nav_open_new_tab: menu_item_target_,
nav_css_classes: $(this).find('input[name="menu_item_classes"]').val(),
nav_css_classes_position: menu_item_classes_position_,
nav_type: $(this).find('input[name="menu_item_type"]').val(),
nav_link: $(this).find('input[name="menu_item_url"]').val(),
nav_order: ctn});
ctn++;
});
console.log(menuNav);
alert(JSON.stringify(menuNav));
});
});
Here the output:
[
{
"nav_label":"label 1",
"nav_title_attr":"attr 1",
"nav_open_new_tab":"1",
"nav_css_classes":"fa fa-glass",
"nav_css_classes_position":"", // **this should be "left"**
"nav_type":"page",
"nav_link":"www.example.com/page-12",
"nav_order":0
},
{
"nav_label":"label 2",
"nav_title_attr":"attr 2",
"nav_open_new_tab":"0",
"nav_css_classes":"fa fa-search",
"nav_css_classes_position":"", // **this should be "right"**
"nav_type":"homepage-content",
"nav_link":"#content-4",
"nav_order":1
},
{
"nav_label":"label 3",
"nav_title_attr":"attr 3",
"nav_open_new_tab":"0",
"nav_css_classes":"fa fa-files",
"nav_css_classes_position":"left",
"nav_type":"custom-link",
"nav_link":"www.example.com",
"nav_order":2
}
]
Based the HTML, the correct value for nav_css_classes_position in each item are "left", "right", and "left".
Here the demo: jsfiddle

you are using same radio names[name="menu_item_classes_position"]for every group. Use different names for each group.
In your example, there are 3 menu items containing radio buttons wrapped in accordion. But these radio buttons are acting as a one group. that is,when you select radio button of second menu item, it will deselect radio button of first menu item.

your problem is due to this
<input type="radio" name="menu_item_classes_position" value="left" checked="checked"> Sebelah kiri label</label>
All of your radio element belongs to same group name="menu_item_classes_position" , as per the documentation of the radio input only one button of a group can be checked at a time. This is why only in menu 3 the radio button is checked. You can confirm this in your fiddle as well.
You should give each set of radio button in a menu a different name to select the correct value.

Categories