We Keep Coding

Multistep form validate steps & display error messages

I have multiple step form to submit project details divided into three sections which is #account_information, #personal_information & #project_information. I'm facing two issues with this approach:
1- If there is an error in validate the section I can not see the field highlighted in red Also not message display below that field.
2- input file field even if you select a file it will still display an error which not allow me to move into next step ?
$(document).ready(function (){
let multiStepsArea = ['#account_information', '#personal_information', '#project_information']
let currentNum = 0;
$('.next').click(function(){
var form = $("#AddProjectForm");
form.validate({
rules: {
stay_address_field: {
required: true,
},
},
messages: {
stay_address_field: {
required: "يجب تحديد مكان الإقامة",
},
}
});
if (form.valid() == true){
if(currentNum === 0) {
current_fs = $(multiStepsArea[currentNum]);
currentNum++;
next_fs = $(multiStepsArea[currentNum]);
next_fs.show();
current_fs.hide();
}else if(currentNum === 1) {
current_fs = $(multiStepsArea[currentNum]);
currentNum++;
next_fs = $(multiStepsArea[currentNum]);
next_fs.show();
current_fs.hide();
}
}
});
$('.previous').click(function(){
if(currentNum === 1) {
current_fs = $(multiStepsArea[currentNum]);
currentNum--;
next_fs = $(multiStepsArea[currentNum]);
next_fs.show();
current_fs.hide();
}else if(currentNum === 2) {
current_fs = $(multiStepsArea[currentNum]);
currentNum--;
next_fs = $(multiStepsArea[currentNum]);
next_fs.show();
current_fs.hide();
}
});
});
<form action="{{ route('StoreProjectUser') }}" id="AddProjectForm" method="POST" enctype="multipart/form-data">
#csrf
<section class="target_box">
<fieldset id="account_information" class="">
<div id="div1" class="target">
<h4 class="mt-3">أولاً: السيرة الذاتية باللغة العربية وتشمل على:</h4>
<h6 class="mt-3">1- بيانات المشارك الشخصية</h6>
<div class="form-group mt-3">
<label class="form-label">الجنس <span class="text-danger">*</span></label>
<div class="form-check">
<input class="form-check-input" type="radio" name="Radiobtn" id="maleRadiobtn" value="M" checked>
<label class="form-check-label" for="maleRadiobtn">
ذكر
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="Radiobtn" id="femaleRadiobtn" value="F">
<label class="form-check-label" for="femaleRadiobtn">
أنثى
</label>
</div>
#error('Radiobtn')
<span class="text-danger"> {{ $message }} </span>
#enderror()
</div>
<div class="row mt-3">
<label for="stay_address_field" class="form-label">مكان الإقامة <span class="text-danger">*</span></label>
<input type="text" name="stay_address_field" id="stay_address_field" class="form-control" placeholder="" value="{{old('stay_address_field')}}" required />
#error('stay_address_field')
<span class="text-danger"> {{ $message }} </span>
#enderror()
</div>
<div class="row mt-3">
<label for="civil_id_image_field" class="form-label">صورة واضحة وملونة للبطاقة المدنية <span class="text-danger">*</span></label>
<input type="file" name="civil_id_image_field" id="civil_id_image_field" class="form-control" placeholder="" accept=".png, .jpg, .jpeg" required />
#error('civil_id_image_field')
<span class="text-danger"> {{ $message }} </span>
#enderror()
</div>
<div class="row mt-3">
<div class="hstack gap-2 justify-content-end">
<a class="btn btn-light Single next" target="2">التالي</a>
</div>
</div>
</div>
</fieldset>
<fieldset id="personal_information" class="">
<div id="div2" class="target">
<h4 class="mt-3">أولاً: السيرة الذاتية باللغة العربية وتشمل على:</h4>
<h6 class="mt-3">2- بيانات المشارك الميدانية</h6>
<div class="row mt-3">
<label for="participate_category_field" class="form-label">فئة المشارك <span class="text-danger">*</span></label>
<select class="form-select" aria-label="Default select example" name="participate_category_field" id="participate_category_field" required >
<option selected disabled>--حدد فئة المشارك--</option>
<option value="1">طالب</option>
<option value="2">معلم</option>
<option value="3">موظف</option>
<option value="4">إشرافي</option>
<option value="5">ولي أمر</option>
<option value="6">تربوي متقاعد</option>
<option value="7">غير ذلك</option>
</select>
#error('participate_category_field')
<span class="text-danger"> {{ $message }} </span>
#enderror()
</div>
<div class="row mt-3">
<label for="governorate_field" class="form-label">المحافظة <span class="text-danger">*</span></label>
<input type="text" name="governorate_field" id="governorate_field" class="form-control" placeholder="" value="{{old('governorate_field')}}" required />
#error('governorate_field')
<span class="text-danger"> {{ $message }} </span>
#enderror()
</div>
<div class="row mt-3">
<label for="certificate_concern_field" class="form-label">صورة واضحة بنوع لشهادة تزكية من مدير المدرسة / مدير المؤسسة <span class="text-danger">*</span></label>
<input type="file" name="certificate_concern_field" id="certificate_concern_field" class="form-control" placeholder="" accept=".png, .jpg, .jpeg" required />
#error('certificate_concern_field')
<span class="text-danger"> {{ $message }} </span>
#enderror()
</div>
<div class="row mt-3">
<div class="hstack gap-2 justify-content-end">
<a class="btn btn-light Single previous" target="1">تراجع</a>
<a class="btn btn-light Single next" target="3">التالي</a>
</div>
</div>
</div>
</fieldset>
<fieldset id="project_information" class="">
<div id="div3" class="target">
<h4 class="mt-3">ثانياً: الملف الإنجازي باللغة العربية ويشمل على:</h4>
<h6 class="mt-3">بيانات المشروع وتشمل التالي:</h6>
<div class="row mt-3">
<label for="project_title_field" class="form-label">اسم المشروع <span class="text-danger">*</span></label>
<input type="text" name="project_title_field" id="project_title_field" class="form-control" placeholder="" value="{{old('project_title_field')}}" required />
#error('project_title_field')
<span class="text-danger"> {{ $message }} </span>
#enderror()
</div>
<div class="row mt-3">
<label for="project_shorts_field" class="form-label">وصف مختصر للمشروع</label>
<input type="text" name="project_shorts_field" id="project_shorts_field" class="form-control" placeholder="" value="{{old('project_shorts_field')}}" required />
#error('project_shorts_field')
<span class="text-danger"> {{ $message }} </span>
#enderror()
</div>
<div class="row mt-3">
<label for="project_images_field" class="form-label">ملف صوري بنوع ( jpg, png ) يصف المشروع ب 10 صور كبيرة قياس ( 1070*1600 ) ملونة وواضحة. <span class="text-danger">*</span></label>
<input type="file" name="project_images_field[]" id="project_images_field" class="form-control" placeholder="" multiple required />
#error('project_images_field')
<span class="text-danger"> {{ $message }} </span>
#enderror()
</div>
<div class="form-check mt-3 text-right">
<input type="checkbox" name="accept_terms_field" id="accept_terms_field" class="form-check-input" required />
<label for="accept_terms_field" class="form-check-label float-right">أقر بأن جميع البيانات أعلاه صحيحة وأنني صاحب المشروع وتعود ملكيته لي وأتعهد بأن أقدم كافة الوثائق المطلوبة مني من قبل إدارة المشروع كما أقر بموافقتي على نشر مشروعي في وسائل الإعلام الحديثة ووسائل التواصل الإجتماعي.</label>
#error('accept_terms_field')
<span class="text-danger"> {{ $message }} </span>
#enderror()
</div>
<div class="row mt-3">
<div class="hstack gap-2 justify-content-end">
<a class="btn btn-light Single previous" target="2">تراجع</a>
<!--إلغاء-->
<button type="submit" class="btn btn-success" id="add-btn">إرسال</button>
</div>
</div>
</div>
</fieldset>
</section>
</form>

