I have two independent dropdowns in a form. Below is the code:
<form v-on:submit.prevent="submitForm">
<div>
<label for="tenant">Tenant</label>
<select
class="form-select"
name=""
id="tenant_id"
v-model="formValues.tenant_id" >
<option disabled value="">Select Tenant</option>
<option value="" v-for="tenant in tenants" :key="tenant.id">{{tenant.tenant_name}}</option>
</select>
</div>
<div>
<label for="chart_type">Type</label>
<select
class="form-select"
name=""
id="chartOf"
v-model="formValues.chartOf"
>
<option disabled value="">Type</option>
<option value="diagnosis">Diagnosis</option>
<option value="symptom">Symptom</option>
<option value="comorbidity">Comorbidity</option>
</select>
</div>
<div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Method for submitting form :
submitForm(){
console.log('Form values: ', this.formValues)
}
When I select Tenant(1st dropdown), it's fine But when I select 2nd dropdown, the first dropdown resets to the default position(Select Tenant).
I am not able to understand what's happening, as I started learning vue few days ago.
The option value should be bound to field like id :
<option :value="tenant.id" v-for="tenant in tenants" :key="tenant.id">{{tenant.tenant_name}}</option>
Related
I am using Laravel with alpinejs version 3.2.4. I would like to show/hide some input elements and show them based on what the user selects. This is my code:
<form x-data="{payFor: ''}">
<select x-model="payFor" name="payFor">
<option value="service">Service</option>
<option value="product">Product</option>
</select>
<div x-show="payFor == 'service'">
<select name="serviceId">
#foreach($services as $service)
<option value="{{ $service->id }}">{{ $service->service_name }}</option>
#endforeach
</select>
</div>
<div x-show="payFor == 'product'">
<select name="productId">
#foreach($products as $product)
<option value="{{ $product->id }}">{{ $product->product_name }}</option>
#endforeach
</select>
</div>
</form>
This doesn't seem to be working on my forms and I cannot figure out why. When the form loads, all the controls are shown and on selection, none hides. Even when I try to set default x-data="{payFor: 'service'}" it still doesn't work either. Any solution to this?
Not sure if this has any relations so laravel, but this is how you do it in plain html (this would also work in your context):
document.getElementById('payFor').addEventListener("change", function (e) {
if (e.target.value === 'product') {
document.getElementById('services').style.display = 'none';
document.getElementById('products').style.display = 'block';
} else {
document.getElementById('products').style.display = 'none';
document.getElementById('services').style.display = 'block'
}
});
<!DOCTYPE html>
<html>
<body>
<form>
<label for="payFor">Select what to pay for: </label>
<select name="payFor" id="payFor">
<option disabled selected value>-</option>
<option value="service">Service</option>
<option value="product">Product</option>
</select>
<div style="display: none;" id="services">
<select name="serviceId">
<option disabled selected value>-</option>
<option value="service1">service 1</option>
<option value="service2">service 2</option>
</select>
</div>
<div style="display: none;" id="products">
<select name="productId">
<option disabled selected value>-</option>
<option value="product1">product 1</option>
<option value="product2">product 2</option>
</select>
</div>
</form>
</body>
</html>
Just add the selectors to your div, and add this script to get the job done.
I figured another way out. Since I am using livewire, I had to use #if... #else...#endif statement in the HTML class attribute to toggle the divs using show or hide tailwind classes.
I'm trying to set one of the options that is in an IEnumerable as diasabled within the Razor page. The reason for wanting it to be in the list but disabled is that the database will hold the StatusId but I need the user to choose one of the other options but for the database Status to be selected when the page loads.
This is the Razor syntax I'm using and it's populating the list as expected.
<div class="form-group col-md-6">
<label asp-for="#Model.Status" class="control-label"></label>
<select class="form-control" asp-for="#Model.Status" asp-items="#(new SelectList(Model.Statuses, "StatusId", "Description"))">
<option disabled>Select Status</option>
</select>
<span asp-validation-for="#Model.Status"></span>
What I am looking to do is have an item (it's got an StatusId of 0) set as disabled. How can this be achieved in code?
I would like the resulting HTML to look something like this
<div class="form-group col-md-6">
<label class="control-label" for="Description">Description</label>
<select class="form-control" data-val="true" data-val-required="The Status field is required." id="Status" name="Status">
<option disabled>Select Status</option>
<option value="1">Status 1</option>
<option value="5">Status 2</option>
<option value="99">Status 3</option>
<option disabled selected="selected" value="0">Not Selectable Status</option>
</select>
<span class="field-validation-valid" data-valmsg-for="Description" data-valmsg-replace="true"></span>
</div>
Is this achievable?
Thanks
You can try with foreach loop to build the options. I exactly don't know the property names so I took Disabled, Value, Text (you can modify as per your model)
PS: correct if there are any syntax errors
<div class="form-group col-md-6">
<label class="control-label" for="Description">Description</label>
<select class="form-control" data-val="true" data-val-required="The Status field is required." id="Status" name="Status">
<option disabled>Select Status</option>
#foreach(var s in Model.Statuses)
{
if (s.Disabled)
{
<option disabled value="#s.Value">#s.Text</option>
}
else
{
<option value="#s.Value">#s.Text</option>
}
}
</select>
<span class="field-validation-valid" data-valmsg-for="Description" data-valmsg-replace="true"></span>
</div>
I have a problem binding a select on Server side blazor. The passed on the onchange event is the options text(label).
Here is my select element:
<div class="form-group row">
<div class="form-group col-md-6">
<label>Role</label>
<select class="form-control form-control form-control-sm"
placeholder="Role"
disabled="#IsReadOnly"
#onchange="(e) => RoleChanged(e)">
<option value="">Select Role...</option>
<option value="Member">Member</option>
<option value="Admin">Admin</option>
<option value="Pioneer">Pioneer</option>
<option value="Retailer">Retailer</option>
</select>
<ValidationMessage For="#(() => Model.Role)" class="row" />
</div>
Upon debugging the RoleChanged method
It gets the option text as Value when the event is triggered.
Also the client validation is not firing
Refactor you code to use form components :
<div class="form-group row">
<div class="form-group col-md-6">
<label>Role</label>
<InputSelect class="form-control form-control form-control-sm"
placeholder="Role"
disabled="#IsReadOnly" Value="Model.Role" ValueChanged="RoleChanged" ValueExpression="#(() => Model.Role)">
<option value="">Select Role...</option>
<option value="Member">Member</option>
<option value="Admin">Admin</option>
<option value="Pioneer">Pioneer</option>
<option value="Retailer">Retailer</option>
</InputSelect >
<ValidationMessage For="#(() => Model.Role)" class="row" />
</div>
// an async method must return Task or ValueTask
private async Task RoleChanged(string value)
{
// your logic
}
I have changed the wording to maybe be more clear about what I'm trying to accomplish. I'm assuming I'll need Javascript in order to make this work, I'm just not sure how to employ it. Thoughts?
//the user will make a selection from the following dropdown
<div class="form-group col-lg-offset-3">
<h3>
<select id="flavor" name="id">
<option name="flavor">Select FLAVOR</option>
<option name="1">FRUIT PUNCH</option>
<option name="2">GRAPE</option>
<option name="3">WATERMELON</option>
</select>
</h3>
</div>
//based on the user selection, the option name (i.e. 1, 2, 3) must go after cartAction.php?action=addToCart&id=
<a href="cartAction.php?action=addToCart&id=">
<input type="submit" value="Add To Cart" button type="button" class="btn btn-success center-block button-buffer">
</a>
So, for example, if the user selects FRUIT PUNCH, then a href section will look like:
<a href="cartAction.php?action=addToCart&id=1">
<input type="submit" value="Add To Cart" button type="button" class="btn btn-success center-block button-buffer">
</a>
you have to give name select <select id="flavor" name="selectItem">
<select id="flavor" name="selectItem">
<option name="flavor">Select FLAVOR</option>
<option name="0">FRUIT PUNCH</option>
<option name="1">GRAPE</option>
<option name="2">WATERMELON</option>
</select>
so you can pass option value to other page
and then you can access using GET or POST method
$item=$_GET['selectItem'];
Updated
<form action="cartAction.php?action=addToCart&id=<?php echo $row["id"]; ?>">
<select id="flavor" name="selectItem">
<option name="flavor">Select FLAVOR</option>
<option name="0">FRUIT PUNCH</option>
<option name="1">GRAPE</option>
<option name="2">WATERMELON</option>
</select>
<input type="submit" value="Add To Cart" button type="button" class="btn btn-success center-block button-buffer">
</form>
I am designing a view like this:
#for($i=1;$i<=10;$i++)
<div class="col-xs-12">
<label class="control-label">Home</label>
<select class="form-control" name="homeTeam" >
<option value="1">Arsenal</option>
<option value="2">Chelsea</option>
<option value="3">Man Utd</option>
</select>
</div>
<div class="col-xs-12">
<label class="control-label">Away</label>
<select class="form-control" name="awayTeam" >
<option value="1">Arsenal</option>
<option value="2">Chelsea</option>
<option value="3">Man Utd</option>
</select>
</div>
<div class="col-xs-12">
<label class="control-label">Kick-Off</label>
<input class="form-control form_datetime col-xs-12" size="16" type="text" value="" readonly>
</div>
#endfor
When I test this on normal display with sufficient width, it works ok. But when I reduce the size of the browser to match the col-xs range the input fields do stack up but become unclickable.
I am not sure why this is happening and whats the solution, tried different things nothing worked.