Show text dropdown button with JavaScript in Laravel - javascript

I want to show my text in dropdown radio button like this:
but, my radio button error and nothing happen in my dropdown radio button:
How can I achieve this dropdown radio button? This is my code in view
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="dropdown dropdown-full-width dropdown-category">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="name">
<span id="category-select">Choose Category</span>
</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu row">
<div class="col-md-4">
<li><strong>By {{ $category[1] }}</strong></li>
#foreach($category1 as $occasions)
<li>
<div class="checkbox">
<label><input type="radio" name="category['occasions']" class="category-radio" value="{{ $occasions->id }}"> {{ $occasions->name }}</label>
</div>
</li>
#endforeach
</div>
<div class="col-md-4">
<li><strong>By {{ $category[2] }}</strong></li>
#foreach($category2 as $types)
<li>
<div class="checkbox">
<label><input type="radio" name="category['types']" class="category-radio" value="{{ $types->id }}"> {{ $types->name }}</label>
</div>
</li>
#endforeach
</div>
<div class="col-md-4">
<li><strong>By {{ $category[3] }}</strong></li>
#foreach($category3 as $flowers)
<li>
<div class="checkbox">
<label><input type="radio" name="category['flowers']" class="category-radio" value="{{ $flowers->id }}"> {{ $flowers->name }}</label>
</div>
</li>
#endforeach
</div>
</div>
</div>
<script type="text/javascript">
$('.category-radio').change(function() {
var category_occasions = $('input[name="category[\'occasions\']"]:checked').text() || '';
var category_types = $('input[name="category[\'types\']"]:checked').text() || '';
var category_flowers =$('input[name="category[\'flowers\']"]:checked').text() || '';
var output = category_occasions + ((category_occasions && category_types) ? ' - ' : '') + category_types + ((category_types && category_flowers) ? ' - ' : '') + category_flowers;
$('#category-select').text(output);
});
</script>


