We Keep Coding

How to change the input value when entering the new value

I have an input with placeholder="YYYY/MM", when the user click the input to enter the data, I want the year and month to dissappear, so only "/" stays.
I already try with my code, however it doesn't work, please help/
var birthdayId = "document.querySelector("#BIRTHDAY")";
if(birthdayId.maxlength < 4){
birthdayId.value = "/";
}
<input type="text" id="BIRTHDAY" name="BIRTHDAY" placeholder="YYYY/MM" maxlength="7" value="YYYY/MM">

Run your code in a focus event listener.
You should be checking the length of the value, not the maxlength property, which never changes.
You shouldn't put the call to document.querySelector in quotes.
Don't set the default value of the input to YYYY/MM, since that will prevent the length test from working. The placeholder is used to display the desired format, you don't need to do it with value as well.
var birthdayId = document.querySelector("#BIRTHDAY");
birthdayId.addEventListener("focus", function() {
if (birthdayId.value.length < 4) {
birthdayId.value = "/";
}
});
<input type="text" id="BIRTHDAY" name="BIRTHDAY" placeholder="YYYY/MM" maxlength="7" value="">

Password box - get value from input field with javascript

Does anybody know how to make a password box like this image?
This password box will be the first page of the site/mobile. The user have to insert 4 numbers (1 - 2 - 3 - 4). If they dont type 1 -2 - 3 - 4 as their password, they will get a message box saying "wrong password". If they type correct they will be sent to the next page.
Appreciate help!

