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>
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>
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 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
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.