Before HTML5, I used to be able to easily find the form associated with an input using jQuery, because all inputs were contained within the form element.
For example, with jQuery I would do something like:
jQuery('.info-container input').closest('form')
I still would like to use jQuery because I use some features that are easier to implement in jQuery. But, with HTML5, inputs can be outside of the form element. For example the following can be anywhere in the HTML but still part of the form:
<input name='city' form='address_form'>
Is there any easy way in jQuery to get the form associated with a given input/button/select ?
You can get the form property to get the associated form.
$($('input[name=city]').prop('form'))
I believe this will work whether the input is inside a form or uses the form attribute to connect with a form.
How about just get list using this.
var inputs = $(document).find('input[form="address_form"]');
then you can find what input you want within form "address_form" using their name. But if you just need one element, just like this
var inputs = $(document).find('input[form="address_form"][name="city"]');
I'm using the React-DatePicker package along with momentjs to let the user pick a date on an input which looks like this:
I want to display the time, but not let the user change it directly from the <input>. My date picker has an onChange() function:
onExpirationDateChange(date) {
this.setState({selectedTime: date.unix()});
}
Does anyone know how I can achieve displaying the time, but not letting the user change it?
I would recommend this way:
document.getElementsByTagName("inputdate")[0].setAttribute("readonly", "readonly");
As you can problably tell, it's set to readonly, so one can't write in the input anymore but they can still copy the text if needed.
As per the examples on this page: https://reactdatepicker.com/
You might try this to prevent the users from selecting times...
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
showTimeSelect
excludeTimes={[moment().hours(17).minutes(0), moment().hours(18).minutes(30), moment().hours(19).minutes(30)], moment().hours(17).minutes(30)}
dateFormat="LLL"
/>
Found the answer myself. Just set readOnly on picker and make sure to not include time select option.
When using the xhtml1-transitional.dtd doctype, collecting a credit card number with the following HTML
<input type="text" id="cardNumber" name="cardNumber" autocomplete='off'/>
will flag a warning on the W3C validator:
there is no attribute "autocomplete".
Is there a standards-compliant way to disable browser auto-complete on sensitive fields in a form?
Here is a good article from the MDC which explains the problems (and solutions) to form autocompletion.
Microsoft has published something similar here, as well.
To be honest, if this is something important to your users, 'breaking' standards in this way seems appropriate. For example, Amazon uses the 'autocomplete' attribute quite a bit, and it seems to work well.
If you want to remove the warning entirely, you can use JavaScript to apply the attribute to browsers that support it (IE and Firefox are the important browsers) using someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );
Finally, if your site is using HTTPS, IE automatically turns off autocompletion (as do some other browsers, as far as I know).
Update
As this answer still gets quite a few upvotes, I just wanted to point out that in HTML5, you can use the 'autocomplete' attribute on your form element. See the documentation on W3C for it.
I would be very surprised if W3C would have proposed a way that would work with (X)HTML4. The autocomplete feature is entirely browser-based, and was introduced during the last years (well after the HTML4 standard was written).
Wouldn't be surprised if HTML5 would have one, though.
Edit: As I thought, HTML5 does have that feature. To define your page as HTML5, use the following doctype (i.e: put this as the very first text in your source code). Note that not all browsers support this standard, as it's still in draft-form.
<!DOCTYPE html>
HTML 4: No
HTML 5: Yes
The autocomplete attribute is an enumerated attribute. The attribute
has two states. The on keyword maps to the on state, and the off
keyword maps to the off state. The attribute may also be omitted. The
missing value default is the on state. The off state indicates that by
default, form controls in the form will have their autofill field name
set to off; the on state indicates that by default, form controls in
the form will have their autofill field name set to "on".
Reference: W3
No, but browser auto-complete is often triggered by the field having the same name attribute as fields that were previously filled out. If you could rig up a clever way to have a randomized field name, autocomplete wouldn't be able to pull any previously entered values for the field.
If you were to give an input field a name like "email_<?= randomNumber() ?>", and then have the script that receives this data loop through the POST or GET variables looking for something matching the pattern "email_[some number]", you could pull this off, and this would have (practically) guaranteed success, regardless of browser.
No, a good article is here in Mozila Wiki.
I would continue to use the invalid attribute. I think this is where pragmatism should win over validating.
How about setting it with JavaScript?
var e = document.getElementById('cardNumber');
e.autocomplete = 'off'; // Maybe should be false
It's not perfect, but your HTML will be valid.
I suggest catching all 4 types of input:
$('form,input,select,textarea').attr("autocomplete", "off");
Reference:
http://www.w3.org/Submission/web-forms2/#the-autocomplete
http://dev.w3.org/html5/markup/input.html
If you use jQuery, you can do something like that :
$(document).ready(function(){$("input.autocompleteOff").attr("autocomplete","off");});
and use the autocompleteOff class where you want :
<input type="text" name="fieldName" id="fieldId" class="firstCSSClass otherCSSClass autocompleteOff" />
If you want ALL your input to be autocomplete=off, you can simply use that :
$(document).ready(function(){$("input").attr("autocomplete","off");});
Another way - which will also help with security is to call the input box something different every time you display it: just like a captha. That way, the session can read the one-time only input and Auto-Complete has nothing to go on.
Just a point regarding rmeador's question of whether you should be interfering with the browser experience: We develop Contact Management & CRM systems, and when you are typing other people's data into a form you don't want it constantly suggesting your own details.
This works for our needs, but then we have the luxury of telling users to get a decent browser:)
autocomplete='off'
autocomplete="off" this should fix the issue for all modern browsers.
<form name="form1" id="form1" method="post" autocomplete="off"
action="http://www.example.com/form.cgi">
[...]
</form>
In current versions of Gecko browsers, the autocomplete attribute works perfectly. For earlier versions, going back to Netscape 6.2, it worked with the exception for forms with "Address" and "Name"
Update
In some cases, the browser will keep suggesting autocompletion values even if the autocomplete attribute is set to off. This unexpected behavior can be quite puzzling for developers. The trick to really forcing the no-autocompletion is to assign a random string to the attribute, for example:
autocomplete="nope"
Since this random value is not a valid one, the browser will give up.
Documetation
Using a random 'name' attribute works for me.
I reset the name attribute when sending the form so you can still access it by name when the form is sent. (using the id attribute to store the name)
Note that there's some confusion about location of the autocomplete attribute. It can be applied either to the whole FORM tag or to individual INPUT tags, and this wasn't really standardized before HTML5 (that explicitly allows both locations). Older docs most notably this Mozilla article only mentions FORM tag. At the same time some security scanners will only look for autocomplete in INPUT tag and complain if it's missing (even if it is in the parent FORM). A more detailed analysis of this mess is posted here: Confusion over AUTOCOMPLETE=OFF attributes in HTML forms.
Not ideal, but you could change the id and name of the textbox each time you render it - you'd have to track it server side too so you could get the data out.
Not sure if this will work or not, was just a thought.
I think there's a simpler way.
Create a hidden input with a random name (via javascript) and set the username to that. Repeat with the password. This way your backend script knows exactly what the appropriate field name is, while keeping autocomplete in the dark.
I'm probably wrong, but it's just an idea.
if (document.getElementsByTagName) {
var inputElements = document.getElementsByTagName("input");
for (i=0; inputElements[i]; i++) {
if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {
inputElements[i].setAttribute("autocomplete","off");
}
}
}
I MADE THIS WORK IN 2020!
I basically create a css class that applies -webkit-text-security to my inputs.
Here's the link to a more recent discussion:
https://stackoverflow.com/a/64471795/8754782
This solution works with me:
$('form,input,select,textarea').attr("autocomplete", "nope");
if you want use autofill in this region: add autocomplete="false" in element
ex:
<input id="search" name="search" type="text" placeholder="Name or Code" autcomplete="false">
Valid autocomplete off
<script type="text/javascript">
/* <![CDATA[ */
document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
/* ]]> */
</script>
I have a simple modal in bootstrap 3.0.2 and it has a 2 simple input type="text" I would like to clear it. I have seen example but they are for bootstrap 2 and don't work with my modal. Does any one know how to clear or reset this input text inside a modal when I click on the "reset" button.
-Thank you in advance.
Update: after using #davethecoder solution works like a charm, I still need help clearing 1 of the input text its under the date class:
<input id="#item" type="text" class="date-picker form-control" />
Any chance anyone knows how to clear this one?
-Thank you for helping me.
twitter bootstrap is a CSS framework for modelling response web layouts. If you are using jquery, the code to clear an element is $("#itemid").val('');
easiest would be to give each item a class, and set this value based on class, or as an alternative, you can loop through items of specific formid and reset to clear that way. Personally I would just do this class based, as this will essentially have the loop code per item, within the jquery framework.
I mentioned jquery here, because you had a jquery tag
Oh,just I found that the attribute id of your input element contains '#',it may lead to some unknown mistake. It is best to remove the '#' on your <input>.
If you are using jQuery, just use a function call like this to clear input:
$('#item').val('');
If you're not using jQuery, just use Javascript function like this:
document.getelementById('item').value = "";
I have already implemented a version of the code below on my development system.
function validateTextBox(textBoxId) {
var textBox = document.getElementById(textBoxId);
if(document.activeElement.id != textBox.id) {
do validation
}
}
The HTML is similar to:
<input type="text" id="ValidateMe" onChange="validateTextBox('ValidateMe');"/>
The idea is that validation takes place only after the user has completed editing the textbox and that, unlike an onBlur event, validation only fires when the value of the textbox has actually changed.
It seems to work I'm just leery of using it without some review and feedback. I haven't seen any similar code examples. So please give me your thoughts on the implementation and any alternate ideas you may have.
Thanks
This is a fine solution. Do keep in mind that the onchange event will typically only fire when the focus changes (ie. onblur)
If you want to do validation while the user is typing you can use onkeydown/onkeyup/onkeypress but that's quite a ways harder.
Additionally you can use this so you don't have to assign an id to each field and remember to pass it to the validate function:
function validate(input_element) {
alert(input_element.value)
}
<input type="text" name="name" onchange="validate(this);"/>