Disable Autocomplete feature/Manage password dialogue - javascript

Is it possible to remove chrome/safari autocomplete feature , which asks to store password once you logged in to the application?
I have tried adding "autocomplete=off" in both form and input fields
<form id="formforlogin" autocomplete="off">
<input id="usernameforlogin" type="hidden" name="usrnm" autocomplete="off"/>
<input id="passwordforlogin" type="hidden" name="psswrd" autocomplete="off"/>
</form>
<table style="margin-left: auto;margin-right: auto;">
<tr>
<td>Username</td>
<td><input id="usernameforshow" type="text" placeholder="user" autocomplete="off" /></td>
</tr>
<tr>
<td>Password</td>
<td><input id="passwordforshow" type="password" placeholder="password" autocomplete="off'/></td>
</tr>
After adding the above snippet as well i am not able to get rid of autocomplete feature of chrome , which is asking to save password dialogue as soon as you login. My application is built using angular js and the routing is done using angular-ui-router.
It will be very much helpful if somebody helps to solve the above issue.

Related

Bring to Front - Search Bar HTML

I know that this probably has something to do with the z-index but I can't seem to figure it out.
The code snippet is:
<form method="get" action="http://www.google.com/search">
<div>
<table border="0" cellpadding="0">
<tr>
<td>
<input type="text" name="q" size="15" maxlength="255" value="" />
<input type="submit" value="GO" /></td></tr> <tr><td align="right" style="font-size:75%">
<input type="checkbox" name="sitesearch" value="<website_address>" checked /> SEARCH <br />
</td>
</tr>
</table>
</div>
</form>
I have tried creating a class, but it doesn't seem to affect it:
.search{
z-index:absolute;
}
<form method="get" action="http://www.google.com/search"> <div class="search">
I haven't found too much information in making a search bar bring to the front and have experimented quite a bit. I could try to put the others bring-to-back but I'm really curious if there is a way to do bring-to-front for the search bar.
Z-index works with integers try setting it to different values to see the results

Vue.js closes form tag in a for loop

I use Vue.js to create a table in which every row is form with a submit button, this is the code I use:
<div id="admin-user">
<table class="table">
<tr v-for="(user, index) in users">
<form action="/ajax/submit/admin/user.php">
<td class="spacer"><input type="text" class="form-control" :value="user.id" readonly></td>
<td class="spacer"><input type="text" class="form-control" name="fullname" :value="user.fullname"></td>
<td class="spacer"><input type="text" class="form-control" name="username" :value="user.username"></td>
<td class="spacer"><input type="text" class="form-control" name="email" :value="user.email"></td>
<td class="spacer"><input type="text" class="form-control" name="phone" :value="user.phone"></td>
<td class="spacer"><input type="text" class="form-control" name="company" :value="user.company"></td>
<input type="hidden" name="id" :value="user.id">
<td class="spacer"><button type="submit" class="btn btn-success btn-block btn-lg right"><i class="fa fa-floppy-o" aria-hidden="true"></i></a></td>
</form>
</tr>
</table>
</div>
Of course I also have the Vue.js code in JavaScript but I don't think its necessary to solve this problem and it is quite long so I wont bother anyone with it.
The styling turns out fine but the form doesn't work, so I took a look with the inspector tool and this is what I found
And it turns out the </form> tag got closed prematurely. I don't understand why this happend which also means I don't know how to solve it. I hope someone could explain why this is happening to me.
The problem is not because of Vue.js or even Javascript, the problem is because of HTML itself. HTML does not allow the use of a form tag directly inside a table (row). Take a look at this question which has some working solutions.

autocomplete='off' does not work in Firefox?

I have an input field <input type='text' name='user' autocomplete='off'> but autocomplete is still active.
This is what I see when I inspect the element
It seems that Firefox somehow thinks that this field is a password field and uses the build-in Login Manager storage module. I did not use any Javascript on this input element.
I also noticed a strange key symbol at the autocomplete drop-down list
How can I get rid of that key symbol and disable autocomplete?
Heres my HTML Code
<form class='clearfix'>
<div id='loginForm'>
<label>
Login
<span>
<a href='/memberArea/lostPass.php' id='hackB'>
Forgot Password? Click here!</a></span>
</label>
<input type='text' name='user' id='username' autocomplete="off">
<label >Password </label>
<input type='password' name='pass' id='passLogin' autocomplete="off">
</div>
<button class='confirmbutton' id='loginButton'>Login</button>
</form>
Clear browser, Try,
<!--
<form autocomplete="off"> will turn off autocomplete for the form in most browsers
except for username/email/password fields
-->
<form autocomplete="off">
<!-- fake fields are a workaround for chrome/opera autofill getting the wrong fields -->
<input id="username" style="display:none" type="text" name="fakeusernameremembered">
<input id="password" style="display:none" type="password" name="fakepasswordremembered">
<!--
<input autocomplete="nope"> turns off autocomplete on many other browsers that don't respect
the form's "off", but not for "password" inputs.
-->
<input id="real-username" type="text" autocomplete="nope">
<!--
<input type="password" autocomplete="new-password" will turn it off for passwords everywhere
-->
<input id="real-password" type="password" autocomplete="new-password">
</form>

adding like button next to each list item ajax

I am trying to add a like button next to a list of 'destinations'. however, I'm having a really hard time figuring out how to place a button right next to each list item. any help???
Here is my dashboard.html.erb file:
<div class="destination-list">
<h1>Destinations</h1>
<table id="destTable">
<tr class="table-initial">
<td>Name:</td>
<td>Address:</td>
<span class="likebtn-wrapper" data-white_label="true" data-identifier="item_1" data-show_dislike_label="true" data-popup_disabled="true" data-share_enabled="false"></span>
<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
<!-- <td>Delete:</td> -->
</tr>
</table>
<div class="big create">+</div>
</div>
<div class="submit">
<h1>Create Destination</h1>
<form method="get" action="index.html" class="form">
<input type="text" placeholder="Name" class="name-input" name="name" />
<input type="text" placeholder="Address" class="address-input" name="address" />
<input type="submit" class="submit-input my-button" id="create-button"></input>
</div>
Your source parameter in your javascript function call is missing the http: protocol part.
You should edit the tags in your question, though. Your code shows no Rails or Ruby, and your question is purely about Javascript.
On a side note, you should look up unobtrusive javascript :
Rails guides
RailsCasts episode
and probably jQuery as well.

change focus on clicking enter javascript html form

I am very much new to HTML CSS and java script i have a personal query. I am creating a software in which i have few text boxes and drop downs. i want to change focus of the the text box automatically when enter button is pressed.It should travel in a specific way every time and once all text box are over it should submit automatically when enter is pressed. I am quite good in PHP so i can code the rest of the parts. Kindly help me in this please .
I have not tried anything on this so far
` <table class="labelboxs">
<tr>
<td class="name" colspan="2" style="width:219px; float:left; margin-left:20px;">
<input id="ph_number" type="text" required="" onblur="checkus(this.value)" style="width:200px;" placeholder="Phone Number" name="uname">
</td>
<td class="name" colspan="2" style="float:left; width:219px; margin-left:20px;">
<input id="Name" type="text" required="" onblur="checkpassstr(this.value)" style="width:200px;" placeholder="Name" name="pswd">
</td>
</tr> `
kindly check it and give me a solution
Try adding this to your code
onkeydown="javascript:if (event.keyCode == 13) document.getElementById('name').focus()"
where 'name' is the ID of the next input box.
There are probably better options using jquery, but if you're trying to keep it simple, this should work.

Categories

Resources