I have problem, my code does not accept one cliques. It is necessary to click twice to put a tick.
If you click on the checkbox once, the tick does not appear, but if you click the "Save" button, after the page is reloaded, the tick is on this checkbox.
JS
<script type="text/javascript">
var options = [];
$('.dropdown-menu a').on('click', function (event) {
// This was your original function which sets the checkbox as checked or unchecked, and draws the check mark
var $target = $(event.currentTarget),
val = $target.attr('data-value'),
$inp = $target.find('input[type="checkbox"]'),
idx;
if ((idx = options.indexOf(val)) > -1) {
options.splice(idx, 1);
setTimeout(function () { $inp.prop('checked', false) }, 0);
} else {
options.push(val);
setTimeout(function () { $inp.prop('checked', true) }, 0);
}
$(event.target).blur();
// This code is used to set the selection[] hidden input to true when the checkbox is checked
// and to false when the check mark is cleared
$tap = $target.find('input[name*="selection"]');
if ($inp.prop("checked")) {
$tap.val('true');
} else {
$tap.val('false');
}
return false;
});
var length = $('.dropdown-menu > option').length;
var cb = $('.dropdown-menu input[type=checkbox]:checked'); // Selected chechboxes
var cnt = $('.CompNameBox'); // Container where to output text
if (cb.length === 1)
cnt.text(cb.parent().text());
else if (cb.length > 1)
cnt.text('Selected ' + cb.length + ' companies');
else if (cb.length === 0)
cnt.text('Nothing selected');
HTML
<div>
<div class="row">
<div class="col-md-1">
<div class="btn-group" >
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" style="width: 180px"> <span class="CompNameBox"></span> <span class="caret"></span></button>
<ul class="dropdown-menu" style="width: 180px">
#if (Model.AvailableCompanies != null)
{
for (int i = 0; i < Model.AvailableCompanies.Count; i++)
{
if (Model.Companies.Contains(Model.AvailableCompanies[i], new CompanyViewModelComparer()))
{
<li>
<a href="#" class="small" data-value="option1" tabIndex="-1">
<input type="checkbox" checked /> #Html.DisplayTextFor(model => Model.AvailableCompanies[i].NAME)
<input type="hidden" name="selection[#i]" value="true"/>
<input type="hidden" name="ids[#i]" value="#Model.AvailableCompanies[i].ID" />
</a>
</li>
}
else
{
<li>
<a href="#" class="small" data-value="option1" tabIndex="-1">
<input type="checkbox" /> #Html.DisplayTextFor(model => Model.AvailableCompanies[i].NAME)
<input type="hidden" name="selection[#i]" value="false" />
<input type="hidden" name="ids[#i]" value="#Model.AvailableCompanies[i].ID" />
</a>
</li>
}
}
}
</ul>
</div>
</div>
</div>
</div>
HTML from Chrome
<div class="row">
<div class="col-md-1">
<div class="btn-group open">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" style="width: 180px" aria-expanded="true"> <span class="CompNameBox">Selected 2 companies</span> <span class="caret"></span></button>
<ul class="dropdown-menu" style="width: 180px">
<li>
<a href="#" class="small" data-value="option1" tabindex="-1">
<input type="checkbox" checked=""> TOro
<input type="hidden" name="selection[0]" value="true">
<input type="hidden" name="ids[0]" value="1">
</a>
</li>
<li>
<a href="#" class="small" data-value="option1" tabindex="-1">
<input type="checkbox"> My Comp
<input type="hidden" name="selection[1]" value="false">
<input type="hidden" name="ids[1]" value="2">
</a>
</li>
<li>
<a href="#" class="small" data-value="option1" tabindex="-1">
<input type="checkbox" checked=""> France
<input type="hidden" name="selection[2]" value="true">
<input type="hidden" name="ids[2]" value="3">
</a>
</li>
<li>
<a href="#" class="small" data-value="option1" tabindex="-1">
<input type="checkbox"> Germany Corp
<input type="hidden" name="selection[3]" value="false">
<input type="hidden" name="ids[3]" value="4">
</a>
</li>
</ul>
</div>
</div>
</div>
I think the problem occurs in var options = [], there is no value when initializing, but some input tags in your html code are already checked. So when you click the first time, js function can't take this tag from options. Remove from collection. Please modify the initialization method of options collection.
Related
I am creating a menu that shows and hides divs.
This part of the code is working.
function Mudarestado(el) {
var display = document.getElementById(el).style.display;
if(display == "none")
document.getElementById(el).style.display = 'block';
else
document.getElementById(el).style.display = 'none';
}
<div class="wrapper">
<div class="sidebar">
<h6 style="color: White">Registos</h6>
<ul class="nav1">
<li><a type="button" class="button" onclick="Mudarestado('minhaDiv')">Requisição Manutenção</a></li>
<li><a type="button" class="button" onclick="Mudarestado('minhaDiv1')">Pedidos de Informação</a></li>
</ul>
</div>
<div class="content isOpen">
<div id="minhaDiv" style="display:none;" class="divCaixa center1">
<form class="form15" method="POST" style="max-width: 100%; width: auto; display: table;">
<div class="modal-header">
<button style="float:right" class="btn btn-primary view_data12" data-toggle="modal" data-target="#dataModal11">Pedidos Manutenção</button>
</div>
<div class="modal-header">
<h4 class="modal-title">REQUISIÇÃO DE MANUTENÇÃO</h4>
</div>
<ul class="flex-outer">
<li>
<label for="Pedido">Requerente</label>
<select class="form-control" id="Pedido" name="Pedido" required="">
<?php
$sql = "SELECT * FROM raddb.Valencias WHERE Id IN ('3') ORDER BY Destino ASC";
$qr = mysqli_query($conn, $sql);
while($ln = mysqli_fetch_assoc($qr)){
echo '<option value="'.$ln['Id'].'">'.$ln['Destino'].'</option>';
}
?>
</select>
</li>
<li>
<label for="Assunto">Assunto</label>
<input type="text" class="form-control" id="Assunto" name="Assunto">
</li>
<li>
<label for="Descricao">Descrição</label>
<textarea rows="6" id="Descricao" placeholder="Digite o motivo da requisição"></textarea>
</li>
<li style="float: right">
<button type="button" class="btn btn-success" onclick="inserir_registo14()">Gravar</button>
</li>
</ul>
</form>
</div>
<div id="minhaDiv1" style="display:none;" class="divCaixa center1">
<form class="form6" method="POST" style="max-width: 100%; width: auto; display: table;">
<div class="modal-header">
<h4 class="modal-title">Pedidos de Informação Infância</h4>
</div>
<ul class="flex-outer">
<li>
<label for="DataRegisto2">Data do Contacto</label>
<input type="date" class="form-control" id="DataRegisto1" name="DataRegisto" value="<?php echo date("Y-m-d");?>">
</li>
<li>
<label for="Contacto">Responsável pelo Contacto</label>
<input type="text" class="form-control" id="Contacto" name="Contacto">
</li>
<li>
<label for="Telefone">Telefone (rede móvel)</label>
<input type="number" class="form-control" id="Telefone" name="Telefone">
</li>
<li>
<label for="NomeCrianca">Nome da Criança</label>
<input type="text" class="form-control" id="NomeCrianca" name="NomeCrianca">
</li>
<li>
<label for="DataNasc">Data Nascimento</label>
<input type="date" class="form-control" id="DataNasc" name="DataNasc" value="<?php echo date("Y-m-d");?>">
</li>
<li>
<label for="Visita">Visita</label>
<ul class="flex-outer">
<div class="form-check">
<label class="toggle">
<input type="radio" name="Visita" id="Visita1" value="Sim"> <span class="label-text"> Sim</span>
</label>
</div>
<div class="form-check">
<label class="toggle">
<input type="radio" name="Visita" id="Visita2" value="Não"> <span class="label-text">Não</span>
</label>
</div>
</ul>
</li>
<li>
<label for="DataVisita">Data da Visita</label>
<input type="date" class="form-control" id="DataVisita" name="DataVisita">
</li>
<li1>
<label for="Observacao1">Observações</label>
<textarea rows="6" id="Observacao1" name="Observacao1" placeholder="Digite a sua observação"></textarea>
</li1>
<li style="float: right">
<button type="button" class="btn btn-danger btn6" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-success" onclick="inserir_registo6()">Gravar</button>
</li>
</ul>
</form>
</div>
</div>
</div>
The problem is that when I have one div open and open another, it's not hiding the previous one and opens below the one that's already open.
I want to open the second div to hide the one that is open.
The problem is in js, but I am not advising to put that part I want to work
This is a possible solution:
function Mudarestado(el) {
var display = document.getElementById(el).style.display;
if(display == "none"){
document.getElementById(el).style.display = 'block';
document.getElementById(el).classList.add("active");
document.getElementByClassName("active").style.display = 'none';
document.getElementByClassName("active").classList.remove("active");
}else{
document.getElementById(el).style.display = 'none';
document.getElementByClassName(el).classList.remove("active");
}
}
I want to implement pagination for the result I get from an ajax request. The result is stored in multiple "div" tags arranged in the form of rows and columns. I read an answer that suggests using "DataTable" but I don't know if that library would work on divs
Below is my jquery code that creates div tags
$(document).ready(function () {
$.ajax({
type: "GET",
url: "${pageContext.request.contextPath}/listProducts",
success: createGrid,
error: function (data) {
alert("Error Occured")
}
})
})
function createGrid(data)
{
var main = $('#main')
var rows = data.length/3
var index = 0
var navigation = $('#navigation')
for(var rowIterator = 0; rowIterator < rows; rowIterator++)
{
var row = $(document.createElement("div")).addClass("agile_top_brands_grids");
for(var columnIterator = 0; columnIterator<3; columnIterator++)
{
if(data[index]!==undefined)
{
var column = '<div class="col-md-4 top_brand_left"><div class="hover14 column"><div class="agile_top_brand_left_grid"><div class="agile_top_brand_left_grid_pos"> <img src="${pageContext.request.contextPath}/resources/images/offer.png" alt=" " class="img-responsive"></div><div class="agile_top_brand_left_grid1"> <figure><div class="snipcart-item block"><div class="snipcart-thumb"> <img title=" " alt=" " src="${pageContext.request.contextPath}/resources/product-images/'+data[index].id+'.jpg" style="height:150px; width=150px;"><p>'+data[index].productName+'</p><h4>₹ '+data[index].price+' <span>$55.00</span></h4></div><div class="snipcart-details top_brand_home_details"><form action="#" method="post"><fieldset> <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="add" value="1"> <input type="hidden" name="business" value=" "> <input type="hidden" name="item_name" value="'+data[index].productName+'"> <input type="hidden" name="amount" value="'+data[index].productName+'"> <input type="hidden" name="discount_amount" value="1.00"> <input type="hidden" name="currency_code" value="INR"> <input type="hidden" name="return" value=" "> <input type="hidden" name="cancel_return" value=" "> <input type="submit" name="submit" value="Add to cart" class="button"></fieldset></form></div></div> </figure></div></div></div></div>'
row.append(column)
index++;
}
}
row.append('<div class="clearfix"></div>');
row.insertBefore(navigation)
}
}
I want each row to contain only three columns and at most 12 rows on a page.
Below is the html code
<div class="col-md-8 products-right" id="main">
<nav class="numbering" id="navigation">
<ul class="pagination paging">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active">1<span class="sr-only">(current)</span></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
I want to know how I can implement pagination here
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.
This javascript is supposed to change the drop down's HTML as well as change the content of the corresponding div's. The first click changes the dropdown html but you cant change it back as well as you lose the little arrow on the dropdown that let users know its a dropdown. The populate checkboxes doesnt populate the div because i dont know how to make javascript let me put/remove check boxes
JAVASCRIPT:
function changeSelection() {
var x = document.getElementById("populateSelection").id;
if (x == "selectionViews") {
document.getElementById("dropdownMenuSelect").innerHTML = "Views";
document.getElementById("populateCheckBoxes").innerHTML = "";
} else {
document.getElementById("dropdownMenuSelect").innerHTML = "Tables";
document.getElementById("unpopulateCheckBoxes").innerHTML = "";
}
}
the populateCheckBoxes is supposed to have these check boxes when the tables radio button is checked, and when the unpopulaeCheckBoxes radio button is checked the div will be empty. I dont have this code in anything yet because i believe its supposed to be in the javascript but pasting that in obviously doesnt work
<div class="checkbox">
<label>
<input type="checkbox" id="selectionCondition" checked/>50 million
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionDistribution"/>100 million
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionProgram"/>Status Quo
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionTreatment"/>Do Nothing
</label>
</div>
HTML:
This html holds the drop down that is supposed to change and the 2 divs that are supposed to change
<form role="form">
<div class="row">
<div class="radio col-xs-2" id="populateSelection" onchange="changeSelection()">
<label>
<input type="radio" name="optradio" id="selectionTables" />Use Tables
</label>
<label>
<input type="radio" name="optradio" id="selectionViews" />Use Views
</label>
</div>
<div class="dropdown col-xs-10">
<!--DROPDOWN BUTTON-->
<button class="btn btn-default dropdown-toggle btn-xs btn-orange" type="button" id="dropdownMenuSelect" data-toggle="dropdown" aria-expanded="true" style="margin-top:10px">
Views
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuSelect">
<!--DROPDOWN MENU-->
<li role="presentation"><a role="menuitem" tabindex="-1" class="link-no-jump" href="#graphOneChart">Chart</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" class="link-no-jump" href="#graphOneData">Data</a></li>
</ul>
</div>
</div>
<div class="row" id="populateCheckBoxes"></div>
<div class="row" id="unpopulateCheckBoxes"></div>
</form>
here is the working code, its pretty plain, but works the same way, http://codepen.io/MarkBond/pen/JdOZaw?editors=101. BTW this is done with bootstrap
Covering your whole Question, I think you want like this:
Updated the whole Answer:
HTML
<div class="radio col-xs-2" id="populateSelection" onchange="changeSelection()">
<label>
<input type="radio" name="optradio" id="selectionTables" />Use Tables
</label>
<label>
<input type="radio" name="optradio" id="selectionViews" />Use Views
</label>
</div>
Removed content inside ul and dynamically adding it:
<div class="dropdown col-xs-10">
<!--DROPDOWN BUTTON-->
<button class="btn btn-default dropdown-toggle btn-xs btn-orange" type="button" id="dropdownMenuSelect" data-toggle="dropdown" aria-expanded="true" style="margin-top:10px">
Views
<span class="caret"></span>
</button>
<ul id="dropdown-menu" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuSelect"></ul>
</div>
JS/JQuery
function changeSelection() {
if (document.getElementById("selectionTables").checked) {
var x = document.getElementById("dropdownMenuSelect");
var text = "Tables ";
text += "<span class='caret'>";
text += "</span>";
x.innerHTML = text;
document.getElementById("populateCheckBoxes").innerHTML = "";
var y = document.getElementById("dropdown-menu");
var text2 = "<li role='presentation'><a role='menuitem' tabindex='-1' class='link-no-jump' href='#graphOneChart'>";
text2 += "Chart 1";
text2 += "</a></li";
text2 += "<li role='presentation'><a role='menuitem' tabindex='-1' class='link-no-jump' href='#graphOneChart'>";
text2 += "Data 1";
text2 += "</a></li";
y.innerHTML = text2;
} else {
var x = document.getElementById("dropdownMenuSelect");
var text = "Views ";
text += "<span class='caret'>";
text += "</span>";
x.innerHTML = text;
document.getElementById("unpopulateCheckBoxes").innerHTML = "";
var y = document.getElementById("dropdown-menu");
var text2 = "<li role='presentation'><a role='menuitem' tabindex='-1' class='link-no-jump' href='#graphOneChart'>";
text2 += "Chart 2";
text2 += "</a></li";
text2 += "<li role='presentation'><a role='menuitem' tabindex='-1' class='link-no-jump' href='#graphOneChart'>";
text2 += "Data 2";
text2 += "</a></li";
y.innerHTML = text2;
}
}
WORKING:CODEPEN
Change your function to this
function changeSelection() {
if (document.getElementById("selectionViews").checked) {
document.getElementById("dropdownMenuSelect").innerHTML = "Views";
document.getElementById("populateCheckBoxes").innerHTML = "";
} else {
document.getElementById("dropdownMenuSelect").innerHTML = "Tables";
document.getElementById("unpopulateCheckBoxes").innerHTML = "";
}
}
Re-read this line:
var x = document.getElementById("populateSelection").id;
That's some pretty pointless logic. The ID of an element that you find with the ID populateSelection is always going to be populateSelection.
You should be using value attributes, and proper event handling.
DEMO
function changeSelection(e) {
var x = e.target.value;
if (x == "selectionViews") {
document.getElementById("dropdownMenuSelect").innerHTML = "Views";
document.getElementById("populateCheckBoxes").innerHTML = "";
} else {
document.getElementById("dropdownMenuSelect").innerHTML = "Tables";
document.getElementById("unpopulateCheckBoxes").innerHTML = "";
}
}
document.getElementById('populateSelection').addEventListener('change', changeSelection);
<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<form role="form">
<div class="row">
<div class="radio col-xs-2" id="populateSelection">
<label>
<input type="radio" name="optradio" value="selectionTables" />Use Tables
</label>
<label>
<input type="radio" name="optradio" value="selectionViews" />Use Views
</label>
</div>
<div class="dropdown col-xs-10">
<!--DROPDOWN BUTTON-->
<button class="btn btn-default dropdown-toggle btn-xs btn-orange" type="button" id="dropdownMenuSelect" data-toggle="dropdown" aria-expanded="true" style="margin-top:10px">
Views
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuSelect">
<!--DROPDOWN MENU-->
<li role="presentation"><a role="menuitem" tabindex="-1" class="link-no-jump" href="#graphOneChart">Chart</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" class="link-no-jump" href="#graphOneData">Data</a></li>
</ul>
</div>
</div>
<div class="row" id="populateCheckBoxes"></div>
<div class="row" id="unpopulateCheckBoxes"></div>
</form>
Some reading material:
EventTarget.addEventListener()
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>