How to select checkboxes (vanilla html) on the iPad using "next"? - ipad

The Code
This is my vanilla html, nothing fancy, just a form, then some content then another form:
<form>
<legend>Form #1</legend>
<fieldset>
<p>
<label for="myInput">Tap in the box >></label>
<input type="text" id="myInput" />
</p>
<p>
<label for="mySelect">Boselecta</label>
<select id="mySelect">
<option value="" selected="selected">Please select something...</option>
<option value="proper">Proper</option>
<option value="bo">Bo</option>
<option value="i">I</option>
<option value="tell">Tell</option>
<option value="thee">Thee</option>
</select>
</p>
<p>
<label for="myCheckbox">
<input type="text" id="myCheckbox" /> Check yoself before you wreck yoself
</label>
</p>
</fieldset>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<p>
Shu' thi gob. Ee by gum bloomin' 'eck wacken thi sen up be reet eeh. Nobbut a lad. Ah'll gi' thee a thick ear big girl's blouse any rooad tintintin nay lad. Ah'll gi' thi summat to rooer abaht face like a slapped arse. Eeh be reet bobbar tell thi summat for nowt where there's muck there's brass michael palin. Ey up. Tintintin soft southern pansy. Ah'll gi' thee a thick ear. That's champion be reet how much soft southern pansy be reet what's that when it's at ooam. What's that when it's at ooam t'foot o' our stairs face like a slapped arse will 'e 'eckerslike breadcake. Bloomin' 'eck. By 'eck by 'eck bloomin' 'eck. Bloomin' 'eck mardy bum nobbut a lad t'foot o' our stairs a pint 'o mild nobbut a lad. Big girl's blouse ey up nah then shurrup.
</p>
<form>
<legend>Form #2</legend>
<fieldset>
<p>
<label for="someField1">Field #1</label>
<input type="text" id="someField1" />
</p>
<p>
<label for="someField2">Field #2</label>
<input type="text" id="someField2" />
</p>
</fieldset>
<p>
<input type="submit" value="Submit" />
</p>
</form>
Working Example
I also have a simple example you can try here:
http://dabblet.com/gist/3551784
The Problem
On your iPad, follow these instructions:
Go to the above URL.
Tap in the first box on the first form, but don't enter anything, just let the keyboard show.
Tap "next" on the keyboard, this should take you to the select, again this should expose the option but don't select anything.
Tap "next" again, so now you should have jumped from the select, to the first field in the second form..
Why does the "next" button not jump to the checkbox on the first form? It's sequential, we're not using anything fancy, but the focus shifts to the next input on the 2nd form.
Things I've tried (that made no difference):
Changing the HTML of the checkbox so it's a label and input
Adding a tabindex attribute

Unfortunately, this is "WAD" (works as designed). In iOS, the "Next" and "Previous" buttons do not work for checkboxes. The reason may just be that there isn't really a keyboard way of handling checkboxes that was intuitive enough.
Chock it up to an Apple Feature.

Related

HTML - "Search by" and how to filter by selected field

My task is to add a combo-box in the search page to allow a user to select the field she wants to search by and then search for customers using that field. In other words, there should be a “Search By” combo-box on the index page that the user selects the field to search by (Last Name, First Name, etc.) and then types in a search string and clicks a find button to perform a search and display the results on the same page. Search results should be sorted based on the field used for the search.
Currently, I have the following code:
<form asp-action="Index" method="get">
<div Class="form-actions no-color"></div>
<div class="search-item">Search</div>
<div class="sigform_fld search-item">
<select class="catalog">
<option value="1">Customers</option>
</select>
</div>
<div class="search-item">By</div>
<div class="sigform_fld search-item option">
<select class="option-1">
<option value="2">Last Name</option>
<option value="3">Email Address</option>
<option value="4">Company Name</option>
</select>
</div>
</form>
<form asp-action="Index" method="get">
<div Class="form-actions no-color">
<p>
<input type="text" name="LastName" value="#ViewData("currentFilter")" />
<input type="submit" value="Search" class="btn btn-default" />
| #Html.ActionLink("All Customers", "Index")
</p>
</div>
</form>
This only filters by Last Name. How can I have one search bar that filters by the selected option (Last Name, Company Name or Email address).
Help!

Force capitalization in iOS web page?

This should be easy to fix, but I can't find out why it's not working.
I have a web "app" that runs in Safari, and it's made for users to add to the home screen. There's a web form where the user enters a first and last name. Here's the simple code for that form.
<fieldset>
<div class="row">
<label>First Name</label>
<input type="text" name="first_name" id="pFirstName" value="" autocapitalize="on" autocorrect="off" placeholder="John" />
</div>
<div class="row">
<label>Last Name</label>
<input type="text" name="last_name" id="pLastName" value="" autocorrect="off" autocapitalize="on" placeholder="Doe" />
</div>
</fieldset>
Very simple. The problem is that the Last Name form is not capitalized when the user switches to it. I ran it directly in mobile Safari, and it worked fine. When I added to the home screen, I had the same issue...
Is this just a bug in iOS/webkit (because it used to work...)? Not sure if there's some sort of script to force the auto-capitalization? Thanks!
Edit: If I click on the field directly, it capitalizes. The problem is when I fill in text for first name, and click the "Next" arrow on the top of the keyboard.
Try using autocapitalize="sentences"

