'How to remove 'autocomplete disabled' from input field

I have a field in which the user is ask to input a year. My html looks like this

<div class="form-group {% if form_search2.year_search.errors %} error {% endif %}" style="padding: 0px;">
    <label class="col-xs-3 col-sm-2 control-label">{{ form_search2.year_search.label }}</label>
    <div class="col-xs-6" style="max-width:320px;display: inline;">
                            {{ form_search2.year_search(class='form-control', style="max-width: 300px;", placeholder="e.g. 1996-2001", autocomplete="on", type="text") }}
    </div>
    <div class="col-xs-3" style="display: inline;">
    </div>
</div>

with the form defined as 

year_search = TextField("Year:")

when I look at this form in the browser (Chrome) I get the message 

Automatic credit card filling is disabled because this form does not use a secure connection

How can I get rid of this? I have other fields which are defined in the same why, but they remember what has been typed before and help the user by suggesting old inputs.

htmlformsflask-wtforms


Solution 1:[1]

According to the autofill_regex_constants.cc.utf8 file:

// On at least one page (The China Shop2.html) we find only the labels
// "month" and "year".  So for now we match these words directly; we'll
// see if this turns out to be too general.

The first option option could be a change of the field's name. As an alternative I suggest using Let's encrypt to secure the connection. According to the Google Security Blog:

Beginning in July 2018 with the release of Chrome 68, Chrome will mark all HTTP sites as “not secure”.

Solution 2:[2]

This message is annoying. It appears for me on a very innocent search box:

<form class="homeform" action="{{ url_for('search_notices') }}" method="get">
        <input type="search" name="q" id='searchbox' placeholder="Search..."/>
        <input type="submit" class="button button-primary" value="Find tenders"/>
</form>

To make it go away, I added two dummy form fields:

<form class="homeform" action="{{ url_for('search_notices') }}" method="get">
        <input type="search" name="q" id='searchbox' placeholder="Search..."/>
        <input name="chrome-autofill-dummy1" style='display:none' disabled/>
        <input name="chrome-autofill-dummy2" style='display:none' disabled/>
        <input type="submit" class="button button-primary" value="Find tenders"/>
</form>

The dummy fields bring the total number of fields on the form to three, which from reading the comments on the google ticket, stops the warning being triggered. The fields are marked as hidden plus disabled, so they don't get submitted to the server.

The other way I found of solving it was to change the parameter name from q to query, but that would have caused more problems at the server.

Hopefully this is a temporary fix until I either upgrade to https, or else Chrome removes the annoying message.

Solution 3:[3]

Change your field name or field id to something else. Somehow, google detects Year as a credit card field and helps you auto-fill it.

Solution 4:[4]

Change your page link from http to https. That's All. eg http://example.com will not work. https://example.com will work You can get sample code here: https://jsfiddle.net/JonathanN/j054kbgx/

Solution 5:[5]

Your problem is similar to something where camp of text contents fraction what "Fecha" or "Date" and "numero" or "number".

the solution is replace char for and charref https://dev.w3.org/html5/html-author/charref

example:

<label>numer&#1086;</label> <!--one char-->
<label>numb&#1077;r;</label> <!--one char-->

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mateusz Kleinert
Solution 2 cmuk
Solution 3 Twenty
Solution 4 Waqas K
Solution 5 cigien

Related Questions