Your issue is really with Javascript/JQuery and you can simplify your problem to that.
In this case, you are requesting the text() of the checkbox, but in fact, it's the label that holds the value you are after:
var category_occasions = $('input[name="category[\'occasions\']"]:checked').parent().text() || '';
And an example:
$('.category-radio').change(function() {
var category_occasions = $('input[name="category[\'occasions\']"]:checked').parent().text().trim() || '';
var category_types = $('input[name="category[\'types\']"]:checked').parent().text().trim() || '';
var category_flowers = $('input[name="category[\'flowers\']"]:checked').parent().text().trim() || '';
var output = category_occasions + ((category_occasions && category_types) ? ' - ' : '') + category_types + ((category_types && category_flowers) ? ' - ' : '') + category_flowers;
$('#category-select').text(output);
console.log(output);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<label>
<input type="radio" name="category['occasions']" class="category-radio" value="birthday" />
Birthday</label>
<label>
<input type="radio" name="category['types']" class="category-radio" value="birthday" />
Bouqet</label>
<label>
<input type="radio" name="category['flowers']" class="category-radio" value="birthday" />
Daisies</label>
</li>
</ul>


You have to use Jquery parent() or closest('label') to select your element and you can easily get text with text().
Look at the snippet down.
$('.category-radio').change(function() {
var category_occasions = $('input[name="category[\'occasions\']"]:checked').parent().text();
var category_types = $('input[name="category[\'types\']"]:checked').parent().text();
var category_flowers = $('input[name="category[\'flowers\']"]:checked').parent().text();
var output = category_occasions + ((category_occasions && category_types) ? ' - ' : '') + category_types + ((category_types && category_flowers) ? ' - ' : '') + category_flowers;
$('#category-select').text(output);
});
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="dropdown dropdown-full-width dropdown-category">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="name">
<span id="category-select">Choose Category</span>
</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu row">
<div class="col-md-4">
<li><strong>By Occasions</strong></li>
<li>
<div class="checkbox">
<label><input type="radio" name="category['occasions']" class="category-radio" value="0">Anniversaries</label>
<label><input type="radio" name="category['occasions']" class="category-radio" value="1">Birthdays</label>
</div>
</li>
</div>
<div class="col-md-4">
<li><strong>By Types</strong></li>
<li>
<div class="checkbox">
<label><input type="radio" name="category['types']" class="category-radio" value="0">Baskets</label>
<label><input type="radio" name="category['types']" class="category-radio" value="0">Hampers</label>
</div>
</li>
</div>
<div class="col-md-4">
<li><strong>By Flowers</strong></li>
<li>
<div class="checkbox">
<label><input type="radio" name="category['flowers']" class="category-radio" value="0">Roses</label>
<label><input type="radio" name="category['flowers']" class="category-radio" value="0">Tulips</label>
</div>
</li>
</div>
</div>
</div>

Related

My Javascript code does not work on first click

my JavaScript code for removing items from cart does not work on first click . what should I do ? where is the problem ?!
*EDITED : Thank you for the first answer . I just uploaded my HTML for you to have a look . My mother container is actually "main-cart-content-container" .
function removeCartItem() {
for (i = 0; i < document.getElementsByClassName('main-cart-content-container').length; i++) {
let button = document.getElementsByClassName('fa-trash')[i];
let qty1 = document.getElementsByClassName('cart-qty')[i];
let rmv = document.getElementsByClassName('main-cart-content-container')[i];
button.onclick = function() {
if (qty1.value < 2) {
rmv.remove();
cartNum = cartNum - 1;
document.getElementById('counter-eclipse-num').innerText = cartNum;
} else {
qty1.value = qty1.value - 1;
cartNum = cartNum - 1;
document.getElementById('counter-eclipse-num').innerText = cartNum;
}
}
}
}
<div class="polygon-cart">
<i class="fas fa-shopping-cart" id="cart-icon"></i>
<div class="counter-eclipse">
<p class="counter-eclipse-num" id="counter-eclipse-num">4 </p>
</div>
<div class="main-cart-content-container" id="main-cart-content-container">
<div class="cart-content-container">
<span class="cart-price" dir="rtl">159 هزارتومان</span>
<div class="cart-qty-container">
<input dir="rtl" type="number" min="1" value="1" class='cart-qty' id="cart-qty" oninput="this.value =
!!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null">
<label for="cart-qty" class="cart-qty-label" dir="rtl">تعداد &nbsp : &nbsp</label>
</div>
اکانت بازی Battlefield V Deluxe Edition
<i class="fas fa-trash" id="trash-icon" onclick="removeCartItem()"></i>
<div class="cart-product-img-container">
<img src="/img/BFV.jpg" class="cart-product-img">
</div>
</div>
</div>
<div class="main-cart-content-container" id="main-cart-content-container">
<div class="cart-content-container">
<span class="cart-price" dir="rtl">559 هزارتومان</span>
<div class="cart-qty-container">
<input dir="rtl" type="number" min="1" value="3" class='cart-qty' id="cart-qty" oninput="this.value =
!!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null">
<label for="cart-qty" class="cart-qty-label" dir="rtl">تعداد &nbsp : &nbsp</label>
</div>
اکانت بازی Battlefield V Deluxe Edition
<i class="fas fa-trash" id="trash-icon" onclick="removeCartItem()"></i>
<div class="cart-product-img-container">
<img src="/img/BFV.jpg" class="cart-product-img">
</div>
</div>
</div>
<div class="cart-info-top">
<button class="cart-checkout-btn">تسویه نهایی</button>
<span class="cart-whole-price">جمع مبلغ سبد خرید شما : 200 هزارتومان</span>
</div>

I suggest you delegate
Native (vanilla) JS
document.querySelector(".polygon-cart").addEventListener("click", function(e) {
const tgt = e.target; // we may need a .closest("button") here
if (tgt.classList.contains("fa-trash")) {
const container = tgt.closest(".main-cart-content-container");
const qty = container.querySelector(".cart-qty").value
if (qty < 2) {
container.remove()
console.log("removed since qty < 2:",qty)
}
}
})
<div class="polygon-cart">
<i class="fas fa-shopping-cart" id="cart-icon"></i>
<div class="counter-eclipse">
<p class="counter-eclipse-num" id="counter-eclipse-num">4 </p>
</div>
<div class="main-cart-content-container">
<div class="cart-content-container">
<span class="cart-price" dir="rtl">159 هزارتومان</span>
<div class="cart-qty-container">
<input dir="rtl" type="number" min="1" value="1" class='cart-qty' id="cart-qty" oninput="this.value =
!!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null">
<label for="cart-qty" class="cart-qty-label" dir="rtl">تعداد &nbsp : &nbsp</label>
</div>
اکانت بازی Battlefield V Deluxe Edition
<i class="fas fa-trash" id="trash-icon">TRASH</i>
<div class="cart-product-img-container">
<img src="/img/BFV.jpg" class="cart-product-img">
</div>
</div>
</div>
<div class="main-cart-content-container">
<div class="cart-content-container">
<span class="cart-price" dir="rtl">559 هزارتومان</span>
<div class="cart-qty-container">
<input dir="rtl" type="number" min="1" value="3" class='cart-qty' id="cart-qty" oninput="this.value =
!!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null">
<label for="cart-qty" class="cart-qty-label" dir="rtl">تعداد &nbsp : &nbsp</label>
</div>
اکانت بازی Battlefield V Deluxe Edition
<i class="fas fa-trash" id="trash-icon">TRASH</i>
<div class="cart-product-img-container">
<img src="/img/BFV.jpg" class="cart-product-img">
</div>
</div>
</div>
<div class="cart-info-top">
<button class="cart-checkout-btn">تسویه نهایی</button>
<span class="cart-whole-price">جمع مبلغ سبد خرید شما : 200 هزارتومان</span>
</div>
jQuery
$(".polygon-cart").on("click", ".fa-trash", function(e) {
const $container = $(this).closest(".main-cart-content-container");
const qty = $container.find(".cart-qty").val();
if (qty < 2) $container.remove()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="polygon-cart">
<i class="fas fa-shopping-cart" id="cart-icon"></i>
<div class="counter-eclipse">
<p class="counter-eclipse-num" id="counter-eclipse-num">4 </p>
</div>
<div class="main-cart-content-container">
<div class="cart-content-container">
<span class="cart-price" dir="rtl">159 هزارتومان</span>
<div class="cart-qty-container">
<input dir="rtl" type="number" min="1" value="1" class='cart-qty' id="cart-qty" oninput="this.value =
!!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null">
<label for="cart-qty" class="cart-qty-label" dir="rtl">تعداد &nbsp : &nbsp</label>
</div>
اکانت بازی Battlefield V Deluxe Edition
<i class="fas fa-trash" id="trash-icon">TRASH</i>
<div class="cart-product-img-container">
<img src="/img/BFV.jpg" class="cart-product-img">
</div>
</div>
</div>
<div class="main-cart-content-container">
<div class="cart-content-container">
<span class="cart-price" dir="rtl">559 هزارتومان</span>
<div class="cart-qty-container">
<input dir="rtl" type="number" min="1" value="3" class='cart-qty' id="cart-qty" oninput="this.value =
!!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null">
<label for="cart-qty" class="cart-qty-label" dir="rtl">تعداد &nbsp : &nbsp</label>
</div>
اکانت بازی Battlefield V Deluxe Edition
<i class="fas fa-trash" id="trash-icon">TRASH</i>
<div class="cart-product-img-container">
<img src="/img/BFV.jpg" class="cart-product-img">
</div>
</div>
</div>
<div class="cart-info-top">
<button class="cart-checkout-btn">تسویه نهایی</button>
<span class="cart-whole-price">جمع مبلغ سبد خرید شما : 200 هزارتومان</span>
</div>

Show value dropdown button with JavaScript in Laravel

I want to show my value when I click the button like this:
I want to show that value using JavaScript, but I can't. Because this is make me confused.
This is code in view blade:
<!-- Category Field -->
<div class="form-group col-sm-6">
{!! Form::label('category_id', 'Category:') !!}
<div class="dropdown dropdown-full-width dropdown-category">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="name">
<span id="category-select">Choose Category</span>
</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu row">
<div class="col-md-4">
<li><strong>By {{ $category[1] }}</strong></li>
#foreach($category1 as $occasions)
<li>
<div class="checkbox">
<label><input type="radio" name="category['occasions']" class="category-radio"> {{ $occasions }}</label>
</div>
</li>
#endforeach
</div>
<div class="col-md-4">
<li><strong>By {{ $category[2] }}</strong></li>
#foreach($category2 as $types)
<li>
<div class="checkbox">
<label><input type="radio" name="category['types']" class="category-radio"> {{ $types }}</label>
</div>
</li>
#endforeach
</div>
<div class="col-md-4">
<li><strong>By {{ $category[3] }}</strong></li>
#foreach($category3 as $flowers)
<li>
<div class="checkbox">
<label><input type="radio" name="category['flowers']" class="category-radio"> {{ $flowers }}</label>
</div>
</li>
#endforeach
</div>
</div>
</div>
</div>
And this is code in Controller edit function
public function edit($id)
{
$product = $this->productRepository->findWithoutFail($id);
$store = Store::pluck('name', 'id')->all();
$photo = json_decode($product->photo_list);
$category = Category::pluck('name','id')->all();
$category1 = Category::where('parent_id','=',1)->pluck('name','id')->all();
$category2 = Category::where('parent_id','=',2)->pluck('name','id')->all();
$category3 = Category::where('parent_id','=',3)->pluck('name','id')->all();
if (empty($product)) {
Flash::error('Product not found');
return redirect(route('products.index'));
}
return view('products.edit',compact('product','store','category','photo','category1','category2','category3'));
}
UPDATE CODE
I try this code its work, but when I check 1 button or 2 button only. In other one give me result "undefined".
This is my update code in view blade:
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="dropdown dropdown-full-width dropdown-category">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="name">
<span id="category-select">Choose Category</span>
</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu row">
<div class="col-md-4">
<li><strong>By {{ $category[1] }}</strong></li>
#foreach($category1 as $occasions)
<li>
<div class="checkbox">
<label><input type="radio" name="category['occasions']" class="category-radio" value="{{ $occasions }}"> {{ $occasions }}</label>
</div>
</li>
#endforeach
</div>
<div class="col-md-4">
<li><strong>By {{ $category[2] }}</strong></li>
#foreach($category2 as $types)
<li>
<div class="checkbox">
<label><input type="radio" name="category['types']" class="category-radio" value="{{ $types }}"> {{ $types }}</label>
</div>
</li>
#endforeach
</div>
<div class="col-md-4">
<li><strong>By {{ $category[3] }}</strong></li>
#foreach($category3 as $flowers)
<li>
<div class="checkbox">
<label><input type="radio" name="category['flowers']" class="category-radio" value="{{ $flowers }}"> {{ $flowers }}</label>
</div>
</li>
#endforeach
</div>
</div>
</div>
<script type="text/javascript">
$('.category-radio').change(function() {
var category_occasions = $('input[name="category[\'occasions\']"]:checked').val();
var category_types = $('input[name="category[\'types\']"]:checked').val();
var category_flowers = $('input[name="category[\'flowers\']"]:checked').val();
var output = category_occasions + ((category_occasions && category_types) ? ' - ' : '') + category_types + ((category_types && category_flowers) ? ' - ' : '') + category_flowers;
$('#category-select').text(output);
});
</script>
Look my image for detail

You missed value attributes to your radio button. Checkout the below code and kindly repeat it for other fields also.
<label><input type="radio" name="category['occasions']" class="category-radio" value="{{ $occasions }}"> {{ $occasions }}</label>
Jquery
$('.category-radio').change(function() {
var category_occasions = $('input[name="category[\'occasions\']"]:checked').val() || '';
var category_types = $('input[name="category[\'types\']"]:checked').val() || '';
var category_flowers =$('input[name="category[\'flowers\']"]:checked').val() || '';
var output = category_occasions + ((category_occasions && category_types) ? ' - ' : '') + category_types + ((category_types && category_flowers) ? ' - ' : '') + category_flowers;
$('#category-select').text(output);
});

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.

JavaScript onchange function doesn't work

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()

Jquery onclick not working or responsive

I would like to get the a user's details when a user's name is clicked through jquery, I have the following script:
$(document).ready(function(){
$('.employee_identification').keyup(function() {
var employee_identification = $('.employee_identification').val();
html = '';
$.ajax({
type: "GET",
url: "<?php echo base_url(); ?>admin_profile/get_employee_names/" + employee_identification,
dataType: "json",
success: function(response) {
employee_name_results = $('#employee_name_results').empty();
$.each(response, function(i, response) {
var f_name = response.f_name;
var s_name = response.s_name;
var other_name = response.other_name;
var identification_no = response.identification_no;
var str = f_name + s_name + other_name;
var employee_id = response.employee_id;
employee_name_results.append('<label class="form-label-top">Employee Name : </label> <a id="employee_name_searched" class="employee_name_searched btn btn-success" href="#add_user_window" value="' + str + '">' + str + '</a></br> <label class="form-label-top"> Identification Number: </label><span>' + identification_no + '</span><input type="hidden" value="' + employee_id + '" class="employee_searched_id" id="employee_searched_id"/></br>');
});
},
error: function(data) {
alert(data);
}
});
});
$('.employee_name_searched').click(function() {
alert('clicked');
var employee_id = $('.employee_searched_id').val();
$.ajax({
type: "GET",
url: "<?php echo base_url(); ?>admin_profile/get_employee_name_clicked/" + employee_id,
dataType: "json",
success: function(response) {
$.each(response, function(i, response) {
var f_name = response.f_name;
var s_name = response.s_name;
var other_name = response.other_name;
var is_active = response.is_active;
var employee_id = response.employee_id;
$('#add_f_name').val(f_name);
$('#add_s_name').val(s_name);
$('#add_other_name').val(other_name);
$('#add_is_active').val(is_active);
$('#add_employee_id').val(employee_id);
});
},
error: function(data) {
alert(data);
}
});
});
});
//HTML
<div> <a class="add_zone btn btn-success" id="add_user" href="#employee_search_window">
<i class="icon-plus-sign icon-white"></i>
Add User
</a> </div>
<!-- Employee User name search begins here -->
<div id="employee_search_window" class="employee_search_window" style="display: none !important;">
<form>
<div class="form-all">
<ul class="form-section">
<li id="cid_30" class="form-input-wide">
<label>Employee's Identification Number : <span class="form-required">*</span> </label>
</li>
<li>
<p class="red important">
Please provide employees Identification number :
</p>
<input type="text" class="employee_identification" id="employee_identification"/>
</li>
</ul>
</div>
<div id="employee_name_results" class="employee_name_results">
<label class="form-label-top">Employee Name : </label>
</div>
</form>
</div>
<!-- Add User Details Begins from here -->
<div id="add_user_window" style="display:none !important;">
<form class="add_user_form" id="add_user_form" method="post" >
<div class="form-all">
<ul class="form-section">
<li id="cid_30" class="form-input-wide">
<div class="form-header-group">
<h2 id="header_30" class="form-header">
User Information
</h2>
</div>
</li>
<li class="form-line" id="id_5">
<label class="form-label-top" id="label_5" for="user_name">
User Name<span class="form-required">*</span>
</label>
<div id="cid_5" class="form-input-wide">
<input type="text" class="form-number-input user_name form-textbox validate[required, Numeric]" id="user_name" name="add_user_name" style="width:204px" size="23" maxlength="8" data-type="input-number" />
</div>
</li>
<li class="form-line form-line-column" id="id_6">
<label class="form-label-top" id="label_6" for="f_name">
First Name<span class="form-required">*</span>
</label>
<div id="cid_6" class="form-input-wide">
<input type="text" class=" form-textbox f_name validate[required]" id="f_name" name="add_f_name" size="30" />
</div>
</li>
<li class="form-line form-line-column" id="id_6">
<label class="form-label-top" id="label_6" for="s_name">
Sur Name<span class="form-required">*</span>
</label>
<div id="cid_6" class="form-input-wide">
<input type="text" class=" form-textbox zone_rate validate[required]" id="s_name" name="add_s_name" size="30" />
</div>
</li>
<li class="form-line form-line-column" id="id_6">
<label class="form-label-top" id="label_6" for="other_name">
Other Name<span class="form-required">*</span>
</label>
<div id="cid_6" class="form-input-wide">
<input type="text" class=" form-textbox zone_rate validate[required]" id="other_name" name="add_other_name" size="30" />
</div>
</li>
<li class="form-line form-line-column" id="id_6">
<label class="form-label-top" id="label_6" for="employee_type">
Employee Type<span class="form-required">*</span>
</label>
<div id="cid_6" class="form-input-wide">
<select name="add_employee_type">
<?php ?>
<option>Select Employee Type</option>
<option value="Administrator">Administrator</option>
<option value="Director">Director</option>
<option value="Manager">Manager</option>
<option value="Accounts">Accounts</option>
</select>
</div>
</li>
<li class="form-line form-line-column" id="id_36">
<label class="form-label-top" id="label_36" for="is_active">
Is Active ?<span class="form-required">*</span>
</label>
<div id="cid_36" class="form-input-wide">
<select name="add_is_active">
<option value="Yes" >Yes</option>
<option value="No">No</option>
</select>
</div>
</li>
<li>
<input id="add_employee_id" class="add_employee_id" type="text"/>
</li>
<li class="form-line" id="id_27">
<div id="cid_27" class="form-input-wide">
<div style="text-align:left" class="form-buttons-wrapper">
<input type="submit" id="add_user_button" class="add_user_button" value="Add New User Details" />
</div>
</div>
</li>
</ul>
</div>
</form>
<p class="center">
</p>
<div class="clearfix"></div>
</div>
<!-- End of Add Employee Details -->
When the employee_name_searched is clicked, the second function which is a click should run to fetch the user's details but there's no response at all from the click. What have I done wrong? I keep getting the following error : TypeError: e._impala is undefined

You create the element after adding the event listener. Either you need to use .on() or you need to bind the event to each element upon its creation.

Move your click() function inside of your keyup() function after where you create your employee_name_searched element.
The reason you must do this is because you are binding your on click function to a non-existent element on page load because you have it inside of your on ready function. You have not yet made a key movement so your element has yet to be created.
Try this:
$('.employee_identification').keyup(function() {
// ajax request and append your new element
// bind your on click function to the element
$('.employee_name_searched').click(function() {
});
});

Categories