Develop Reference

Retrieving Tumblr Username From HTML Form

I'm new to Javascript, and am currently writing a custom HTML page for my tumblr.
I understand that you can toggle a button to call a function in JS. I'd like to know how to retrieve a user's username when the button is clicked, within this function. I would like to email this information back to myself but can find no documentation on this anywhere :(
I understand the Tumblr has its own stock Ask form. However, I would like to customize my own. My HTML form is below:
<form action="sendUsername()" >
<textarea rows="4" cols="50" id="message"></textarea>
<input type="submit" value="Submit">
</form>
JavaScript
function sendUsername(emailAddress, message){
//email username and message to emailAddress
}

For the getting the username, you need
HTML:
<input type="text" name="username" id="username" />
and
JS:
var username = document.getElementByID('username').value;
to get the input value stored in a variable
However, I don't think you can send an email to yourself straight from Javascript without a third-party API. It can be done using PHP's mail() function though
http://php.net/manual/en/function.mail.php
If you don't want to use PHP at all, then have a look at this:
How to send an email from JavaScript

Prevent browser from remembering credentials (Password)

Is it possible after processing any login Form to prevent the browser from offering the option to remember the password?
I know it's been asked and answered here but none of the answers have worked so far, even one of them suggested using:
autocomplete="off"
But that also didn't worked.
I'm using AngularJS and Jade as templating engine (not sure if relevant or not anyhow), is there any way to do this?

if a site sets autocomplete="off" for a form, and the form includes username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits this page.
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
You should also set autocomplete="off" on your input as well as your form.
Google Chrome release notes:
The Google Chrome UI for auto-complete request varies, depending on whether autocomplete is set to off on input elements as well as their form. Specifically, when a form has autocomplete set to off and its input element's autocomplete field is not set, then if the user asks for autofill suggestions for the input element, Chrome might display a message saying "autocomplete has been disabled for this form." On the other hand, if both the form and the input element have autocomplete set to off, the browser will not display that message. For this reason, you should set autocomplete to off for each input that has custom auto-completion.

I would suggest using Javascript to create a random number. Pass that random number to your Server Action using a hidden field, then incorporate that random number into the names of the "login" and "password" fields.
E.g. (psuedo code, the exact syntax depends on whether you use PHP, jQuery, pure Javascript, etc.)
<script>
var number = Math.random();
var login_name = 'name_'+number;
var pass_word = 'pass_'+number;
</script>
<input name='number' value="number" type='hidden'>
<input name="login_name" type='text'>
<input name="pass_word" type='password'>
Your server reads the "number" field, then uses that to read "name_"number value and "pass_"number value.
It won't matter whether or not the user saves their password in the browser, since every time the user logs in, the name and password fields will be different.

Since you're using AngularJS, you can leave the field unnamed, and access the data it contains through the model :
Login: <input ng-model="login" type="text" />
Password: <input ng-model="password" type="password" autocomplete="off" />
and in your javascript file :
$scope.doLogin = function() {
var dataObj = {
login: $scope.login,
password: $scope.password
};
var res = $http.post('/login', dataObj);
}
Tested in IE10 and Chrome 54

This post is little bit old now, but sincce I found a solution that works for me (at least with Chrome version 56), I'll share it here.
If you remove name and password attributes on your input, then Chrome won't ask to save the password. Then you just have to add the missing attributes by code just before submitting the form:
<!-- Do not set "id" and "name" attributes -->
Login: <input type="text">
Password: <input type="password">
<!-- Handle submit action -->
<input type="submit" onclick="login(this)">
Then in Javascript:
function login(submitButton) {
var form = submitButton.form;
// fill input names by code before submitting
var inputs = $(form).find('input');
$(inputs[0]).attr('name', 'userName');
$(inputs[1]).attr('name', 'password');
form.submit();
}
I hope this will help. Tested on Chrome 56 only.

The problem I have is that while I understand the 'annoyance' to a user in not being able to have their browser remember their password and I don't want to 'disable' that feature completely, there are times when I want to disable it for just a certain password field. Example for me being a 'reset your password' dialogue box.
I want to force them to have to re-enter their old password and then of course type the new one twice.
It's been my experience that no matter what I name that 'old' password input, it is auto-filled with the 'remembered' password (in Firefox 49.0.1 anyway). Maybe this is where I'm getting this wrong, but it just fills it no matter the fact that this input's name is different from saying the login input field.
The behavior I see is basically that the browser seems to say "This user has remembered a password for this site, so now just fill every input type='password' box with that password no matter the name. It seems to me that this should be based on the name attribute, but for me (on multiple sites I've worked on) this just does not seem to be the case.
My solution:
Color this password field to the same color as the background of your input so the 'password dots' is essentially invisible on page load.
onload, onblur, after a timeout, or however you want to do it, use JQuery or JS to set the value of that password field to nothing (blank), then set the color of the field to whatever it is supposed to be.
$("#old_password").val('').css('color','black);

I've discovered that Firefox 52.0.2 is incredibly determined to remember the autocompletion values. I tried almost everything suggested above, including changing the name attributes to random values. The only thing that is working for me is setting the values to "" with Javascript after the browser has had its way with the form.
My use case is lucky in that I do not have to resort to CSS tricks to prevent a confusing and/or annoying flash of autocompleted form values (as proposed by #MinnesotaSlim above) because my form is hidden until they click a button; then it's displayed via a Bootstrap modal. Hence (with jQuery),
$('#my-button').on("click",function(){
$('#form-login input').val("");
});
// this also works nicely
$('#my-modal').on("show.bs.modal",function(){
$('#form-login input').val("");
})
And I imagine you might be able to get the same effect by having your form initially hidden, and in your document load event, manually override the browser and then display the form.

For me, the only solution that reliably worked was to empty username and password input element just before submitting form combined with replacing submit button for the regular button with onclick handler.
NOTE: We use Microsoft MVC so we needed to populate ViewModel with entered credentials. Therefore we created hidden input elements bound to model and copied credential values to them before emptying visible inputs.
<form>
<input id="UserName" name="UserName" type="hidden" value="">
<input id="Password" name="Password" type="hidden" value="">
</form>
<input id="boxUsr" name="boxUsr" type="text" value="" autocomplete="off">
<input id="boxPsw" name="boxPsw" type="password" autocomplete="off">
<input type="submit" value="Login" onclick="javascript:submitformforlogin()">
function submitformforlogin() {
$("[name='boxPsw'],[name='boxUsr']").attr('readonly','true');
var psw = document.getElementsByName('boxPsw')[0];
var usr = document.getElementsByName('boxUsr')[0];
if (psw.value != "false") {
$('#Password').val(psw.value);
$('#UserName').val(usr.value);
psw.value = "";
usr.value = "";
$("form").submit();
} else
window.alert("Error!");
}

Need help to test html form textbox and go to page if value is the same as a set value

Hello I am trying to make a simple form to test if the the textfield is equal to a variable, variable value example: ( "MyPassword123" ).
Then if it the textfield is the same as the variable than go to html document, example: ( "nextPage.html" ).
however if its NOT equal to variable then go to html document, example: ( "index.html" ).
the reason of the password is to restrict people that don't play on my game server form nextPage.html, it will have just like news feeds and game information on it, Its nothing like an profile or anything I just want to give out a password to only allow people that play on the server to view a page that's all.
I have tried many times to get this to work in javascript and I am sure its achievable for this simple task using if/else statements and validate the name of the text field but I am no good at java nor javascript.
Form Code:
<form name="accessForm">
Password: <input type="text" name="inputCode"/>
<input type="submit" value="Submit"/>
</form>
If someone could post some code of javascript to make this work, you would so awesome.
NOTE:
Not sure if it matters much but I am using HTML5 and CSS3, and for
Hosting I will be using GoogleDrive, so I cant use MySQL, it needs to
be javascript. I have not tested Drive to see if it allows PHP but I
know Javascript works fine.

You need not to use HTML form for it
<script>
function checkIt()
{
if(document.getElementById("inputCode").value=="MyPassword123")
location.href="nextPage.html";
else
location.href="index.html";
}
</script>
Password: <input id="inputCode" type="text"/>
<input type="button" value="Submit" onclick="checkIt()"/>

Like #Wes Foster mentioned, you should do password validation on the backend, but to compare a form input to a variable in vanilla JS you could do this:
var password = "magicWord";
var form = document.getElementById("formName");
form.onsubmit = function(e) {
e.preventDefault();
var data = document.forms.accessForm.inputCode.value;
if (data == password) location.href = "success.html";
else location.href = "fail.html";
};

Inserting username and password at website using javascript in Chrome

I was trying to make script which will auto-login me to website (http://gamers.ba/), but I can't get it to insert my username and password inside form. I tried this code:
javascript:document.forms['cssforms'].elements[username].value = MyUsername;
but nothing happens actually...
Also I tried this code:
javascript:document.getElementById('username').value = 'MyUsername';
but then I just get new blank page with "MyUsername" text at left upper corner...
This is part of code when I inspect that element in my Chrome:
<form method="post" action="" class="cssform">
<div class="control-group">
<label for="username">Username</label>
<input style="width:355px;" type="text" name="username" id="username" value="">
Any ideas?
Thanks in advance!

this worked for me on http://gamers.ba/ as a bookmarklet
javascript:(function(){document.getElementById('username').value='MyUsername';document.getElementById('password').value='MyPassword';document.forms.loginForma.submit.click();})();
Expanded:
javascript:(function(){
document.getElementById('username').value='MyUsername';
document.getElementById('password').value='MyPassword';
document.forms.loginForma.submit.click();
})();
Obviously replace 'MyUsername' and 'MyPassword' with your username and password

This one fails:
document.forms['cssforms'].elements[username].value = MyUsername;
Because
The form does not have the name "cssforms". A class does not make it a form
And [username] is an undefined variable.
And your second one fails because you are not cancelling the default action. I am assuming you are using a bookmarklet. You can either use void() or wrap it in a function
javascript:(function(){ document.getElementById('username').value = 'MyUsername'; })();

This should do it:
var MyUsername = 'markzuck';
document.getElementById('username').value = MyUsername;
Check the demo here.
Also, I would strongly recommend you start using jQuery. It makes the coding simpler and faster.

The form would need an id or a name to be referred to like that. And username is a variable in your script, you need to use a string literal or dot notation instead.
To select the form by its class name, use document.querySelector:
document.querySelector("form.cssform").elements.username.value = Myusername;
If you want to select the hidden form (<form class="formLoginTop" name="loginForma" action="/q/user/login" method="post">), then you can still use
document.forms.loginForma.elements.username.value = Myusername;
But you could simply access the input element by its id:
document.getElementById("username").value = Myusername;
(this will not work on http://gamers.ba/q/user/login, because there are two elements with the id username in that page)

Validating user input using javascript

I'm trying to validate what a user enters into a texbox on the client-side, using javascript. I have also added a span close to my input tag like so,
<div>
<label for="fname">First Name*</label>
<input id="fname" name="fname" maxlength="30" type="text" /><span style="display:none;" id="fnameerror" name="fnameerror">*Please enter your firstname</span>
</div>
Here's the javascript code snippet validating the input,
if(document.getElementById('fname').value.length==0){
msg='Please enter your first name';
document.getElementById('fnameerror').style.display='inline';
document.getElementById('fnameerror').style.color='red';
valid=false;
}
What I want to achieve now is,
1) The textbox with the error should gain focus.
2) After the error message is displayed and the user enters a valid data, the error message should disappear.
How do I achieve this. I'm fairly new to javascript. Thanks.

Change your JS code:
document.getElementById('fname').onkeyup = function() {
if(document.getElementById('fname').value.length==0){
msg='Please enter your first name';
document.getElementById('fnameerror').style.display='inline';
document.getElementById('fnameerror').style.color='red';
valid=false;
document.getElementById('fname').focus();
} else {
valid=true;
document.getElementById('fnameerror').style.display='none';
}
}
Fiddle.

If you've read about HTML5, it allows you to add form validation as attribute fields directly instead of having to write code for it. It also presents things neatly. Have a look. This might help:
http://diveintohtml5.info/forms.html

I will suggest to use Jquery validator. Of course you need to include jquery,and jquery plugin, but you do not need time to write validation from the scratch only to implement what exist.