I have a select box that is showing up as a multi-select box when I want it to be a drop down. I cannot figure out how to change it.
<form:select path="roles" id="role" cssClass="form-control">
<form:options items="${roles}" itemLabel="description" itemValue="id"/></form:select>
The html that is produced as a result of this (see below) has the multiple box attribute added.
<select id="role" name="roles" class="form-control" multiple="multiple">
<option value="1">Administrator</option>
</select>
<input type="hidden" name="_roles" value="1"/>
It also produces that hidden input and I don't understand why.
Any help would be appreciated.
Related
How can I style the dropdown part of the <Input type="month"> tag. It works fine on mobile, but on pc + chrome the dropdown thing has an unneeded and confusing date selector. Is there a way to remove it?
Here is a fiddle demonstrating it JSFiddle
I'm afraid there's no much you can do if you want to do it only with input tag. As far as I know this is the functionality fully dependent on browser support. In Firefox, for example, it doesn't work at all :-)
I highly recommend to use some JavaScript datepicker which is usually far more independent, like this one. It's API reference is here.
It can be simply used like this:
HTML
Date: <input type="text" id="datepicker">
jQuery
$( "#datepicker" ).datepicker();
<div className="filterFormField mt-5">
<input type="month" name="month" list="monthslist" />
<datalist id="monthslist">
<option value="2022-01"/>
<option value="2022-02"/>
<option value="2022-03"/>
</datalist>
</div>
In case you need to customize it for the selected datalist.
It can be simply used like this:
JSX:
<div className="filterFormField mt-5 ">
<Form.Control
type="month"
name="month"
list="monthslist"
onChange={(e) => {
setMonth(e.target.value);
}}
/>
<datalist id="monthslist">
<option value="2022-01"/>
<option value="2022-02"/>
<option value="2022-03"/>
</datalist>
</div>
My question is:
May I put submit button not in the end of form, I need to put submit somewhere in the middle of form for comfort design layout.
For example:
<form name="wide-search" action="/wide-search/" method="get" class="form-wide-search">
<select class="form-control cars">
<option>1</option>
<option>2</option>
</select>
<input type="text" class="form-control" placeholder="Поиск по всем объявлениям доски">
<select class="form-control region-search">
<option>1</option>
<option>2</option>
</select>
//HERE IS FORM SUBMIT BUTTON
<div class="input-group">
<input class="form-control" id="searchInput" type="text" name="q" placeholder="Искать среди всех товаров и услуг" value="" x-webkit-speech="">
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">Найти</button>
</div>
</div>
//AND THEN WE HAVE SOME SELECT'S WITH PARAMETRES, THAT ALSO CONNECTED TO THIS FORM BUT THEIR
PLACE IS AFTER SUBMIT BUTTON
<select class="form-control mark">
<option>1</option>
<option>2</option>
</select>
<select class="form-control model">
<option>1</option>
<option>2</option>
</select>
<select class="form-control year">
<option>1</option>
<option>2</option>
</select>
</form>
I need to create Html and Css design layout for this form, I get this task from programmer, and I'm not shur will this work true, or it is wrong layout. I didn't find answer in internet for this question. So I believe someone can explain me. In the end I add image of this form.
You can put the submit button anywhere inside the form. Also with the HTML5 form attribute you don't even have to put it inside the form, e.g.
<form id="form-id">
...
</form>
<button type="submit" form="form-id">Submit from outside</button>
The location for where you place elements inside a form does not matter. A quick example would be:
Submit Button On Top of Input
Also, a submit button can be located outside the form with the the form attribute and the form's id.
Submit Outside Form
I'm updating website and gradually changing all bits over to jquerymobile to make it more phone friendly.
I had a page where a user can select either a specific month or a date range. I toggled between them using some javascript. However, since changing things the display:block etc doesn't seem to work properly. It displays them out of position. The input fields are now displayed above the selector when you toggle between them. Please see http://jsfiddle.net/pfLme/1/
Obviously I would like to get them into the correct position.
(The next task will be to try and get Datepicker working - if anyone fancies pointing me in the right direction for that)
Thank you.
(code is all on jsfiddle, but stackoverflow tells me i need to include it here too)
function showType(allornone) {
if (allornone == '1month')
{
document.getElementById('btwdateselector').style.display = 'none';
document.getElementById('monthselector').style.display = 'block';
document.getElementById('datestart').value = '';
document.getElementById('dateend').value = '';
}
if (allornone == '2dates')
{
document.getElementById('btwdateselector').style.display = 'block';
document.getElementById('monthselector').style.display = 'none';
}
} //end function
...I realise now of course that I have to get used to thinking about & taking advantage of the jquery side of jquery mobile too.
So far I came up with
$(document).on('click', '#certainmonth', function(a) {
$('#monthselector').hide();});
$(document).on('click', '#btwdates', function(a) {
$('#btwdateselector').show();});
I'm not sure yet how to include the if statement and toggle between the show and hide.
The error was only occurring in Firefox 27.0.1
Solution was to change <fieldset data-type="controlgroup"> to <div data-type="controlgroup"> around the radioboxes. Thanks to Omar for the help.
http://jsfiddle.net/pfLme/11/
<form action="page.php" name="mileageform" class="responsive_block" data-ajax="false">
<div data-role="controlgroup">
<legend>Should be at TOP</legend>
<input type="radio" name="searchtype" value="certainmonth" id="certainmonth" checked="checked" />
<label for="certainmonth">Mileage for certain month</label>
<input type="radio" name="searchtype" value="btwdates" id="btwdates" />
<label for="btwdates">Mileage between two dates</label>
</div>
<fieldset id="monthselector" data-role="controlgroup" data-type="horizontal">
<select name="month" data-native-menu="false">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="year" data-native-menu="false">
<option value="2000">2000</option>
<option value="2001">2001</option>
</select>
</fieldset>
<fieldset id="btwdateselector" class="ui-screen-hidden">
<div class="ui-field-contain">
<label for="datestart">Start Date:</label>
<input type="date" id="datestart" name="datestart" placeholder="dd/mm/yyyy" />
</div>
<div class="ui-field-contain">
<label for="dateend">End Date:</label>
<input type="date" id="dateend" name="dateend" placeholder="dd/mm/yyyy" />
</div>
</fieldset>
<input type="submit" onclick="return checkForm();" value="Display Mileage" />
</form>
$(document).on('change', '#certainmonth, #btwdates', function (a) {
$('#monthselector').toggleClass("ui-screen-hidden");
$('#btwdateselector').toggleClass("ui-screen-hidden");
});
Appoligise for what seems to me like a silly question, I'm not that familair with the web-based side of C# using ASP, and I've been unable to find a solution online - all the related things I have found have been for either <ASP:> controls or about adding items to the dropdown.
I am trying to return the string contains within the <option></option> tags, i.e. House, Reg, Year or Status. As I need to add the value to part of my Session variable in the code behind.
So I have added the runat=server parameter, and now I can access the select part via it's ID.
The count returns 1, but the item don't appear to be the string "house"... I can't seem to access the part I want, I thought I would be able to loop through items with findByText but it returns null.
Having a brain fart over this, could someone poke me back on track?
<div class="filterDropDowns" runat="server" id="filterDropDowns" name="filterDropDowns" visible="false">
<select name="houseFilter" runat="server" id="houseFilter" class="row1 filterDropDown">
<option value="*" class="row1">House</option>
</select>
<select name="regFilter" runat="server" id="regFilter" class="row1 filterDropDown">
<option value="*" class="row1">Reg</option>
</select>
<select name="yearFilter" runat="server" id="yearFilter" class="row1 filterDropDown">
<option value="*" class="row1">Year</option>
</select>
<select name="statusFilter" runat="server" id="statusFilter" class="row1 filterDropDown">
<option value="*" class="row1">Status</option>
</select>
</div>
<div class="filterButtonContainer" runat="server" id="filterButton" name="filterButton" visible="false">
<input type="button" value="Filter" class="keyboardButtonStyle filterButton" onclick="javascript:DoFilter();" />
</div>
<div>
Have you tried
regHouse.InnerText
or
regHouse.Items[regHouse.SelectedIndex].Text
I think this also should be
<select name="houseFilter" runat="server" id="houseFilter" class="row1 filterDropDown">
<option value="House" class="row1">House</option>
....
I ran into a strange problem with checkbox groups. I am trying to get the values from a group of checkboxes, but I have to hit the submit button twice for it to get the values... I have no idea why. I also use a dropdown box on the same form and I only need to hit the button once to get its value.
my asp code to write it to page
Dim selectFormValue
selectFormValue = Replace(Request.Form("selectTest"), """", "")
Response.write Request.Form("checkGroup")
here is the html being generated
<form method="post" name="formTest">
<select name="selectTest">
<option value='123"' selected="">Option 1</option>
<option value='124"' selected="">Option 2</option>
<option value='125"' selected="">Option 3</option>
</select>
<input type="checkbox" name="checkGroup" value="1" CHECKED />
<input type="checkbox" name="checkGroup" value="2" CHECKED />
<input type="checkbox" name="checkGroup" value="3" CHECKED />
<input type="checkbox" name="checkGroup" value="4" CHECKED />
<input type="submit" name="submit" value="Update" />
</form>
Thanks!
One thing i note is, that you don't specify an action in your form.