How can I make a dependent dropdown country ,state,city country, state, and city in user ragistration registration using laravel Laravel 8 jetstream .. ?JetStream?
Assuming you are using the Livewire + Blade Stack, as per the official documentation:
Each of these templates will receive the entire authenticated user object so that you can add additional fields to these forms as necessary. Any additional inputs added to the forms will be included in the $input array that is passed to your UpdateUserProfileInformation action.
The above means that you will need some vanilla Laravel, HTML (or Blade partial) and a Livewire model tag.
Add any necessary migration to the users table.
Add in the given $fillable property to the User model:
//app/Models/User.php
/**
* The attributes that are mass assignable.
*
* #var array
*/
protected $fillable = [
...
'city', //Assuming new column name is city
...
];
Add in any input validation logic and the property it will be saved to on App\Actions\Fortify\UpdateUserProfileInformation action class.
//app/Actions/Fortify/UpdateUserProfileInformation.php
$user->forceFill([
...
'city' => $input['city'],
...
])->save();
Modify resources/views/profile/update-profile-information-form.blade.php to include the HTML or partial that renders the dropdown select box:
//resources/views/profile/update-profile-information-form.blade.php
//Assuming the column name is 'city'
//Assuming you are not using a Blade partial
<div class="col-span-6 sm:col-span-4">
<x-jet-label for="city" value="{{ __('City') }}" />
<select
name="city"
id="city"
class="block w-full mt-1"
wire:model.defer="state.city"
>
<optgroup label="Ontario">
<option value="toronto">Toronto</option>
<option value="markham">Markham</option>
</optgroup>
<optgroup label="Quebec">
<option value="montreal">Montreal</option>
<option value="qc">Quebec City</option>
</optgroup>
</select>
Please notice that Livewire should take care of any data bindings via the tag wire:model.defer="state.city".
Related
I have several select lists in my .cshtml view page populated successfully from SQL Server. After a selection is made in the Payee list, I want to perform some additional database work based on the PayeeID. I can handle the SQL and C# coding, I just can't figure out how to get the PayeeID back into the code behind file.
I know I can go from Model to View, but how do I do it the other way around?
If you want to pass PayeeID from view to handler,here is a demo(Set PayeeID as values of options,.net core will bind data with name attribute,such as name="Payee"):
<form method="post" asp-page-handler="PassPayeeId">
<select id="Payee" name="Payee">
<option value="1">Payee1</option>
<option value="2">Payee2</option>
<option value="3">Payee3</option>
</select>
<input type="submit" value="submit"/>
</form>
handler:
public IActionResult OnPostPassPayeeId(string Payee)
{
return Page();
}
result:
I am looking to auto fill form data based on a table row selection. My problem is I cannot set the correct Selected item in input boxes
I have tried using v-model (as below). I have also tried using
Html Input:
<select #change="typeSelected(selectedType)" v-model="selectedType">
<option v-for="type in types" v-bind:key="type.id" v-bind:value="type.id">{{ type.name }}</option>
</select>
Vue function to update the selected item
public setSelected(type: AssetTypeDto | undefined){
if(type) {
this.selectedType = type;
}
}
Also i tried <option :selected="type.id === selectedType.id". This didn't work either
I have a simple select list in my Aurelia view which I'm trying to set a default value on of 'Select...'. I'm also using the aurelia-validation plugin to ensure that the value is changed before the form is submitted. The plugin works great for other field types in my project.
<div class="form-group">
<label for="agencies" class="control-label">Agency</label>
<select value.bind="agencyId" class="form-control">
<option value="">Select..</option>
<option repeat.for="agency of agencies" value.bind="agency.id">${agency.name}</option>
</select>
</div>
In the VM:
constructor(validation) {
this.agencies = null;
this.agencyId = 0;
this.validation = validation.on(this)
.ensure('agencyId')
.isNotEmpty();
}
activate() {
//call api and populate this.agencies
}
After the page initially loads I get my agencies in the list and my default value is correct, but it shows the validation error message:
Other form fields, like text boxes don't do this and show no error message until the user interacts with the form controls.
Is there something special I need to do for a select list to hide validation errors on the initial loading of the view? I suspect that binding the select list in the view is somehow triggering a change event.
Thanks to a kind Aurelia user on Gitter, the problem was solved by setting the initial value of this.agencyId to "". Originally I had the this.agencyId = null. That was my mistake. Because it was null and not "" (as was the default value in the select list) the values didn't match so the select list was invalid when the view loaded. At least, that's my understanding.
The lesson is, if you want to validate a select list, make sure you VM property is initialized to the same value as your select list's default value.
constructor() {
this.agencyId = ""; **//must match the bound property's initial value**
}
And in the view:
<div class="form-group">
<label for="agencies" class="control-label">Agency</label>
<select value.bind="agencyId" class="form-control">
<option value="" **<!-- this value must match the VM initial value -->** selected="true">Select...</option>
<option repeat.for="agency of agencies" value.bind="agency.id">${agency.name}</option>
</select>
</div>
I don't know how much code is needed in order for you to understand my problem so I'm starting with explaining what I want to do.
I have a form in my View where I create a new object.
In this form I want to use a dropdownlist and I've tried a lot with #Html.Dropdownlistfor() but realized I don't want to use that since I don't know how to use som Jquery UI-code on this and I don't know how to send a different value than what is shown in the dropdownlist.
Does any of you know how i just send the value selected in the dropdownlist to my controller?
DropDownListFor helper method esssentially render a SELECT element. So if you do not want to use the helper method, You may write the RAW HTML code
#model CreateUserVM
#using(Html.BeginForm())
{
<select name="SelectedCity" id="SelectedCity">
<option value='1'>Ann Arbor</option>
<option value='2'>Novi</option>
<option value='3'>Detroit</option>
</select>
}
Make sure your SELECT elements name property value is same as what you use in your Model, so that Model binding will work.
public class CreateUserVM
{
public int SelectedCity { set;get;}
//other properties
}
In view model:
puclic class ViewModel
{
int SelectId{get;set;}
}
In view
<select name="SelectId" id="SelectId">
<option value='1'>one</option>
<option value='2'>Two</option>
</select>
After post form ViewModel.SelectId will contain value of selected item in dropdown
When writing functional tests, how can I set the value of a select box if I only have the label of the option I want, but not the actual value?
I'm not sure I got exactly what you need, I suppose you have a form like this
<form action="..." method="post">
...
<select id="my_form_category" name="my_form[category]">
<option value="1">category1</option>
<option value="2">category2</option>
<option value="3">category3</option>
</select>
...
<button type="submit">Edit</button>
</form>
and you want to select category2. Even if you don't know the option value you can use the crawler to extract it
$client = static::createClient();
// go to form
$crawler = $client->request('GET', '...');
$value = $crawler->filter('#my_form_category option:contains("category2")')->attr('value');
$form = $crawler->selectButton('Edit')->form();
$form['my_form[category]']->select($value);
// ... set other values
$client->submit($form);