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.
Related
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>
Vuelidate is not able to validate a Select/Dropdown element?
HTML
<div :class="{ 'form-group--error': $v.subscription.$error }">
<label for="">Year Subscription</label>
<select name="subscription" #change="subscriptionChange()" v-model="$v.subscription.$model" class="custom-select" id="inputGroupSelect04">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
JS Code
subscription : {required }
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 need to figure out how to order by date ascending and how I can add search to my list.
Here is example structure: https://jsfiddle.net/franso/jr7dsef3/
<div id="app">
<input type="text" v-model="search" placeholder="Search">
<select v-model="title">
<option value="Show all">Show all</option>
<option value="Title 1">Title 1</option>
<option value="Title 2">title 2</option>
</select>
<select v-model="name">
<option value="Show all">Show all</option>
<option value="Name 1">Name 1</option>
<option value="Name 2">Name 2</option>
</select>
<div class="list" v-for="post in filteredAndOrdered">
<div class="list__wrapper">
<div class="list__item">{{ post.title }}</div>
<div class="list__item">{{ post.name }}</div>
<div class="list__item">{{ post.FinalApplicationDate }}</div>
</div>
</div>
</div>
You can use array.sort() for sorting date and use #change function on input tag for using search
Sort Javascript Object Array By Date
How can I set selected option based on the boolean value.
country.show can be 0 or 1, and based on that, I want to have preselected option. This is the code snippet:
<td>
<select name="show" class="form-control country-show">
<option value="0" :selected="country.show == 0">No</option>
<option value="1" :selected="country.show == 1">Yes</option>
</select>
</td>
Typically this is done with v-model. You could also use :value="country.show" assuming you just want to initialize it and use v-model for some other bind.
console.clear()
new Vue({
el: "#app",
data: {
country: {
show: 0
}
}
})
<script src="https://unpkg.com/vue#2.2.6/dist/vue.js"></script>
<div id="app">
<div>
<h2>Using v-model</h2>
<select name="show" v-model="country.show">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div>
<h2>Using :value</h2>
<select name="show" class="form-control country-show" :value="country.show">
<option value="0">No</option>
<option value="1">Yes</option>
</select
</div>
<div>
<h2>Using code from your question</h2>
<select name="show" class="form-control country-show">
<option value="0" :selected="country.show == 0">No</option>
<option value="1" :selected="country.show == 1">Yes</option>
</select
</div>
</div>
FWIW, what you have works to pre-select a value, it's just not how you would normally do it in Vue.
The value property of option element is string in HTML. You can try this get selected option based on a boolean value
<td>
<select name="show" class="form-control country-show" v-model="country.show">
<option v-bind:value="false">No</option>
<option v-bind:value="true">Yes</option>
</select>
</td>