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"
Related
I am using the Angular Component library which includes material-input. Is there a way to disable input auto validate when changing or emptying the material-input? Meaning that I want to only validate the form upon submit.
Plus the onSignInPressed() function is not getting triggered on submit despite that the material-button is of type submit.
<div class="container">
<form (ngSubmit)="onSignInPressed()" #signInForm="ngForm">
<div>
<material-input
floatingLabel type="email"
label="E-mail"
[(ngModel)]="email"
ngControl="email"
required></material-input>
</div>
<div>
<material-input
floatingLabel type="password"
label="Password"
[(ngModel)]="password"
ngControl="pass"
required></material-input>
</div>
<div class="w-100">
<material-button class="mx-0 btn-primary w-100 margin-zero" type="submit"
[disabled]="!signInForm.form.valid">
Sign In
</material-button>
</div>
</form>
</div>
You can try to use a different value accessor on the material-input, however you won't be able to validate the form on submit.
With changeUpdate, validation will be triggered on blur or when press ENTER
<material-input changeUpdate [(ngModel)]="value"
Docs
About the material-button, there is an issue on github with a hacky solution.
You can also try to add an hidden input
<input type="submit" hidden />
i've got this code using Jquery Mobile :
<div role="main" class="ui-content">
<form action="/" method="post">
<fieldset data-role="controlgroup">
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked="">
<label for="checkbox-1a">Cheetos</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a">
<label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a">
<label for="checkbox-3a">Fritos</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a">
<label for="checkbox-4a">Sun Chips</label>
</fieldset>
</form>
</div>
The problem is that when i load the page the codes looks like this :
<div class="ui-controlgroup-controls ">
<div class="ui-checkbox">
I've skipped the whole code, the problem is in the
that should not be there.
Any idea about how to fix it?
This problem comes when copying and pasting the source code from their website.
In fact in this way you copy also invisible blank spaces which are converted as by the browser and make the last block go down.
To solve the issue simply remove all the spaces between the tags and all will be displayed correctly.
There are many ways you can remove the automatic default padding.
First
<div style="padding: 0;">...</div>
Second: Define an id for the div tag and set padding to 0 in css
<div id="myID">
#myID{ padding:0; }
Thanks for any help you can provide! I have a Ruby on Rails and Google Maps API V3 mapping application where people can use a form to enter a starting address, waypoints, and an ending address. They click Submit, and the form is hidden by jQuery. In its place appears a Google Map with the driving route and directions. On this same view, the user can enter a name for the map.
My next goal is to save the map information to a database. I've already gotten most of the way there, but I've run into a problem. I want to save the name of the map and the starting, ending, and waypoint entries from the form. However, when I wrap the form around the entire page, users who click "Submit" to view their map automatically save their form to the database. This is a problem because they don't have a chance to name or view their map before saving.
How should I structure the form so that the Google Map submit button doesn't save the form but I can still capture information from the start, waypoints, and end?
CODE FOR MY PAGE:
<!-- This is the map route page -->
<div id="map-route-page">
<div id="map_canvas"></div>
<form id="createaMap" action="/newsavedmaps" method="post">
<input id="savemap_name" name="newsavedmapname" size="30" type="text" value="New Map"></p>
<input type="submit" id="savethismap" value="Save Map">
</div>
</div>
<!-- End of map route page -->
<!-- This is the form page -->
<div id="map-form-page">
<div id="startingpoint">
<b>Start</b>
<input id="startinput" type="text" name="starthere" size="56" value="500 Main Street, CITY, STATE, ZIP"></p>
</div>
<div id="stops">
<div id="multiselect">
<select multiple id="select1">
<option value="500 Main Street, CITY, STATE, ZIP">Address1</option>
<option value="500 Main Street, CITY, STATE, ZIP">Address2</option>
<option value="500 Main Street, CITY, STATE, ZIP">Address3</option>
</select>
</div>
</div>
<div id="endingpoint">
<b>End</b>
<input id="endinput" type="text" name="endhere" size="56" value="500 Main Street, CITY, STATE, ZIP"></p>
</div>
<input type="submit" onclick="calcRoute();" id="showmapview" value="Show Map">
</div>
</form>
<!-- End of form page -->
</body>
You shouldn't be using a submit button for your google maps function. Because the button is sitting within a <form> it's trigger the call to the server. Strip off type="submit".
It's also looks like you're trying to do two forms, the first for submission to the server, the second for google maps function. If that's the case, I'd move the </form> tag above the <!-- End of map route page --> comment.
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
I am using bPopup to load a form in an overlay. The form is basically in a that is loaded hidden in the page, and by clicking a button on the page, the overlay shows up on top with the form in it.
I was using this code in another page before and it worked fine but wanted to go the overlay route as I felt the user experience was better.
So what happens is:
The overlay loads perfectly, all fields are visible, but the submit button doesn't do anything.
Using firebug, I looked at the code of the overlay and realized that my opening and closing tags are gone from the div.
I check and they are present in the when hidden.. so I'm guessing something happens with bPopup as I load the overlay.
I couldn't find anything in the regard and turn to the community.
Thanks
here is a sample of the code:
The div in the page I load:
<div id="fileuploadbox">
<div id="fileupload_div" class="contentcontainer">
<div class="headings alt">
<h2>Upload a file</h2>
</div>
<div class="contentbox">
<form action="**mycontroller**" method="post" enctype="multipart/form-data">
<p><span class='label'>File:</span><input type="file" name="file" value="" id="uploader" size="34" /></p>
<p><span class='label'>Description:</span><input type="text" name="description" value="" id="smallbox2" class="inputbox" maxlength="250" /></p>
<p><span class='label'> </span><input type="submit" name="" value="Upload file" class="btn" />
</form>
</div> <!-- content box -->
</div> <!-- contentcontainer -->
</div> <!-- fileuploadbox -->
The Button it self:
<a href="#" class="fileuploadpop">
<div id="fileuploadpop">
Upload a file
</div>
</a>
The Javascript:
<script language="javascript">
$(document).ready(function(){
$("a.fileuploadpop").bind('click', function(){
$("#fileuploadbox").bPopup();
return false
});
});
</script>
The code you provided works fine in my mac Firefox and Chrome with bPopup. The submit button works!
May be something to do with your btn class which I have not defined or you might try putting this in a bare-bone page to test with bPopup first to track and resolve any other conflict.