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");
});
Related
just started learning to make dynamic pages with WebMatrix and have run into a road block. (Long history of static html and some php using notepad++, but this is new to me.)
In short: I'm trying to give people the option of creating a new team entry in the database OR joining an existing team from a html helper dropdown list populated from the database. I've been trying various ways of doing this for the better part of two days and can't seem to figure it out after extensive searchers here and on ASP.net. I'm also hoping to figure out how to allow either the creation of a new team or joining an existing team already in the DB on the same page without getting commas inserted into the database.
I've removed all my attempts at a dropdown and am sharing what currently works without the html.dropdown:
#{
Validation.RequireField("FName", "Your first name is required");
Validation.RequireField("LName", "Your last name is required");
Validation.RequireField("Team", "A team is required to play");
Validation.RequireField("Pledge", "You must donate to play.");
var db = Database.Open("BBBT");
var FName = Request.Form["FName"];
var LName = Request.Form["LName"];
var Team = Request.Form["Team"];
var Pledge = Request.Form["Pledge"];
if (IsPost && Validation.IsValid()) {
if(ModelState.IsValid) {
var insertQuery = "INSERT INTO Players (FName, LName, Team, Pledge) " +
"VALUES (#0, #1, #2, #3)";
db.Execute(insertQuery, FName, LName, Team, Pledge);
Response.Redirect("~/ListTeams");
}
}
}
....Snip....
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
</head>
<body>
<h1>Register</h1>
#Html.ValidationSummary("Errors with your submission:")
<form method="post" action="">
<fieldset>
<legend>Join the fun!</legend>
<div>
<label>First Name:</label>
<input name="FName" type="text" size="50" value="#FName" />
</div>
<div>
<label>Last Name:</label>
<input name="LName" type="text" size="50" value="#LName" />
</div>
<div>
<label>Create a Team</label>
<input name="Team" type="text" size="50" value="#Team" />
</div>
<div>
<label>Or Joing an Existing Team</label>
<!-- This is where I would like to put the Dropdown list-->
#Html.DropDownList
</div>
<div>
<label>Pledge:</label>
<input name="Pledge" type="text" size="50" value="#Pledge" />
</div>
<div>
<label> </label>
<input type="submit" value="Insert" class="submit" />
</div>
</fieldset>
</form>
</body>
</html>
Any direction would be greatly appreciated!
Thank you.
Your will be getting the result in two steps. First Generate the List, then display it.
In the code block at the top of the page add this code
List<string> Teams = new List<string>();
foreach(var row in db.Query("SELECT DISTINCT Team FROM Players"))
{
Teams.Add(row.Team);
}
and in the place you want the dropdown populate the list
<select name="Team">
#foreach(string Teamname in Teams)
{
<option value="#Teamname ">#Teamname </option>
}
</select>
EDIT:
<select name="Team" id="TeamDropdown" onchange="toggleteamcreation()">
#foreach(string Teamname in Teams)
{
<option value="#Teamname ">#Teamname </option>
}
<option value"New">Create New Team</option>
</select>
<script>
function toggleteamcreation(){
if(document.getElementById('TeamDropdown').value=="New"){
document.getElementById('Create_New_Team').style.display="block";
}
else{
document.getElementById('Create_New_Team').style.display="none";
}
}
</script>
<div id="Create_New_Team" style="display:none">
<label>Create a Team</label>
<input name="Team" type="text" size="50" value="#Team" />
</div>
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 have a webpage that has 3 file inputs. There are specific fields on the form that needs to be sent when user uploads the file. I am not able to figure out how do i add custom data to my POST and how do i retrieve it back on the server. This is how my code looks like:
ASPX Page with 3 file inputs and other text boxes/dropdowns:
<form action="FilesUploader.ashx" method="post">
<div id="dvNewAttachment1">
<span>Attachment Type</span>
<select id="ddlAttachmentType1">
<option>T1</option>
<option>T2</option>
<option>T3</option>
</select>
<span>Description</span>
<input id="txtDesc1" />
<select id="ddlApproval1">
<option>Yes</option>
<option>No</option>
</select>
<input id="fileUploader1" type="file" runat="server" />
</div>
<br />
---------------
<div id="dvNewAttachment2">
<span>Attachment Type</span>
<select id="ddlAttachmentType2">
<option>T1</option>
<option>T2</option>
<option>T3</option>
</select>
<span>Description</span>
<input id="txtDesc2" />
<select id="ddlApproval2">
<option>Yes</option>
<option>No</option>
</select>
<input id="fileUploader2" type="file" runat="server" />
</div>
<br />
-------------------------------
<div id="dvNewAttachment3">
<span>Attachment Type</span>
<select id="ddlAttachmentType3">
<option>T1</option>
<option>T2</option>
<option>T3</option>
</select>
<span>Description</span>
<input id="txtDesc3" />
<select id="ddlApproval3">
<option>Yes</option>
<option>No</option>
</select>
<input id="fileUploader3" type="file" runat="server" />
</div>
<input type="submit" />
</form>
This is how my handler looks like:
public void ProcessRequest(HttpContext context)
{
HttpPostedFile myFile = context.Request.Files[0];
int nFileLen = myFile.ContentLength;
byte[] buffer = new byte[nFileLen];
using (BinaryReader br = new BinaryReader(myFile.InputStream))
{
br.Read(buffer, 0, buffer.Length);
}
}
As you can see i have 3 uploads and each has Attachment Type and description associated with it which i need to retrieve for each input file in my handler.
Right now i am just processing file from the first input but later i am going to loop thru the inputs and process them.
If your handler do not receive files that you place in file uploaders then your form needs to have additional attribute like this:
<form action="FilesUploader.ashx" method="post" enctype="multipart/form-data">
In order to get values from dropdowns on server you need to provide a name attribute to them:
<select id="ddlApproval1" name="ddlApproval1">
<option>Yes</option>
<option>No</option>
</select>
Is it possible to selectively disable the autofill feature in text fields using code?
I'm developing my custom code in ASP.Net AJAX to search for the suggestion in the database and I would like to prevent the browser suggestions from appearing when the user starts typing in the textbox.
I'm looking for a solution that works in the most modern browsers (IE 7 & 8, Firefox, Safari and Chrome). It's is ok if the workaround is in Javascript.
Look at the autocomplete HTML attribute (on form or input tags).
<form [...] autocomplete="off"> [...] </form>
W3C > Autocomplete attribute
Edit:
Nowadays - from the comments - web browsers do not always respect the autocomplete tag defined behavior. This non-respect could be surrounded with a little of JavaScript code but you should think about you want to do before use this.
First, fields will be filled during the page loading and will only be emptied once the page load. Users will question why the field has been emptied.
Second, this will reset other web browser mechanisms, like the autofill of a field when you go back to the previous page.
jQuery( function()
{
$("input[autocomplete=off]").val( "" );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" value="John" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" value="qwerty" autocomplete="off">
</div>
<input type="submit" value="Login">
</form>
you can put it into your inputs:
<input type="text" name="off" autocomplete="off">
or in jquery
$(":input").attr("autocomplete","off");
There are 2 solutions for this problem. I have tested following code on Google Chrome v36.
Recent Version of Google Chrome forces Autofill irrespective of the Autocomplete=off.Some of the previous hacks don't work anymore (34+ versions)
Solution 1:
Put following code under under <form ..> tag.
<form id="form1" runat="server" >
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>
...
Read more
Solution 2:
$('form[autocomplete="off"] input, input[autocomplete="off"]').each(function () {
var input = this;
var name = $(input).attr('name');
var id = $(input).attr('id');
$(input).removeAttr('name');
$(input).removeAttr('id');
setTimeout(function () {
$(input).attr('name', name);
$(input).attr('id', id);
}, 1);
});
It removes "name" and "id" attributes from elements and assigns them back after 1ms.
Adding an autocomplete=off attribute to the html input element should do that.
Add the AutoCompleteType="Disabled" to your textbox
This should work in every browser
<script type="text/javascript">
var c = document.getElementById("<%=TextBox1.ClientID %>");
c.select =
function (event, ui)
{ this.value = ""; return false; }
</script>
My workaround is to make the password field a normal textbox, then using jquery to turn it into password field on focus:
<asp:TextBox runat="server" ID="txtUsername" />
<asp:TextBox runat="server" ID="txtPassword" />
<script>
$("#txtPassword").focus(function () {
$("#txtPassword").prop('type', 'password');
});
</script>
I have successfully tested this in Edge and Firefox.
<input type="text" id="cc" name="cc" autocomplete="off">
works for regular text input.
For passwords, you need to use autocomplete="new-password"
<input type="password" id="cc1" name="cc" autocomplete="new-password">
per Mozilla Development Network
Place below code above your username control. This will work in call the browser.
<div style="margin-left:-99999px; height:0px;width:0px;">
<input type="text" id="cc" name="cc" autocomplete="off">
<input type="password" id="cc1" name="cc" autocomplete="off">
</div>