Modify Breeze template in Laravel - laravel

I am working with Breeze Template in Laravel. Here I altered HTML code
<input type="email" name="email" class="form-control" id="exampleInputEmail1">
to Breeze Code
`<x-input type="email" name="email" class="form-control" id="exampleInputEmail1" />`.
But now how can I alter this HTML code
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
to Breeze Code ?

Probably this is what your looking for I guess !!
<x-dropdown class="form-control" id="exampleFormControlSelect1">
<xd-item>1</xd-item>
<xd-item>2</xd-item>
</x-dropdown>

It is probably too late, but I faced the same problem. Surprisingly, there is not wrapper for select in Breeze.
So you can make your own wrapper like that:
Blade component (resources/views/components/select.blade.php):
#props(['disabled' => false])
<select {!! $attributes->merge(['class' => 'rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50']) !!}>
{{ $slot }}
</select>
And use it this way:
<x-select id="select" class="block w-full" name="field">
<option value="" selected disabled hidden>{{ __('Choose an option') }}</option>
<option value="1">Some</option>
<option value="2">options</option>
<option value="3">here</option>
</x-select>

Related

How to add <select> element in Laravel jetstream / livewire code

I'm trying to add element to user profile form, there is no problem in the registration form but I don't know how to add it in user profile update page
<div class="col-span-6 sm:col-span-4">
<x-jet-label for="name" value="{{ __('Name') }}" />
<x-jet-input id="name" type="text" class="mt-1 block w-full" wire:model.defer="state.name" autocomplete="name" />
<x-jet-input-error for="name" class="mt-2" />
</div>
<!-- Email -->
<div class="col-span-6 sm:col-span-4">
<x-jet-label for="email" value="{{ __('Email') }}" />
<x-jet-input id="email" type="email" class="mt-1 block w-full" wire:model.defer="state.email" />
<x-jet-input-error for="email" class="mt-2" />
</div>
I tried to add this but it doesn't work
<div class="col-span-6 sm:col-span-4">
<x-jet-label for="gender" value="{{ __('Gender') }}" />
<select id="gender" class="block mt-1 w-full" name="gender">
<option value="m" {{ $this->user->gender== 'm' ? 'selected' : '' }} >
Male
</option>
<option value="f" {{ $this->user->gender== 'f' ? 'selected' : '' }}>
Female
</option>
</select>
</div>
Laravel Livewire: Input select, default option selected
Livewire will auto select option, just use wire:model
<div class="col-span-6 sm:col-span-4">
<x-jet-label for="gender" value="{{ __('Gender') }}" />
<select id="gender" class="block mt-1 w-full" wire:model="gender">
<option value="m">
Male
</option>
<option value="f">
Female
</option>
</select>
</div>

The recaptcha is above the button

I have my recaptcha, it's working but the problem that I have it's that the submit button is under the captcha, I mean when I push the submit button I click the captcha too, I have tried with z-index but it does not worrk, how can I fix it?
<form action="{{ url('ticket/store') }}" method="post" id="ticket_form">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="form-group">
<input type="text" class="form-control" placeholder="RUT" name="rut" required="">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Nombre" name="name" required="">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Correo" name="email" required="">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="Teléfono" name="phone" required="">
</div>
<div class="form-group">
<select name="case_type" class="form-control" required="">
<option value="">- Tipo de Caso -</option>
<option value="1">Felicitación</option>
<option value="2">Reclamo</option>
<option value="3">Sugerencia</option>
</select>
</div>
<div class="form-group">
<select name="id_branch_office" class="form-control" required="">
<option value="">- Sucursal -</option>
#foreach($branch_offices as $branch_office)
<option value="{{ $branch_office->id_branch_office }}">{{ $branch_office->view_name }}</option>
#endforeach
</select>
</div>
<div class="form-group">
<textarea placeholder="Mensaje" class="form-control" rows="5" name="message" required=""></textarea>
</div>
<center>{!! htmlFormSnippet() !!}</center>
<br>
<button id="send" type="submit" class="btn btn-primary btn-orange">Enviar Mensaje</button>
</form>
You can test it in the next website jisparking.cl
Thanks
If you inspect the page (in Chrome you can do right click -> inspect) and check the box of the generated recaptcha, you can see that it stretches well over the button.
To stop the extra content from overflowing the container, you can add some CSS.
Try this
<center style="overflow: hidden">{!! htmlFormSnippet() !!}</center>