Calculating the total of my purchase items

i want to calculate the total of my purchase items by adding the sum of the purchases for each item(For exp: 2 shoes * price unit + 1 tshit * price unit) in front of "Shopping Bag total :"
here a description image :
i already written a fonctionnal code that add/ remove products and also calculate the total purchase for each item. The last part of the code which is calculating the sum of my total purchase is not working.I'm confused and i don't know how to solve it.
Here the html5 code:
<div class="shopping-cart">
<!-- Title -->
<div class="title">
Shopping Bag total : <input type="number" value="0" class="total-result-input" />
</div>
<!-- Product #1 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-1.png" alt="" />
</div>
<div class="description">
<span>Common Projects</span>
<span>Bball High</span>
<span>White</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button""><img src="plus.svg" alt="" /></button>
<input type="text" value="0" class="input-btn" />
<button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
</div>
<div class="total-price" id="549"><input type="number" value="0" class="result-btn" /></div>
</div>
<!-- Product #2 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-2.png" alt=""/>
</div>
<div class="description">
<span>Maison Margiela</span>
<span>Future Sneakers</span>
<span>White</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
<input type="text" value="0" class="input-btn" />
<button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
</div>
<div class="total-price" id="270"><input type="number" value="0" class="result-btn" /></div>
</div>
<!-- Product #3 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-3.png" alt="" />
</div>
<div class="description">
<span>Our Legacy</span>
<span>Brushed Scarf</span>
<span>Brown</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button" ><img src="plus.svg" alt="" /></button>
<input type="text" value="0" class="input-btn" />
<button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
</div>
<div class="total-price" id="349"><input type="number" value="0" class="result-btn" /></div>
</div>
</div>
Here the JS code:
var items = document.querySelectorAll('.item');
items.forEach(function(item) {
var minusButton = item.querySelector('.minus-btn');
var plusButton = item.querySelector('.plus-btn');
var inputField = item.querySelector('.input-btn');
var resultField = item.querySelector('.result-btn');
minusButton.addEventListener('click', function minusProduct() {
var currentValue = Number(inputField.value);
if (currentValue > 0) {
inputField.value = currentValue - 1;
var x = item.querySelector('.total-price').id;
resultField = item.querySelector('.result-btn').value = x* inputField.value;
} else inputField.value = 0
});
plusButton.addEventListener('click', function plusProduct() {
var currentValue = Number(inputField.value);
if (currentValue < 100) {
inputField.value = currentValue + 1;
var x = item.querySelector('.total-price').id;
resultField = item.querySelector('.result-btn').value = Number(x)* Number(inputField.value);
} else inputField.value = 100
});
});
const results = document.querySelectorAll('.result-btn');
let total = 0;
results.forEach((result) => {
total += result.value
});
document.querySelector('.total-result-input').value = total;

