Develop Reference

JS Script crashes after temporaryURL is created with livewire

Does anyone know, How to resolve this issue of the crashed javascript script?
I am using 2 checkboxes to load some DOM.
1st checkbox is to expand textarea with the CKEditor script which is loaded with the JS but I have a wire model to send data to the controller.
Here is HTML for 1st checkbox:
<div class="form-group mt-25 d-flex flex-row">
<label class="checkbox-container form-group__label">
{{ __('Extended description') }}
<input type="checkbox" name="extended-description-checkbox" id="extended-description-checkbox" class="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="form-group mt-25 cke d-none" id="extended-description-checkbox-div">
<label class="form-group__label" for="extended-description">{{ __('Extended description') }}</label>
<textarea wire:ignore.self wire:model.debounce.250ms.defer="extendedDescription" name="extended-description" id="extended-description" cols="30" rows="10"></textarea>
</div>
2nd checkbox is also handled with the JS and has a temporary URL method since the expanded DOM element should contain uploaded images for the gallery.
Here is HTML of the 2nd checkbox:
<div class="form-group mt-25 d-flex flex-row">
<label class="checkbox-container form-group__label">
{{ __('Use default images') }}
<input type="checkbox" name="use-default-images" id="use-default-images" class="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="d-none" id="use-default-images-div">
<div class="form-group mt-25">
<label class="form-group__label">{{ __('Service images') }}</label>
<div class="form-group__uploaded-images">
#if ($additionalImages)
#foreach($additionalImages as $image)
<img src="{{ $image->temporaryUrl() }}" alt="Temporary image">
#endforeach
#endif
</div>
</div>
<div class="custom-file ml-auto">
<button type="button" class="ml-auto styled-link">{{ __('Add images') }}</button>
<div class="row mt-25">
<div class="col-4 col-md-8"></div>
<div class="col-8 col-md-4">
<input wire:ignore.self wire:model.defer="additionalImages" type="file" multiple>
#error('images.*') {{ $message }} #enderror
</div>
</div>
</div>
</div>
Here are the scripts for expanding of the both DOM elements:
const extendedCheckbox = document.querySelector('#extended-description-checkbox');
const extendedDiv = document.querySelector('#extended-description-checkbox-div');
extendedCheckbox.addEventListener('change', function() {
if(extendedCheckbox.checked) {
extendedDiv.classList.remove('d-none');
} else {
extendedDiv.classList.add('d-none');
}
});
const defaultImagesCheckbox = document.querySelector('#use-default-images');
const defaultImagesDiv = document.querySelector('#use-default-images-div');
defaultImagesCheckbox.addEventListener('change', function() {
if(defaultImagesCheckbox.checked) {
defaultImagesDiv.classList.remove('d-none');
} else {
defaultImagesDiv.classList.add('d-none');
}
});

Form repeater send wrong data with last element in Laravel

My form sends multiple forms of (name and image). However, the last element sends a name only with the wrong 'name.' Do I need to simultaneously make multiple inserts in the database to solve this problem?
Form View
Dump of the request with wrong last element of array
Script of repeat the form
<div class="row">
<div class="col-12">
<form class="form repeater-default" method="POST"
action="{{ route('admin.cat.doCreate2') }}"
enctype="multipart/form-data">
#csrf
<input type="hidden" name="admin_id"
value="{{ auth()->guard('admin')->user()->id }}">
<div data-repeater-list="group_a">
<div data-repeater-item>
<div class="row justify-content-between">
<div class="col-md-4 col-sm-12 form-group">
<label for="Name">Name </label>
<input type="text" class="form-control" name="name[]" required
placeholder="Enter Name of Category">
</div>
<div class="col-md-4 col-sm-12 form-group">
<label for="Image">Image </label>
<input type="file" class="form-control" name="image[]">
</div>
{{-- Delete Button --}}
<div class="col-md-2 col-sm-12 form-group d-flex align-items-center pt-2">
<button class="btn btn-danger" data-repeater-delete type="button"><i
class="mdi mdi-x"></i>
Delete
</button>
</div>
</div>
<hr>
</div>
</div>
<div class="form-group">
<div class="col p-0">
<button class="btn btn-primary" data-repeater-create type="button"><i class="mdi mdi-plus"></i>
Add
</button>
</div>
<div class="col p-0">
<button class="btn btn-success" type="submit"><i class="mdi mdi-account"></i>
Done
</button>
</div>
</div>
</form>
</div>
</div>
Script
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#tableData tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>

first solution : inputs and their labels must be on table tag and th tag and td tag
to send right data
second solution : dont use array for inputs names like name[ ] or image[ ] :
<div class="col-md-4 col-sm-12 form-group">
<label for="Image">Image </label>
<input type="file" class="form-control"
name="image">
</div>
and receive datas like this :
$data=$request->group_a
group_a is your data-repeater-list name :
<div data-repeater-list="group_a">
and now you can put $data in foreach and use data arrays for create ...insert and anything

Laravel Edit Update JSON Array and remove specific input using JavaScript

