what i would like are 2 input fields with a submit button. the first field is the request for a username, the second field is a password.
if the user presses submit, the value of the fields should be below it. but for a reason it doesn't quite work. if the user presses submit a second, then the result is written after it. and the intention is that the text of the first submit is completely replaced.
also the checker function does not work.
could anyone help?
var titles = [];
var usernameInput = document.getElementById("username");
var passwordBox = document.getElementById("password");
var messageBox = document.getElementById("display");
function CHECKER() {
if (!user.title.value.match(/[a-zA-Z]$/) && user.title.value != "") {
user.title.value = "";
alert("GEEF EEN GELDIGE WAARDE AUB");
}
}
function insert() {
titles.push(usernameInput.value);
titles.push(passwordBox.value);
clearAndShow();
}
function clearAndShow() {
usernameInput.value = "";
passwordBox.value = "";
messageBox.innerHTML = "";
messageBox.innerHTML += "De opgegeven gebruiksnaam en wachtwoord zijn: " + titles.join(", ") + "<br/>";
}<html>
<head></head>
<body>
<div class="wb-stl-custom3">
<label for="username">gebruikersnaam:</label>
</div>
<div>
<input id="username" type="text" maxlength="15" onkeyup="CHECKER()">
</div>
<div class="wb-stl-custom3" ;>
<label for="password">wachtwoord: </label>
</div>
<div>
<input id="password" type="password" maxlength="30" onkeyup="CHECKER()">
</div>
<input type="submit" value="CHECH" onclick="insert()" />
<div class="wb-stl-custom3" , id="display"></div>
</body>
</html>I changed your CHECKER() so it will check each input field. Your code was explicitly written to add and not replace content into your titles array. If you want the values to be replaced you will need something like the following:
var titles = [];
var usernameInput = document.getElementById("username");
var passwordBox = document.getElementById("password");
var messageBox = document.getElementById("display");
function CHECKER(inp) {
if (!inp.value.match(/[a-zA-Z]$/) && inp.value != "") {
inp.value = "";
alert("GEEF EEN GELDIGE WAARDE AUB");
}
}
function insert() {
titles=[usernameInput.value,
passwordBox.value];
clearAndShow();
}
function clearAndShow() {
usernameInput.value = "";
passwordBox.value = "";
messageBox.innerHTML = "";
messageBox.innerHTML += "De opgegeven gebruiksnaam en wachtwoord zijn: " + titles.join(", ") + "<br/>";
}<html>
<head></head>
<body>
<div class="wb-stl-custom3">
<label for="username">gebruikersnaam:</label>
</div>
<div>
<input id="username" type="text" maxlength="15" onkeyup="CHECKER(this)">
</div>
<div class="wb-stl-custom3" ;>
<label for="password">wachtwoord: </label>
</div>
<div>
<input id="password" type="password" maxlength="30" onkeyup="CHECKER(this)">
</div>
<input type="submit" value="CHECH" onclick="insert()" />
<div class="wb-stl-custom3" , id="display"></div>
</body>
</html>