How to get old input array in blade laravel

I have some code like this
<div class="form-group">
<label for="tag">Tag</label><br>
<input type="text" data-role="tagsinput"
class="form-control form-control-lg #error('tag') is-invalid #enderror"
id="tag" name="tag[]" value="{{old('tag')}}" placeholder="Enter tag">
#error('tag') <div class="text-danger"> {{ $message }} </div> #enderror
</div>
how to get old value array in laravel blade, in this case i want to get old value of tag?
use dot notation with index
as suggested here https://laracasts.com/discuss/channels/laravel/input-old-and-array
<input type="text" data-role="tagsinput"
class="form-control form-control-lg #error('tag') is-invalid #enderror"
id="tag" name="tag[]" value="{{old('tag.0')}}" placeholder="Enter tag">
...
<input type="text" data-role="tagsinput"
class="form-control form-control-lg #error('tag') is-invalid #enderror"
id="tag" name="tag[]" value="{{old('tag.1')}}" placeholder="Enter tag">
I think the better solution for this is to do it with javascript if you have one input so you need to store the array in javascript variable then just add the value to the input.
<select name="groups[]" class="multi-default" id="groups" placeholder="Groups" multiple>
<option value="" placeholder>Groups</option>
#foreach ($groups as $group)
<option value="{{ $group->id }}" title="{{ $group->id }}"
{{is_array(old('groups',$groups??[]))&&in_array($group->id,old('groups',$group_data??[]))?'selected':null}}</option>
#endforeach
</select>
It will definitely work
#if (!is_null(old('product_highlights')))
#foreach (old('product_highlights') as $highlight)
{{$highlight}}
#endforeach
#endif

multimple select2 with laravel vue js not working

i want to make dynamic form .so for that i tried foreach loop .everything going fine without select options. For making classname or id name unique i want place a index value but cant not place index value.take a look below:
<div class="form-group m-form__group row " v-for="(pack,index) in packs">
<div class="col-lg-3">
<label>SKU: #{{ index }}</label>
<input v-model="pack.sku" type="text" name="name" class="form-control m-input" placeholder="SKU">
</div>
<div class="col-lg-3">
<label>Unit:</label>
<select class="form-control select2 #{{ index }}" name="unit" v-model="pack.unit" >
<option value="0">KG</option>
<option value="1">ML</option>
<option value="2">Liter</option>
</select>
</div>
<div class="col-lg-3">
<label>Size:</label>
<input v-model="pack.size" type="number" name="name" class="form-control m-input" placeholder="Size">
</div>
<div class="col-lg-3">
<label>Barcode:</label>
<input v-model="pack.barcode" type="number" name="barcode" class="form-control m-input" placeholder="Barcode">
</div>
</div>
you need to reload select2.
html markup:
<select class="form-control select2 #{{ index }}" name="unit" v-model="pack.unit" id="unit">
<option value="0">KG</option>
<option value="1">ML</option>
<option value="2">Liter</option>
</select>
Vuejs code:
...
components: {
},
mounted() {
setTimeOut(() => {
let unit = $('#unit'); // or document.querySelector('#unit');
unit.select2();
}, 100);
},

How to insert multiple checkbox data to database using Codeigniter