How can i load the JSON array saved in the database to the edit form input field ?
Here's how my create form looks like
Here's the form Code
<div class="card">
<h5 class="card-header">
Manage Extras
</h5>
<div class="card-body">
<div class="optionBox">
<div class="block main">
<div class="form-row pb-2">
<div class="col">
<input type="text" class="form-control" name="extras_name[]" value="" placeholder="Name">
</div>
<div class="col">
<input type="text" class="form-control" name="extras_price[]" placeholder="Price">
</div>
<div class="col">
<button type="button" class="remove btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</div>
</div>
<div class="block mt-2 ">
<button type="button" class="add btn btn-success">Add Extras</i></button>
</div>
</div>
</div>
</div>
</div>
Here's the Script to Add Extra input field and delete button
<script>
$('.add').click(function() {
$('.block:last').before('<div class="form-row pb-2"><div class="col"><input type="text" class="form-control" name="extras_name[]" placeholder="Name"></div><div class="col"><input type="text" class="form-control" name="extras_price[]" placeholder="Price"></div><div class="col"><button type="button" class="remove btn btn-danger"><i class="fas fa-trash-alt"></i></button></div></div>');
});
$('.optionBox').on('click','.remove',function() {
$(this).parent().parent().remove();
});
</script>
Here's how it saves in the database
Here's the edit function in the Controller
public function edit(CustomProduct $customProduct)
{
$data = [
'customProduct'=>$customProduct,
];
return view('manage.custom-products.edit')->with($data);
}
I was able to load the data into the form using a foreach as below
<div class="row">
<div class="col">
<strong>Names</strong>
#foreach ($customProduct['extras_name'] as $item)
<li>{{ $item }}</li>
#endforeach
</div>
<div class="col">
<strong>Prices</strong>
#foreach ($customProduct['extras_price'] as $item)
<li>{{ $item }}</li>
#endforeach
</div>
</div>
And here's how it was looking like
I just want to load the json data into the input fields on edit and should be able to remove a pacific input by clicking the delete icon,
How can i do make this happen, Please help me out

Laravael PHP, JavaScript help needed

First, I am developer for C, C++, C#, Android and Swift but I have absolutly no experience in JavaScript or PHP or Web development.
I bought some source code for my backend server. It is kind of shop where I can enter products and store them. Now, I got everthying to work (even with 0 knowdlege in web development), but there is a text input field which checks for integer values. I want to insert decimal values like a price information, e.g. 19.99. It then complains that it has to be 19 or 20. I can not find the place where to change that or which class/function is responsible for checking that entered value. There is something called Blade. It is in HTML and javaScript as it seems to me. I can not find any class or a route to a file where the entered values go and get checked. I don't even know which class/file is responsible for writing the values to the database. I mean, wtf? It can not be that complicated to find out which file is responsible to handle the entered values. It drives me crazy.
That is the input which only takes integer values.
This is the blade code:
{{-- resources/views/admin/dashboard.blade.php --}}
#extends('adminlte::page')
#section('title', 'Products')
#include('parts.header')
#section('content_header')
<div class="col-md-12">
<h2>Add new product</h2>
</div>
#stop
#section('content')
<div class="row">
<div class="col-sm-12">
<form method="post" action="{{ route('product.add') }}" enctype="multipart/form-data">
{{ csrf_field() }}
#if(!$errors->isEmpty())
<div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-ban"></i> Alert!</h4>
#foreach ($errors->all() as $error)
<div>{{ $error }}</div>
#endforeach
</div>
#endif
<div class="col-sm-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Details</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<form role="form">
<div class="box-body">
<div class="row">
<div class="col-sm-4 form-group ">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" id="name" placeholder="Enter name" required>
</div>
<div class="col-sm-4 form-group ">
<label for="name">Description</label>
<input type="text" name="description" class="form-control" id="name" placeholder="Enter description" required>
</div>
<div class="col-sm-3 form-group ">
<label for="category">Select category</label>
<select name="category_id" class="form-control" required>
<option value="" disabled selected>Select your option</option>
#foreach($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="col-sm-4 form-group">
<label for="price">Price</label>
<input type="number" name="price" class="form-control" id="price" placeholder="Enter price" required>
</div>
<div class="col-sm-4 form-group">
<label for="amount">Amount</label>
<input type="number" name="amount" class="form-control" id="amount" placeholder="Enter amount" required>
</div>
<div class="col-sm-3 form-group">
<div class="row">
<div class="col-sm-6">
<img id="myImg" alt="" style="width: 100%;">
</div>
<div class="col-sm-6">
<label for="image">Image</label>
<input class="fullwidth input rqd" type="file" name="image" id="image" accept="image/*" onclick="fileClicked(event)" onchange="fileChanged(event)" required>
<div id="log"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h4>Variations</h4>
<div class="box-body table-responsive no-padding">
<table id="variationTable" class="table table-bordered table-hover dataTable" role="grid">
<thead>
<tr role="row">
<th rowspan="1" colspan="1">#</th>
<th rowspan="1" colspan="1">Owner</th>
<th rowspan="1" colspan="1">Remove</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td>1</td>
<td>
<input type="text" name="owner_id[]" placeholder="Enter owner" required>
</td>
<td>
<i class="fa fa-fw fa-remove"></i>
</td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn btn-default btn-sm addrow pull-right" style="height: 34px;">
<span class="glyphicon glyphicon-plus-sign"></span> Add
</button>
<div class="clearfix"></div>
<div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
<div class="col-sm-6">
<h4>Siblings</h4>
<div class="form-group">
<select name="siblings[]" class="form-control select2" multiple>
#foreach($products as $product)
<option value="{{ $product->id }}">{{ $product->name }} </option>
#endforeach
</select>
</div>
</div>
</div>
</div>
<!-- /.box-body -->
</form>
</div>
</div>
</form>
</div>
</div>
#stop
#section('js')
#include('parts.footer');
#stop
Can somebody tell me where to find the code which handles the input? Where to find the function which checks for integer? I really searched every file, but somehow I am too stupid for that web stuff.
There is something like a class mentioned: col-sm-4 form-group but I can not find it?!?
Thanks.

