I have a search form that has controls that are coded like this:
<div>
<label class="labelclass">Name</label>
<input class=#(IsFieldInvalid("Name") ? "form-control text-uppercase is-invalid":"form-control text-uppercase") data-testid="name" #bind="Data.Name">
....
What I need to do is list each control if it is used at the bottom of the page like so:
You selected: Name, Address, Phone Number ...
After a button is clicked so on the onclick() of the button
I am pretty new to Blazor so I am not sure even where to start with this
I was thinking that I could use the #bind to create the list but I would rather not loop through all of the controls.
CLARIFICATION: I would like to get the name of the control and return it to a list but only if it is filled in the search. For example:
<input type="text" id="txtOne"></input>
Would produce:
You selected: txtOne
Related
I have a simple bootstrap form.
In this form, in the first input box, I ask for name. I want to enable autocomplete. The user shall be able to select the first name, like a form where if you click you have all data the user usually enters in similar forms.
How can I achieve that?
<input type="text" class="form-control" id="name" aria-required="true">
There is an attribute called autocomplete in HTML forms. For the first name you could use autocomplete="given-name and last name would be autocomplete="family-name".
There is more information at MDN Web Docs
When a user loads my page, the first element to become active in the browser is one of my menu buttons.
I have a search box (form field) on my page that I want to be the first thing active.
What I mean by "active" is that when the user pushes the tab button, it cycles through all the elements on the site, right. And if users use tab on my site they have to cycle through all the menu buttons before coming to the search field.
Is there a way to say to the browser, "make this field the first active one on page load"?
So that when the page has loaded, the user can start typing in the search field right away.
Thank you.
You can use autofocus for that. Using javascript you can do
document.onload = function() {
document.getElementById("textField").focus();
}
OR
you can directly use it as follows
Search : <input type="text" name="search" autofocus><br>
You can read more about it here and can try it out here.
It will be best option for case
<input type="text" name="YourSearch" id="YourSearch" autofocus>
I've an adhoc component to manage vehicles and if the user wants more information about a vehicle, I want to redirect him to a contact form passing the vehicle's ID as a parameter to the form, in order to get vehicle's name and other info prior to send the mail.
How can I achieve this?
Now I'm using Fox Contact Form, but I can change it if there is a better alternative.
I am not familiar with the capabilities of Fox Contact Form, but we do exactly this on several auto sites using ChronoForms. This is a 2 step process. First you must decide how you are going to package the information on the originating page.
If the more info is a link, then you will need to pass the information to the form as part of the query string. Your links would have to be formed something like this:
http://www.yoursite.com/index.php?option=com_chronoforms&view=form&year=2000&make=Ford&model=Mustang
You can add as many parameters as you would like to pass to the form.
If the more info can be turned in to a form, then you can add hidden fields to the form that include all of the data you want to pass to the contact form.
The second part of the task is to add a bit of code to the fields in the contact form so that the items auto populate in to the form. For example:
<input type="text" name="year" value="<?php JRequest::getVar('year',''); ?>">
<input type="text" name="make" value="<?php JRequest::getVar('make',''); ?>">
<input type="text" name="model" value="<?php JRequest::getVar('model',''); ?>">
This would give you input fields that the user can then edit, but you could easily make the fields read-only or hidden fields instead of text boxes.
Suppose I have the following HTML form:
<form>
...
<input type="submit" name="queue" value="Queue item">
<input type="submit" name="submit" value="Submit item">
</form>
How do I know which button the user clicked (without using javascript)?
I looked at submitted data and it seems that when "Queue Item" is clicked then "queue" = "Queue Item" gets sent to the server. And when "Submit item" is clicked then "submit" = "Submit item" sets sent.
Can I rely on this behavior? Is it documented somewhere in the standard on HTML forms? How do you guys do it?
Yes, you can rely on this; it's fully documented here. The specific relevant lines say:
When a form is submitted for processing, some controls have their name paired with their current value and these pairs are submitted with the form. Those controls for which name/value pairs are submitted are called successful controls.
and
If a form contains more than one submit button, only the activated submit button is successful.
Yep you can rely on that behaviour.
When <input type="submit" name="queue" value="Queue item"> is clicked, the field "queue" will be set and "submit" will not be.
Whereas when the other gets clicked, the field "submit" will be set, and "queue" will not be.
If you're not assured by this, you can split them into 2 forms and work on it that way.
You can rely on this behavior. You get the value of the input. I would use javascript to toggle a hidden form value, but since you mentioned no javascript you do not have multiple choices.
It's a standard. Since it's an input tag, and has a value, that means you get the value submitted.
Split the form into two forms, replicating any other inputs needed by the other action. Or, if you really just need to know if the user wants to "queue vs. submit" the item, change both submit buttons to radio selections to toggle between the two options, and have a new, separate "submit the form" button.
In that situation if you want a one-click option, you could use Javascript to detect when one of the radio buttons is selected, and auto-submit the form instantly. (Using Javascript for user interface, rather than form handling)
I'm using MVC, and I've got a simple radio button setup:
<%=Html.RadioButton("my_flag", True)%><label>Yes</label>
<%=Html.RadioButton("my_flag", False)%><label>No</label>
The only thing I'm missing is that you can't click the label to select the radio button. Normally you'd use:
<label for="my_flag">
but that associates both labels with the last radio button. Is there any way to associate the labels with the correct radio button?
Note: This is mimicking a paper form, so switching to a checkbox is not an option.
You have two different ways to implement this.
The first one is the simple solution is to embed the radio button inside a <label/> tag.
<p>
<label><%=Html.RadioButton("option", "yes") %> Yes</label>
</p>
<p>
<label><%=Html.RadioButton("option", "no") %> No</label>
</p>
The second path is to associate each radio button with an ID. This is also quite simple with the htmlAttributes argument and it allows for more flexibility in regard to the form layout:
<p>
<label for="option_yes">Yes:</label>
<%=Html.RadioButton("option", "yes", new { id = "option_yes" }) %>
</p>
<p>
<label for="option_no">Np:</label>
<%=Html.RadioButton("option", "no", new { id = "option_no" }) %>
</p>
I would recommend the latter, and it seems to be the one you are asking for too.
EDIT
In fact you should give the argument with the ID attribute no matter what. If you don't do this, your site will have multiple elements with the same ID, and this fails HTML validation.
You need to give the two radio buttons the same name (so that they're in the same group), but different ids (so that you can associate the label with each one individually). I'm not familiar with ASP.NET MVC, so I don't know how to actually accomplish this, but that's the solution.
Edit: a second possibility is to wrap the radio buttons inside the label tag, like so:
<label><%=Html.RadioButton("my_flag", True)%>Yes</label>
<label><%=Html.RadioButton("my_flag", False)%>No</label>
* Note that this way may actually have better browser compatibility, I know some browsers are still iffy about the name/id distinction
I'm not an asp programmer, so sorry if i'll tell something off :P
Label's attribute for is referenced to input's id. So you will have to do something like
<input type="radio" name="rad1" id="rad1_1"><label for="rad1_1">Rad1</label>
<input type="radio" name="rad1" id="rad1_2"><label for="rad1_2">Rad2</label>
You can do it like this: (This is using Razor, but it's easy to translate.)
#Html.RadioButtonFor(model => model.MyValue, true, new { id = "MyValue_True" })
<label for="MyValue_True">Yes, this is true</label>
#Html.RadioButtonFor(model => model.MyValue, false, new { id = "MyValue_False" })
<label for="MyValue_False">No, this is false</label>
Basically you manually specify the id attribute for the radio buttons.