i just add
document.querySelector('.total-result-input').value = [].slice.call(document.querySelectorAll(".total-price > input")).reduce((acc, el) => acc + parseInt(el.value), 0)
inside of your click event and all will work good
var items = document.querySelectorAll('.item');
items.forEach(function(item) {
var minusButton = item.querySelector('.minus-btn');
var plusButton = item.querySelector('.plus-btn');
var inputField = item.querySelector('.input-btn');
var resultField = item.querySelector('.result-btn');
minusButton.addEventListener('click', function minusProduct() {
var currentValue = Number(inputField.value);
if (currentValue > 0) {
inputField.value = currentValue - 1;
var x = item.querySelector('.total-price').id;
resultField = item.querySelector('.result-btn').value = x * inputField.value;
document.querySelector('.total-result-input').value = [].slice.call(document.querySelectorAll(".total-price > input")).reduce((acc, el) => acc + parseInt(el.value), 0)
} else inputField.value = 0
});
plusButton.addEventListener('click', function plusProduct() {
var currentValue = Number(inputField.value);
if (currentValue < 100) {
inputField.value = currentValue + 1;
var x = item.querySelector('.total-price').id;
resultField = item.querySelector('.result-btn').value = Number(x) * Number(inputField.value);
document.querySelector('.total-result-input').value = [].slice.call(document.querySelectorAll(".total-price > input")).reduce((acc, el) => acc + parseInt(el.value), 0)
} else inputField.value = 100
});
});
const results = document.querySelectorAll('.result-btn');
let total = 0;
results.forEach((result) => {
total += result.value
});
document.querySelector('.total-result-input').value = total;
<div class="shopping-cart">
<!-- Title -->
<div class="title">
Shopping Bag total : <input type="number" value="0" class="total-result-input" />
</div>
<!-- Product #1 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-1.png" alt="" />
</div>
<div class="description">
<span>Common Projects</span>
<span>Bball High</span>
<span>White</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button"">+</button>
<input type=" text" value="0" class="input-btn" />
<button class="minus-btn" type="button" name="button">-</button>
</div>
<div class="total-price" id="549"><input type="number" value="0" class="result-btn" /></div>
</div>
<!-- Product #2 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-2.png" alt=""/>
</div>
<div class="description">
<span>Maison Margiela</span>
<span>Future Sneakers</span>
<span>White</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button">+</button>
<input type="text" value="0" class="input-btn" />
<button class="minus-btn" type="button" name="button">-</button>
</div>
<div class="total-price" id="270"><input type="number" value="0" class="result-btn" /></div>
</div>
<!-- Product #3 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-3.png" alt="" />
</div>
<div class="description">
<span>Our Legacy</span>
<span>Brushed Scarf</span>
<span>Brown</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button">+</button>
<input type="text" value="0" class="input-btn" />
<button class="minus-btn" type="button" name="button">-</button>
</div>
<div class="total-price" id="349"><input type="number" value="0" class="result-btn" /></div>
</div>
</div>