Django:How can i get the value of radio button not checked?

I'm working on a simple website using Django framework. The website is similar to Kittenwars.
In my page i have two images with radio buttons and the user must choose one of them. Every image has a score and,when an image wins a vote, his score increases by 1/n where n is the number of vote. However, when an image lost a vote, his score decreses by 1/n.My problem is: how can i have the value of the loser image after the submit of the form?
Here's the code of my template:
<form action="" method="post">
{% csrf_token %}
<h2>who is the best?</h2><br>
<div>
<input type="radio" name="image" id="immagine1" value="{{first.name}}" />
{{first.nome}}<br>
<img src="../media/{{first.path}}" width="300" heigth="150"/>
</div>
<input type="radio" name="immagine" id="immagine2" value="{{second.name}}" />
{{second.name}}<br>
<img src="../media/{{second.path}}" width="300" heigth="150"/>
<div>
<input type="submit" value="vote" />
</div>
</form>
And here there is the code of my view:
def vota(request):
if request.method=='POST':
choice=request.POST['image']
if choice != False :
imm=Image.objects.get(nome=scelta)
i=1.0/imm.number_vote
imm.score+=i+i
imm.save()
context=RequestContext(request)
return render_to_response('images/Confirmed.html',{'image':imm,},context)
SO, how can i get the values of the loser image after the post?
Sorry for my bad english.
You can take hidden fields for radio buttons:
<input type="hidden" name="myField" value="false" />
<input type="checkbox" name="myField" value="true" />
both of the radio buttons have same name. If any of the button is unchecked, the hidden field will be submitted.

unable to display the validation messages from #Html.ValidationSummary() in MVC view

I have a fairly simple form created in a partial view and loading the form on a jquery dialog. The view is tightly bound to a model. When the user clicks on the submit button with out entering any inputs, I need to show the validation messages.
<div>
<form method="post" enctype="multipart/form-data" id="ssimForm" action="Home/ProcessUploadedFile"
onsubmit="return false;">
<div>
<h3>
Select the file to be uploaded :</h3>
<span>
<input type="file" name="UploadFileName" id="UploadFileName" /></span>
</div>
<div>
<h3>
Select the date range :</h3>
<span class="uslabel">From Date(MM/dd/yyyy): </span>
<input class="usdate" id="usfromdate" name="StartDate" type="date" />
<span class="uslabel">To Date(MM/dd/yyyy): </span>
<input class="usdate" id="ustodate" name="EndDate" type="date" />
</div>
<div>
<br />
<input type="submit" id="submitButton" name="submitButton" value="Process File" />
</div>
#Html.ValidationSummary()
<div class="message-success">
<span>#ViewBag.Confirmation</span>
</div>
<div class="message-error">
<span>#ViewBag.Error</span>
</div>
</form>
</div>
Now comes the actual problem. when I submit the form I am able to see the validationSummary object populated with the messages, but they are not getting rendered on the screen.
I am able to see the messages if I replace the content of the dialog with the response from the jquery ajax call, that fetches the entire view from the server side. I do not want to take this approach as I beleive this is not the correct way to return validation summary in MVC.
Am I missing something? Any help is appreciated.
I don't know why you don't have the #using (Html.BeginForm()) { } block.
Here is my blog post for a quick and easy way to set up Validation Summary + Unobtrusive Validation for MVC3+.
http://geekswithblogs.net/stun/archive/2011/01/28/aspnet-mvc-3-client-side-validation-summary-with-jquery-validation-unobtrusive-javascript.aspx

How can I add a text box beside the label for checkbox using jquery mobile?

How can I add a text box beside the label for checkbox using jquery mobile? It should be in one line (checkbox --> label (for checkbox) --> textbox)
If you want to add a label in the same line as its referencing element, like for example:
My legend [ ] Checkbox label
you may want to try using field containers, with data-role="fieldcontain".
For example:
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Agree to the terms:</legend>
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
<label for="checkbox-2">I agree</label>
</fieldset>
</div>
The code above will give you:
Agree to the terms: [] I agree
Check the online doc for more information: http://jquerymobile.com/demos/1.1.1/docs/forms/checkboxes/
Now, if you want to several elements on one line (= several elements in different columns), I mean more than just a label and its element, you may wanna check the jQuery Mobile's Layout grids: http://jquerymobile.com/demos/1.1.1/docs/content/content-grids.html
Considering your example case, I think you may want to try to use a combination of the 2 methods above. So, you may try something like this:
<div class="ui-grid-a">
<!-- FIRST COLUMN -->
<div class="ui-block-a">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Agree to the terms:</legend>
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
<label for="checkbox-2">I agree</label>
</fieldset>
</div>
</div>
<!-- SECOND COLUMN -->
<div class="ui-block-b">
<input type="text"/>
</div>
</div>
Hope this helps.

Resources