If I go visit my website, the page immediately scrolls to the first input in the contact form page, rather than display at the top of the page. I could probably set the scrollTop in a jquery script to fix it but I would rather get a solution that would work without manipulating the page using jquery or javascript. Can anyone explain this behaviour or how to fix it?
site: http://danmacmill.host22.com/
Remove the autofocus part of that input, and that problem is gone.
It's because you have autofocus on <input name="name"/>. Try removing it.
I think this will cause you the problem
<form action="demo_form.asp">
First name: <input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
but if you use it this way it will solve your problem
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
Check this out
Remove autofocus property:
<span>Name*:</span>
<input name="name" placeholder="Please enter your name" type="text" tabindex="1" required autofocus>
It is because of the autofocus parametter you have on that input. You must remove it or manipulate with js
Related
I am having problem with angular validation.
this one does'nt work...
<input type="text" ng-model="text1" name="text1" required>
<span ng-show="text1.$error.required">Please enter something!</span>
but this works:
<form name="myform">
<input type="text" ng-model="text1" name="text1" required>
<span ng-show="myform.text1.$error.required">Please enter something!</span>
</form>
is it possible to somehow correct the first one without placing it inside a form?
thanks
You can use the "ng-form" directive if you really dont want to add a form tag.
<body ng-controller="MainCtrl">
<div ng-form="myForm">
<input type="text" required ng-model="user.name" placeholder="Username">
<button ng-click="doSomething()" ng-disabled="myForm.$invalid">DO</button>
</div>
</body>
example
As far as I know, no, it is not possible. The FormController is what handles the states of each form element, so you need a reference to it in order to check the validation state.
In most HTML forms when I start typing something (say birth date) navigators propose to sit with previous similar entries. For instance on html form submit the second visit offers me the first visit entries.
However, when using a bootstrap modal containing a form, the same does not happen, for instance: with a form inside.
I do not want to use jquery autocomplete since I do not have a list of potential answers, I just want to have the same behavior in and outside modals.
Thanks.
Browser autofills are notoriously unpredictable - they make educated guesses about the data based on the name attribute of inputs. It's unlikely you'll be able to get this behavior consistently cross-browser.
can you try this :
add the attribute autocomplete = "on" on your form,
maybe it will do the job.
<form action="demo_form.asp" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
source: http://www.w3schools.com/tags/att_input_autocomplete.asp
Read through this article it should help get things working for you.
Example:
<input type="text" id="name" name="name" autocomplete="name">
<input type="tel" id="tel" name="tel" autocomplete="home tel">
How can I implement a "website-refresh-button" which does NOT refresh text input-panels?
Refresh-Button:
<input name="Button" class="button" type="button" size="20" maxlength="20" value="Load..." onClick="history.go(0)">
Text input-panels:
<input name="StartDate" class="inputPanel" type="text" size="20" maxlength="20" value="2013-08-20">
<input name="StartTime" class="inputPanel" type="text" size="20" maxlength="20" value="22:56:25">
<input name="EndDate" class="inputPanel" type="text" size="20" maxlength="20" value="2013-08-22">
<input name="EndTime" class="inputPanel" type="text" size="20" maxlength="20" value="22:56:26">
Thanks!
In order to preserve the values on a proper refresh, you will have to persist them somehow. This can be done in browsers with local storage or cookies or similar.
See this SO post for more info:
How to reload current page without losing any form data?
Since you already gave a name to all the inputs, I would simply change the button input's type to a submit, and put it all inside a form with method="post" action="#". Then, once it's submitted, you take all the items in the POST (server-side) and put them into the inputs before giving the user the end HTML. If you have no access to the backend server, then ne1410s's solution is your best fit.
Sometimes in my web application even I declare form autocomplete is off sometimes its not working and it autocomplete I typed in my inputs.
Can anyone know how to solved this kind of problem.I use chrome by the way.
sample of my code: sometimes its autocompleting my inputs even I declare turn off already..
<form autocomplete="off" method="post">
<input autocomplete="off" type="text" name="name">
<input autocomplete="off" type="text" name="age">
<input type="submit" >
</form>
<form autocomplete="off" method="post">
<input autocomplete="off" type="text" name="name" value="">
<input autocomplete="off" type="text" name="age" value="">
<input type="submit" >
</form>
The solution is simple and working perfectly in all browsers.
Add disabled and autocomplete="off" attribute to the form fields( name, age, etc.)
<form method="post">
<input disabled="disabled" autocomplete="off" type="text" class="name" name="name">
<input disabled="disabled" autocomplete="off" type="text" class="age" name="age">
<input type="submit" >
</form>
On Page Load enable the fields after few miliseconds.
use the below JS CODE
function getRidOffAutocomplete(){
var timer = window.setTimeout( function(){
$('.name, .age').prop('disabled',false);
clearTimeout(timer);
}, 800);
}
// Invoke the function
getRidOffAutocomplete();
This isn't a bug - autocomplete isn't supported by Chrome any more. It's a design decision by their developers and you should design for it rather than attempting to work around it. See my answer to this very similar question.
Why is it that the s:textfield is placed on bottom when I insert it in between other HTML elements inside a form?
How can I fix this?
<label><span class="required">*</span>First name</label>
<input type="text" id="firstName" name="firstName" value=""><br>
<div>
<s:select id="selectDrop" list="list" name="list"/>
</div>
<label><span class="required">*</span>Last name</label>
<input type="text" id="lastName" name="lastName"><br>
Result on browser:
First Name
Last Name
"The drop down element"
Ok I actually was able to solve by adding the them="simple" in the s:form element.
<s:form id="registrationForm" action="/registration/.action" method="post" theme="simple">
I guess if I don't add them property Struts2 UI components add their own stylesheet and therefore get weir behavior.