const results = document.querySelectorAll('.result-btn');
let total = 0;
results.forEach((result) => {
total += result.value
});
document.querySelector('.total-result-input').value = total;
Put it in a reasonable function and call this function on every change (plus, minus).

calculate the sum of shopping cart

I want to calculate the total(sum) of all the purchases using the "+","-" to add and remove products from the shopping cart.It should display the amount on the left top corner in front of "total:".In front of each product, the total purchase of the single purchase is displayed.
Here a descriptive image
Here the html code:
<body>
<div class="shopping-cart">
<!-- Title -->
<div class="title">
Shopping Bag total :
</div>
<!-- Product #1 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-1.png" alt="" />
</div>
<div class="description">
<span>Common Projects</span>
<span>Bball High</span>
<span>White</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
<input type="text" value="0" class="input-btn" />
<button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
</div>
<div class="total-price" id="549"><input type="number" value="0" class="result-btn" /></div>
</div>
<!-- Product #2 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-2.png" alt=""/>
</div>
<div class="description">
<span>Maison Margiela</span>
<span>Future Sneakers</span>
<span>White</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
<input type="text" value="0" class="input-btn" />
<button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
</div>
<div class="total-price" id="270"><input type="number" value="0" class="result-btn" /></div>
</div>
<!-- Product #3 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-3.png" alt="" />
</div>
<div class="description">
<span>Our Legacy</span>
<span>Brushed Scarf</span>
<span>Brown</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
<input type="text" value="0" class="input-btn" />
<button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
</div>
<div class="total-price" id="349"><input type="number" value="0" class="result-btn" /></div>
</div>
</div>
</body>
Here the JS code:
const items = document.querySelectorAll('.item');
items.forEach(function(item) {
const minusButton = item.querySelector('.minus-btn');
const plusButton = item.querySelector('.plus-btn');
const inputField = item.querySelector('.input-btn');
const resultField = item.querySelector('.result-btn');
minusButton.addEventListener('click', function minusProduct() {
const currentValue = Number(inputField.value);
if (currentValue > 0) {
inputField.value = currentValue - 1;
var x = item.querySelector('.total-price').id;
resultField = item.querySelector('.result-btn').value = x* inputField.value;
} else inputField.value = 0
});
plusButton.addEventListener('click', function plusProduct() {
const currentValue = Number(inputField.value);
if (currentValue < 100) {
inputField.value = currentValue + 1;
var x = item.querySelector('.total-price').id;
resultField = item.querySelector('.result-btn').value = x* inputField.value;
document.querySelector('.title').innerHTML = item.querySelector('.result-btn')[0].value
+item.querySelector('.result-btn')[1].value + item.querySelector('.result-btn')[2].value
} else inputField.value = 100
});
});

There are two thing that you need to do.
1. You need to convert value of total price and total price to number.
2. Set the innneHTML of dev other wise you will get the error. e.g. (
Uncaught TypeError: Assignment to constant variable.
at HTMLButtonElement.minusProduct)
So, in your JS
resultField.innerHTML = item.querySelector('.result-btn').value = Number(x) * Number(inputField.value);

Show text dropdown button with JavaScript in Laravel

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>

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);
});