Can somebody help me? I have question. I have view, name is pascasarjana.php
<div class="form-group">
<label>Program studi dan konsentrasi yang diminati</label><br/>
<input name="prodis" type="checkbox" value="p1">Program Studi Magister Manajemen<br/>
</div>
<div class="form-group">
<input name="prodis" type="checkbox" value="p2">Program Studi Magister Teknik Sipil
<select name="konsentrasi" class="form-control" id="konsentrasi1">
<option value="">Pilih Konsentrasi</option>
<option value="k1">Manajemen Konstruksi</option>
<option value="k2">Transportasi</option>
<option value="k3">Struktur</option>
</select>
</div>
<div class="form-group">
<input name="prodis" type="checkbox" value="p3">Program Studi Magister Ilmu Hukum
<select name="konsentrasi" class="form-control" id="konsentrasi2">
<option value="">Pilih Konsentrasi</option>
<option value="k4">Hukum Bisnis</option>
<option value="k5">Hukum Ketatanegaraan</option>
<option value="k6">Hukum Agraria</option>
<option value="k7">Litigasi</option>
</select>
</div>
<div class="form-group">
<input name="prodis" type="checkbox" value="p4">Program Studi Magister Teknik Informatika
<select name="konsentrasi" class="form-control" id="konsentrasi3">
<option value="">Pilih Konsentrasi</option>
<option value="k8">Soft Computing</option>
<option value="k9">Enterprise Information System</option>
<option value="k10">Mobile Computing</option>
</select>
</div>
<div class="form-group">
<input name="prodis" type="checkbox" value="p5">Program Studi Magister Teknik Arsitektur
<select name="konsentrasi" class="form-control" id="konsentrasi4">
<option value="">Pilih Konsentrasi</option>
<option value="k11">Arsitektur Digital</option>
</select>
</div>
AND I confused, how to insert multiple checkbox and select option data to database in my controller and model.
Try renaming your HTML entities as arrays
Eg.
input name="prodis" to input name="prodis[]"
select name="konsentrasi" to select name="konsentrasi[]"
Then print $_POST in your controller.
I guess you need to get data from select box on the basis of ticked checkbox.
For getting values from checkbox you need to define checkbox name as an array. In my code I am using exact indexes so we can get select box values accordingly.
I guess below first checkbox there should be another select box. Ignoring this select box (Which is actually not here), I am giving custom indexes here. Instead, we also can use like profis[] which actually auto generate indexes by incrementing it one on each occurrence in HTML
You can implement validation too. Here are modified code:
<div class="form-group">
<label>Program studi dan konsentrasi yang diminati</label><br/>
<input name="prodis[1]" type="checkbox" value="p1">Program Studi Magister Manajemen<br/>
</div>
<div class="form-group">
<input name="prodis[2]" type="checkbox" value="p2">Program Studi Magister Teknik Sipil
<select name="konsentrasi[2]" class="form-control" id="konsentrasi1">
<option value="">Pilih Konsentrasi</option>
<option value="k1">Manajemen Konstruksi</option>
<option value="k2">Transportasi</option>
<option value="k3">Struktur</option>
</select>
</div>
<div class="form-group">
<input name="prodis[3]" type="checkbox" value="p3">Program Studi Magister Ilmu Hukum
<select name="konsentrasi[3]" class="form-control" id="konsentrasi2">
<option value="">Pilih Konsentrasi</option>
<option value="k4">Hukum Bisnis</option>
<option value="k5">Hukum Ketatanegaraan</option>
<option value="k6">Hukum Agraria</option>
<option value="k7">Litigasi</option>
</select>
</div>
<div class="form-group">
<input name="prodis[4]" type="checkbox" value="p4">Program Studi Magister Teknik Informatika
<select name="konsentrasi[4]" class="form-control" id="konsentrasi3">
<option value="">Pilih Konsentrasi</option>
<option value="k8">Soft Computing</option>
<option value="k9">Enterprise Information System</option>
<option value="k10">Mobile Computing</option>
</select>
</div>
<div class="form-group">
<input name="prodis[5]" type="checkbox" value="p5">Program Studi Magister Teknik Arsitektur
<select name="konsentrasi[5]" class="form-control" id="konsentrasi4">
<option value="">Pilih Konsentrasi</option>
<option value="k11">Arsitektur Digital</option>
</select>
At controller end you can just check if index 2 $this->input->post('prodis[2]') then get the value of select box with index 2 $this->input->post('konsentrasi[2]'
You can check it dynamically by keeping code redundancy in your mind. Let me know if you face any issue.
Insert Multiple data using check box or anything on HTML.Just use array "[]".
<input name="checkbox[]" type="checkbox" value="checkbox">
<select name="select[]"></select>
Can also array values like [2],[4],[5] anythings
Thank You
public function insert()
{
//Insert second stage details for employer into database.
$Specilized_category = $this->input->post('spec_cat');
$data=array(
'Specilized_category'=>json_encode(implode(",", $Specilized_category)),
);
$this->db->insert('tbl_employer', $data);

Resources