how to get the name of select tag and use to if condition here is my code:
#{
var size="";
if(Request.Form["cboSize"] == "Extra Small (XS)"){
size = "Extra Small (XS)";
}
...
}
<select name="cboSize">
<option value="xs">Extra Small (XS)</option>
<option value="s">Small (S)</option>
<option value="m">Medium (M)</option>
<option value="l">Large (L)</option>
<option value="xl">Extra Large (XL)</option>
</select>
You need to wrap your select node in a form to get its value from Request.Form["cboSize"]:
<form method="POST">
<select name="cboSize">
<option value="xs">Extra Small (XS)</option>
<option value="s">Small (S)</option>
<option value="m">Medium (M)</option>
<option value="l">Large (L)</option>
<option value="xl">Extra Large (XL)</option>
</select>
<input type="submit" />
</form>
Then in your code:
public async Task<IActionResult> OnPostAsync()
{
var size = Request.Form["cboSize"];
//do something with it asyncronously
return RedirectToPage($"/Details/{size}");
}
Related
I'm embedding a form in the admin orders list if an order has a certain status. Code:
function bkf_petals_actions( $column, $post_id ) {
$bkfoptions = get_option("bkf_petals_setting");
if ( $column == 'wc_actions' ) {
$order = wc_get_order( $post_id );
if ( $order->has_status( 'new' ) ) {
$nonce = wp_create_nonce("bkf_petals_decision_nonce");
$pid = get_post_meta($post_id,'_petals_on',1);
$url = admin_url('admin-ajax.php?action=petals_decision&orderid='.$post_id.'&petalsid='.$pid.'&outcome=accept&nonce='.$nonce);
$acceptlink = admin_url('admin-ajax.php?action=petals_decision&orderid='.$post_id.'&petalsid='.$pid.'&outcome=accept&nonce='.$nonce);
$rejectlink = admin_url('admin-ajax.php?action=petals_decision&orderid='.$post_id.'&petalsid='.$pid.'&outcome=reject&nonce='.$nonce.'&code=');
echo '<form action="'.$url.'" method="get" id="petals-decision-'.$post_id.'-form">
<input type="hidden" name="action" value="petals_decision" />
<input type="hidden" name="petalsid" value="'.$pid.'" />
<input type="hidden" name="nonce" value="'.$nonce.'" />
<input type="hidden" name="orderid" value="'.$post_id.'" />
<select name="decision" id="petals-decision-'.$post_id.'-select" class="petals-decision" style="width:150px;" required>
<option value="" disabled selected>Select an action...</option>
<optgroup label="Accept">
<option value="accept">Accept Order</option>
</optgroup>
<optgroup label="Reject">
<option value="293">Cannot deliver flowers</option>
<option value="294">Don\'t have the required flowers</option>
<option value="270">We cannot deliver to this location ever</option>
<option value="280">Cannot deliver to this location today</option>
<option value="281">Do not have these flowers but could do a florist choice</option>
<option value="282">Do not have any flowers to meet delivery date</option>
<option value="272">Need more information to deliver this order</option>
<option value="283">Do not have this container but could do with a substitution of container</option>
<option value="273">Do not do this product ever</option>
<option value="274">There is a problem with this address</option>
<option value="284">This area is restricted, can go on next run but not this delivery date</option>
<option value="285">This area is restricted and can\'t be delivered until next week</option>
</optgroup>
</select>
<input type="submit" />
</form>';
}
}
}
It's rendering as you would expect visually:
Image of rendered form
Here's my problem - as soon as you click on the select field to drop down its options, it triggers the underlying link of the whole row and navigates to the order edit page.
Any ideas? Am I missing something?
#martin-mirchev hit the nail on the head - need to set the z-index of the <select> element to at least 20ish
Firefox 59.0 Project MVC.NET. Use https://select2.github.io js lib for select elements
On the View there are many elements such as:
<div class="control control_medium control_select">
<select name="#nameof(Model.Query.BudgetCycleIds)"
#Html.AjaxViewSubmitOnChange()
#Html.AsugfAutoComplete()
multiple="multiple">
<option value="0">Все</option>
#foreach (var budgetCycle in Model.BudgetCycles)
{
<option value="#budgetCycle.Id" #(Model.Query.BudgetCycleIds?.Contains(budgetCycle.Id) ?? false ? "selected" : "")>#budgetCycle.Name</option>
}
</select>
</div>
Same in the html:
<select name="BudgetCycleIds" ajaxview-submit-onchange="" asugf-select2="" multiple="" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
<option value="0">Все</option>
<option value="13" selected="">2010 - 2012</option>
<option value="14">2011 - 2013</option>
<option value="9">2012 - 2014</option>
<option value="5">2013 - 2015</option>
<option value="6">2014 - 2016</option>
<option value="7">2015 - 2017</option>
<option value="1">2016 - 2018</option>
<option value="2">2017 - 2019</option>
<option value="4">2018 - 2020</option>
</select>
Normal UI (before loading):
Not normal UI (in a second after loading):
Normal UI (in two second after loading):
The other browsers are the same, but very fast, and the user does not see the interface jumps.
How to make sure that the wrong interface does not appear
Not a good solution (because the layout is "jumps")
add hidden class
<option class="hidden" value="0">Все</option>
#foreach (var budgetCycle in Model.BudgetCycles)
{
<option class="hidden" value="#budgetCycle.Id" #(Model.Query.BudgetCycleIds?.Contains(budgetCycle.Id) ?? false ? "selected" : "")>#budgetCycle.Name</option>
}
Now I am creating application using MVC Music Store tutorial. I want to implement sort function. I got stuck in implementation of Post Browse action.
Browse.cshtml
#model Overstock.Models.Category
#{
ViewBag.Title = "Browse Albums";
}
<div class="product">
<h3><em>#Model.Name</em> Products</h3>
<form action="/Store/Browse" method="POST">
Sort
<select id="Category" name="Category">
<option value="All">All</option>
<option value="Electronics">Electronics</option>
<option value="Sports">Sports</option>
<option value="Watches">Watches</option>
<option value="Office">Office</option>
<option value="Beauty">Beauty</option>
</select>
products by
<select id="SortType" name="SortType">
<option selected="selected" value="Name">Name</option>
<option value="Price">Price</option>
</select>
in
<select id="OrderBy" name="OrderBy">
<option selected="selected" value="Ascending">Ascending</option>
<option value="Descending">Descending</option>
</select>
order
<input type="submit" value="Set" />
</form>
<ul id="product-list">
#foreach (var product in Model.Products)
{
<li id="product">
<a href="#Url.Action("Details", new { id = product.ProductId })">
<img id="image" alt="#product.Title" src="#product.PictureUrl" />
<span>#product.Title</span>
</a>
</li>
}
</ul>
</div>
StoreController.cs
// GET: /Store/Browse
public ActionResult Browse(string category)
{
var varCategory = MyDB.Categories.Include("Products").Single(c=> c.Name==category);
return View(varCategory);
}
[HttpPost]
public ActionResult Browse(string Category, string SortType, string OrderBy)
{
//What should I put here?
return View();
}
What should I write in Browse Post action? Please help.
Using OrderBy and OrderByDesceding for example:
if(SortType == "Name") && (OrderBy == "Ascending")
MyDB.Categories.Where(x => x.Name == Category).OrderBy(x => x.Name);
My JSP snippet is as follows:
<form:select path="rules[${counter.index}].assignedTo.assignedToName">
<form:options items="${assignmentRulesForm.assignedToList}"
itemLabel="assignedToName"
itemValue="assignedToName"/>
</form:select>
The assignedTo property refers to this object:
public class AssignmentDTO {
private String assignedToName;
// No other members
assignedToList then is a List<AssignmentDTO>
Really, what I want to happen is for the drop-down to contain all entries in the assignedToList, but to select the value associated with rule[i].assignedto.assignedToName
Presently, what I am seeing is that it does not perform the selection part, and the first item in the drop-down is displayed.
Any help is appreciated.
Thanks
This should work for you, the path is not the name but the assignedTo:
<form:select path="rules[${counter.index}].assignedTo">
<form:options items="${assignmentRulesForm.assignedToList}"
itemLabel="assignedToName"
itemValue="assignedToName"/>
</form:select>
If you have implemented a .equals for your assignedTo, it should just work.
<html>
<head>
<script>
function show() {
var op= window.document.getElementById('select');
var selItem= op.options[op.selectedIndex].value;
if(selItem=="Others") {
document.getElementById('text').style.visibility = 'visible';
}
else {
document.getElementById('text').style.visibility = 'hidden';
}
}
</script>
</head>
<select id="select" onchange="show();">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="Others">Others</option>
</select>
<br>
<input type="text" id="text" style="visibility:hidden">
</html>
For this portion of code
<label for="gender">I am:</label>
<select class="select" name="sex" id="sex">
<option value="0">Gender:</option>
<option value="1">Female</option>
<option value="2">Male</option>
</select>
W3C Validator giving this error reference to non-existent ID "gender"
How to solve this?
Edit
Getting here also
reference to non-existent ID "birthday"
<label for="birthday" class="birthday">Birthday:</label>
<div class="field_container">
<select name="birthday_month" id="birthday_month" class="">
<option value="-1">Month:</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
</select>
<select id="birthday_day" name="birthday_day">
<option value="-1">Day:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="birthday_year" name="birthday_year">
<option value="-1">Year:</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
</select>
</div>
Change the value of the for attribute in the label element:
<label for="sex">I am:</label>
Edit to add:
Your second example is more complicated, because you're using one label for three input fields.
I'd recommend something like the following:
Add the following CSS rule to your site:
.hidden_label {
font-size:1px;
height:0;
line-height:0;
margin:0 0 0 -1000px;
text-indent:-9999px;
}
Then update your form:
<div class="birthday">Birthday:</div>
<div class="field_container">
<label for="birthday_month" class="hidden_label">Birthday Month</label>
<select name="birthday_month" id="birthday_month" class="">
<option value="-1">Month:</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
</select>
<label for="birthday_day" class="hidden_label">Birthday Day</label>
<select id="birthday_day" name="birthday_day">
[...]
</select>
<label for="birthday_year" class="hidden_label">Birthday Year</label>
<select id="birthday_year" name="birthday_year">
[...]
</select>
You want to do two things:
Have a visually appealing form for your users, and then for those users that are using assistive technology, provide some additional helpers along the way. Using the CSS class I defined above, you are ensuring that screen readers will still see the elements and read their contents when the user moves into the form elements, while hiding all the additional labels from the visual site.
There is no id="gender" or name="gender". You are using sex. Either use sex or use gender. Keep it consistent.