enable button after nickname has been entered
Question
I meet some difficulties. The task was to enable play button after the Nickname has been entered as same as the placeholder (For example, I set the placeholder as Lianzheng, the button will only enabled when I entered Lianzheng in the form.
The following code are my HTML and Javascript code. It's not working. So I want to figure out what goes wrong.
HTML:
<p> <input id= "play" class="button" disabled="disabled" type="submit" value="play" onkeyup="myFunction()
onclick="play()"> </p>
Javascript:
function myFunction() {
var x = document.getElementById('name').value;
document.addEventListener('keydown',function(e) {
name.textcontent = 'keydown:' + e.keycode;
});
document.addEventListener('keyup', function(e) {
name.textContent = 'keyup:' +e.keyCode;
});
if (name == 'Lianzheng') {
alert("!!");
document.getElementById("name").disabled = false;
}
else {
document.getElementById("name").disabled = true;
}
5 answers
solution1
1 2015-03-30 03:26:14
Try this way. You have to put onKeyUp function on inputText not in Button.
<html>
<head>
<script type="text/javascript">
function myFunction() {
var name = document.getElementById("name").value;
if (name === 'Lianzheng') {
alert("!!");
document.getElementById("play").disabled = false;
}
else {
document.getElementById("play").disabled = true;
}
}
</script>
</head>
<body>
<input type="text" id="name" onkeyup="myFunction()"/><br/>
<input id="play" class="button" disabled type="submit" value="play" />
</body>
But anyway, you better to check name only after the button clicked. And check name in javascript, if name is correct make submit, if not return false. By this way you can avoid unnecessary submition.
solution2
0 2015-03-30 02:56:50
I can't comment yet, i'm a new member, so this might not be the answer, more on suggestions actually.. ahm, I can't see where the name come from, but have you check if your name has value, does the alert works? you can also try to put alert before and after your if statement too just for checking. then if it has value, and still not working maybe you can use .show() or .hide() ? instead of .disabled = true and .disabled = false ?.. hope it helps.
solution3
0 2015-03-30 03:19:56
I think you are trying to enable / disable the text field instead of the button.
Rewrite your code to include the ID of the button where you are enabling / disabling the button.
Please see below.
function myFunction() {
var x = document.getElementById('name').value;
document.addEventListener('keydown',function(e) {
name.textcontent = 'keydown:' + e.keycode;
});
document.addEventListener('keyup', function(e) {
name.textContent = 'keyup:' +e.keyCode;
});
if (name == 'Lianzheng') {
alert("!!");
document.getElementById("play").disabled = false;
}
else {
document.getElementById("play").disabled = true;
}
Also, please replace the variable name with document.getElementById("ID_OF_YOUR_TEXTBOX_HERE").value
solution4
0 2015-03-30 03:21:34
try this:
<script>
function test(){
var placeHolderName = document.getElementById("playText").placeholder;
var playTxt = document.getElementById("playText").value;
console.log("playTxt="+ playTxt);
console.log("disable ="+ document.getElementById("play").disabled);
if(playTxt === placeHolderName){
document.getElementById("play").disabled = false;
alert('done!');
}
}
</script>
<input id="playText" type="text" placeHolder ="abcd" onkeyup="test();" />
<input id= "play" class="button" disabled="disabled" type="submit" value="play">
according to the clues you have given, this should work. with this way, you could change the placeHolder value in later time. I have made a fiddle for you: Fiddle
** replace the "abcd" value to whatever name you required !
solution5
0 ACCPTED 2015-03-30 03:43:30
<!DOCTYPE html>
<html>
<form>
<input type= "text" placeholder="Lianzheng" id= "inputField" onkeyup="myFunction()" onkeydown="myFunction()">
<input type="submit" name="play" disabled="disabled" id="play" value="play">
</form>
<script>
function myFunction() {
var placeholderValue = document.getElementById("inputField").placeholder;
var valueEntered = document.getElementById("inputField").value;
if(placeholderValue === valueEntered){
document.getElementById("play").removeAttribute("disabled");
}
else{
if(!document.getElementById("play").hasAttribute("disabled")){
document.getElementById("play").setAttribute("disabled","disabled")
}
}
}
setInterval(function(){
var placeholderValue = document.getElementById("inputField").placeholder;
var valueEntered = document.getElementById("inputField").value;
if(placeholderValue === valueEntered){
document.getElementById("play").removeAttribute("disabled");
}
else{
if(!document.getElementById("play").hasAttribute("disabled")){
document.getElementById("play").setAttribute("disabled","disabled")
}
}
},1000);
</script>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.