Use step attribute for your number input
Float
<input type="number" step="0.01">
Int
<input type="number">

Go to app/Http directory; then you have to check for the controller that handles that very view. Look for validator method in the controller file. It is something like this:
<php?
protected function validator(array $data)
{
return Validator::make($data, [
'price' => 'required|string|min:19|max:20'
]);
}
You can change it as you want.

Add step="0.01"(for example 0.01) property to your price input.

If it's been checked on client side you can check resources/views/parts/footer and find out which javascript files are included in your template then check that javascript files for the validation.
If it's server side, most common place for validations is app/Http/Requests. but before going for requests you should check the Controller and action which is responsible for responding to that request and check which Request class is input paramter for that action then got to app/Http/Requests and find that class and edit validation rules

Passing data using array from View (Blade) to Controller in laravel

I have a blade form which has a repeater input box and a select box, the repeater works fine but how do i pass the data from those fields to back-end controller in laravel?
add.balde.php
<!--begin::Add-Invoice-Form-->
<form class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed" action="{{route('store_invoice')}}" method="POST" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="m-portlet__body">
<div class="form-group m-form__group row">
<div class="col-lg-4">
<label>
Customer Name:
</label>
<select class="form-control m-select2" id="m_select2_1" name="customerId">
#foreach($customer_list as $customer)
<option value=" {{ $customer->id }} ">
{{ $customer->fName }} {{ $customer->mName }} {{ $customer->lName }}
</option>
#endforeach
</select>
</div>
<div class="col-lg-4">
<label>
Invoice Type:
</label>
<div class="m-radio-inline">
<label class="m-radio m-radio--solid">
<input type="radio" name="invoiceType" checked value="billable">
Billable
<span></span>
</label>
<label class="m-radio m-radio--solid">
<input type="radio" name="invoiceType" value="nonbillable">
Non Billable
<span></span>
</label>
</div>
</div>
</div>
<div id="m_repeater_1">
<div class="form-group row" id="m_repeater_1">
<div data-repeater-list="" class="col-lg-12">
<div data-repeater-item class="form-group m-form__group row align-items-center">
<div class="col-lg-4">
<label>
Summary Number:
</label>
<select class="form-control m-select2" id="m_select2_2" name="certificateId[]">
#foreach($certificate_list as $certificate)
<option value=" {{ $certificate->id }} ">
{{ $certificate->summary_no }} ( {{ $certificate->certificateType() }} )
</option>
#endforeach
</select>
</div>
<div class="col-lg-3">
<label>
Rate:
</label>
<input type="number" class="form-control m-input" name="rate" placeholder="Enter rate">
</div>
<div class="col-lg-3">
<br/>
<div data-repeater-delete="" class="btn btn btn-danger m-btn m-btn--icon">
<span>
<i class="la la-trash-o"></i>
<span>
Remove
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="m-form__group form-group row">
<div class="col-lg-4">
<div data-repeater-create="" class="btn btn btn-warning m-btn m-btn--icon">
<span>
<i class="la la-plus"></i>
<span>
Add
</span>
</span>
</div>
</div>
</div></div>
</div>
<div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
<div class="m-form__actions m-form__actions--solid">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-8">
<button type="submit" class="btn btn-primary">
Submit
</button>
<button type="reset" class="btn btn-secondary">
Cancel
</button>
</div>
</div>
</div>
</div>
</form>
<!--end::Add-Invoice-Form-->
How do I send the values in array format when multiple select box have been filed using repeater?This images shows the UI for the form
Thank you

you can try something like this
<input type="text" value="val" name="somename[]">
<select name="someSelectName[]">
<option value="value">select 1
</option>
</select>
on server side you will receive selected values as array with given name

Change your
<div data-repeater-list="" class="col-lg-12">
To
<div data-repeater-list="arrayName" class="col-lg-12">
and It should work.
This makes the all the input names to have an array format of arrayName[number][input] and the number increments for each input and finally in the request sent you will have all the inputs in the arrayName