Here a working sample
var password = [1,2,3,4];
var pwdInputs = $("#pwdContainer input");
var inputs = pwdInputs.toArray();
pwdInputs.keyup(function(){
if (this.value.length == this.maxLength) {
if(inputs.indexOf(this) == inputs.length-1){
testPassword();
} else {
$(this).next('input').focus();
}
}
});
function testPassword(){
var valid = true;
for(var i=0; i<inputs.length; i++){
if(password[i] != inputs[i].value){
valid = false;
break;
}
}
if(valid){
console.log("Correct Password!");
window.location.href = 'http://www.google.com';
}else{
console.log("Wrong Password!");
}
}
div.box-big {
background-color: grey;
margin: auto;
display:inline-block;
padding: 10px;
padding-top: 20px;
}
input.box-text {
width: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pwdContainer" class="box-big" >
<input type="text" maxlength="1" class="box-text" >
<input type="text" maxlength="1" class="box-text">
<input type="text" maxlength="1" class="box-text">
<input type="text" maxlength="1" class="box-text">
</div>

As per your comment, in the picture provided you seem to want to provide the user with 4 boxes, and in it, they would then type their password.
In this case, I do not think that you need regular expressions at all. What you need to do, in my opinion, is the following:
Create the 4 password field text boxes.
In the section where you check the password, simply check that the first box has a value of 1 stored in it, the second box has 2, the third has 3 and the fourth has 4.
Since you are looking for specific, entire string values, as opposed to patterns, regular expressions are not needed.

You probably want a regular expression (regex), which can be used to validate your input.
The regex string would look something like this: \d{4} or [0-9]{4}, which is basically saying match all digits (`\d' or numbers from 0-9) four times strictly, so only four digits exactly would be valid
<input type="password" pattern="[0-9]{4}" id="passcode" required onkeyup="checkIfValid()">
<p id="isValid"></p>

.onblur function return as a variable.value?

http://jsfiddle.net/beY6d/
I want to make a simple HTML+JS page that basically gives the user 4 text fields to write the name of some product and an extra field that displays the remaining credit in the 5th text field.
<input type="text" value="0" class="product" id="shirtItems"/><br>
<input type="text" value="0" class="product" id="pantsItems"/><br>
<input type="text" value="0" class="product" id="hatItems"/><br>
<input type="text" value="0" class="product" id="accesoryItems"/><br>
<input type="text" value="100" id="credit" disabled/>
var shirt= document.getElementById("shirtItems");
var pants= document.getElementById("pantsItems");
var hat= document.getElementById("hatItems");
var accesory= document.getElementById("accesoryItems");
var remainingDosh = document.getElementById("credit");
remainingDosh.value = 100;
There must be a .onblur (or .onfocus) event to make the "credit" field display 100 minus the sum of every other item.
Also, the price of the item must change depending on the color/type of item. Something like:
shirt.onblur = function(){
if (shirt.value == "Blue") {remainingDosh.value = remainingDosh-25}
if (shirt.value == "Red") {remainingDosh.value = remainingDosh-20;}
};

If you do typeof remainingDosh.value, you'll see that it logs string. This means you'll have to convert the string to a number if you don't want to risk having NaN show up on your page.
Convert it with parseInt() like so:
var remainingDosh.value = parseInt(remainingDosh,10)-25;
The second parameter, 10 is the radix, which in this case is decimal (though it defaults to decimal if left out I believe).
And the issue in question, as pointed out, is you're trying to do math on the element remainingDosh instead of using it's value.
Oh, and protip: instead of shirt.value, you can use this.value since the event comes from said element.

you're using remainingDosh instead of remainingDosh.value when you do your subtraction.

how to auto press "tab" key when user press "-" (dash) key in javascript

my code like this
function Tab(e)
{
var input = e.keyCode ? e.keyCode : e.charCode;
if ((input>=48 && input<=57) || (input==45))
{
if (input==45)
{
//what should i do here? so,
//if user press "-", its auto tab to next textfield,
return false
}
else
return true;
}
else
return false;
}
here my html
<input type="text" name="a[]" maxlength='3' onkeypress="return Tab(event)">
<input type="text" name="a[]" maxlength='3' onkeypress="return Tab(event)">
<input type="text" name="a[]" maxlength='3' onkeypress="return Tab(event)">
I've been searching at google. but its return similar article and it's not that I'm looking for.
I have a lot of similar text field, so it is not possible to include the next textfield's name cause of i used array name.
sorry if my english is bad, but i hope you understand what I want

You can focus the next input sibling in this way:
HTML:
<input type="text" name="a[]" maxlength='3' onkeypress="return Tab(event, this)">
<input type="text" name="a[]" maxlength='3' onkeypress="return Tab(event, this)">
<input type="text" name="a[]" maxlength='3' onkeypress="return Tab(event, this)">
JS:
function Tab(e, inp)
{
var input = e.keyCode ? e.keyCode : e.charCode;
if ((input>=48 && input<=57) || (input==45))
{
if (input==45)
{
//focus the next input if there is one
while(inp.nextSibling)
{
var inp=inp.nextSibling;
if(inp.nodeType===1 && inp.tagName.toLowerCase()=="input")
{
inp.focus();
break;
}
}
return false
}
else
return true;
}
else
return false;
}

it just takes 10 seconds to ask google. you can't emulate a tab-keypress, but there are different workarounds (maybe you could use an array containing the id's of all you fields, save the index you're at and on pressing dash, focus index+1 in your array (+ setting the saved index onfocus of every text field to note if a user focuses a field by clicking it or really pressing tab))

I've had a similar problem, where I wanted to press + on the numpad to tab to the next field. Now I've released a library that I think will help you. It does require jquery though.
PlusAsTab: A jQuery plugin to use the numpad plus key as a tab key equivalent.
Since you want - (on the normal keys, I guess) instead, you can set the options. Find out which key you want to use with the jQuery event.which demo.
JoelPurra.PlusAsTab.setOptions({
// Use dash instead of plus
// Number 189 found through demo at
// https://api.jquery.com/event.which/
key: 189
});
// Matches all inputs with name "a[]" (needs some character escaping)
$('input[name=a\\[\\]]').plusAsTab();
You can try it out in the PlusAsTab demo, and check out the enter-as-tab demo. If you want to change to the - key, you can call JoelPurra.PlusAsTab.setOptions({key: 189}); from your javascript console.

onkey event - problem with disabled button

Explanation: At the beginning the value of the field is YYYY-MM-DD. if the user delete the value and doesn't type anything, the button "ok" should be disabled. if the user delete the value and type new value, the button "ok" should be enable. The code is working only for the second case.
function ChangeOkButton()
{
if(document.getElementById('fromDate').value == null)
{ document.getElementById('save').disabled = true; }
else {document.getElementById('save').disabled = false; }
}
<input type="text" name="fromDate" id="fromDate" value="YYYY-MM-DD" onkeypress="ChangeOkButton();"/>
Is this possible?
Thank you!

That function is not very useful for that kind of control, since you could overwrite the value with '12345', 'foobar' or something else different than a realistic value. I suppose you want date starting from 2000-01-01
function ChangeOkButton(field) {
var okbtt = document.getElementById('save');
if ((/^(YYYY\-MM\-DD|2\d{3}\-(0[1-9]|1[0-2])\-(0[1-9]|[12]\{d}|3[01]))$/).test(field.value)) {
okbtt.removeAttribute('disabled');
}
else {
okbtt.disabled = 'disabled';
}
}
and your input is
<input type="text" name="fromDate" id="fromDate" value="YYYY-MM-DD" onkeyup="ChangeOkButton(this);"/>
Please note I've not considered leap years or days per month, this is only a more reliable control on data type entered by the user. Change the regexp as you like
Note: consider to put the 'okbtt' variable outside to the function for a matter of performance, otherwise you need to obtain a reference each time you call this function. awful.