How to disable a button

pmd82 · November 10, 2009

Hi i need to set up a button disabled until user will enter something into the textfield. Does anybody know how to do that?

This is my code:

<HTML> 
  <HEAD> 
    <TITLE>The Fortune Telling Game</TITLE> 
    <LINK rel="stylesheet" href="style.css">
    <SCRIPT language = "javascript" type = "text/javascript">
    <!-- Start hiding JavaScript statements
      var aMenuList;
      var Request = false;
      if (window.XMLHttpRequest) {
        Request = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        Request = new ActiveXObject("Microsoft.XMLHTTP");
      }
        
      function ProcessEvent(event) {
        var e = new getMouseData(event);
        var appMenu;
        if ((e.x > 10) && (e.x < 470) && (e.y > 20) && (e.y < 50)) {
          if (e.x < 160) {populateMenus(1);}
          if ((e.x > 160) && (e.x < 310)) {populateMenus(2);}
          if (e.x > 310) {populateMenus(3);}
        }
        appMenu = document.getElementById("fileMenu");
        if (appMenu.style.visibility == "visible"){
          if (((e.x < 10) || (e.x > 150)) || ((e.y < 20) || (e.y > 100))) {
            RemoveMenus();
          }
        }

        appMenu = document.getElementById("optionsMenu");
        if (appMenu.style.visibility == "visible"){
          if (((e.x < 150) || (e.x > 300)) || ((e.y < 20) || (e.y > 100))) {
            RemoveMenus();
          }
        }
        appMenu  = document.getElementById("helpMenu");
        if (appMenu.style.visibility == "visible"){
          if (((e.x < 300) || (e.x > 450)) || ((e.y < 20) || (e.y > 100))) {
            RemoveMenus();
          }
        }
      }

      function getMouseData(event) {
        if(event) {
          this.x = event.clientX; 
          this.y = event.clientY; 
        } else {
          this.x = event.pageX; 
          this.y = event.pageY; 
        }
      }
      
      function populateMenus(menu) { 
        var menuList;
        if (menu == 1) {menuList = "file.txt"}
        if (menu == 2) {menuList = "options.txt"}
        if (menu == 3) {menuList = "help.txt"}
        if(Request) {
          Request.open("GET", menuList); 
          Request.onreadystatechange = function() { 
            if (Request.readyState == 4 && Request.status == 200) { 
              DisplayMenu(menu, Request.responseText);
            } 
          } 
          Request.send(null); 
        }
      }

      function RemoveMenus() {
        var fileMenu = document.getElementById("fileMenu");
        if (fileMenu.style.visibility == "visible"){
          fileMenu.style.visibility = "hidden";
        }
        var optionsMenu = document.getElementById("optionsMenu");
        if (optionsMenu.style.visibility == "visible"){
          optionsMenu.style.visibility = "hidden";
        }
        var helpMenu = document.getElementById("helpMenu");
        if (helpMenu.style.visibility == "visible"){
          helpMenu.style.visibility = "hidden";
        }
      }

      function DisplayMenu(choice, menuList) {
        var menu; 
        aMenuList = menuList.split(", ");     
        var menuTable = "<table width = '99%'>";
    
        for (var i = 0; i < aMenuList.length; i++) {
          menuTable += "<tr><td " + "onclick='" + "ExecuteCommand(" + i 
          + ")" + "'>" + aMenuList[i] + "</td></tr>";
        }

        menuTable += "</table>";

        if (choice == "1"){menu = document.getElementById("fileMenu");}
        if (choice == "2"){menu = document.getElementById("optionsMenu");}
        if (choice == "3"){menu = document.getElementById("helpMenu");}

        menu.innerHTML = menuTable;
        menu.style.visibility = "visible";
      }

      function ExecuteCommand(command) {
        if (aMenuList[command] == "New Game") {
          StartPlay()
        }
        if (aMenuList[command] == "Quit") {
          window.close();
        }
        if (aMenuList[command] == "White Background") {
          document.bgColor="#FFFFFF";
        }
        if (aMenuList[command] == "Grey Background") {
          document.bgColor="#CCCCCC";
        }
        if (aMenuList[command] == "Instructions") {
          window.alert("Click on the New Game command located on the " +
          "File menu to begin game play. Next, type your question and " +
          "click on the Get Answer button to see your fortune.");
        }
        if (aMenuList[command] == "About") {
          window.alert("The Fortune Telling Game - Copyright 2008");
        }
      }

      function StartPlay() {
        document.getElementById('Label').innerHTML = "Enter Question:"
        document.getElementById("inputField").style.visibility="visible";
        document.getElementById("checkBtn").style.visibility="visible";
      }


  function AnswerQuestion() {

  randomNo = 1 + Math.random() * 9;
  randomNo = Math.round(randomNo);

  Request.open("GET", "answer" + randomNo + ".xml");

  Request.onreadystatechange = function (){
  
  if (Request.readyState == 4 && Request.status == 200) {

  var xmlDoc = Request.responseXML; 
  ClearOutWhiteSpace(xmlDoc)
  docElement = xmlDoc.documentElement;
  solution = docElement.firstChild;      
  var obj = document.getElementById("answer");
  obj.innerHTML = solution.firstChild.nodeValue;
  }}
  Request.send(null);}

       
      function ClearOutWhiteSpace(xmlFile) {
        var i = 0;
        for (i = 0; i < xmlFile.childNodes.length; i++) {
          var tag = xmlFile.childNodes[i];
          if (tag.nodeType == 1) {
            ClearOutWhiteSpace(tag);
          }
          if ((tag.nodeType == 3) && (/^\s+$/.test(tag.nodeValue))) {
            xmlFile.removeChild(xmlFile.childNodes[i--]);
          }
        }
      }

      function ResetScreen() {
        document.getElementById("checkBtn").style.visibility="visible";
        document.getElementById("inputField").value="";
        document.getElementById('answer').innerHTML = "";
      }

    // End hiding JavaScript statements -->
    </SCRIPT>
  </HEAD> 
  <BODY onmousemove = "ProcessEvent(event)" onclick = "RemoveMenus()">
    <IMG id="fileIMG" src="file.jpg" style="left:0; top:0; width:150; 
      height:29;">
    <DIV id="fileMenu" style="left:10; top:44; width:150; height: 48;
      visibility:hidden;"></DIV>
    <IMG id="optionsIMG" src="options.jpg" style="left:150; top:0; 
      width:150; height:29;" >
    <DIV id="optionsMenu" style="left:165; top:44; width:150; height: 48;
      visibility:hidden;"></DIV>
    <IMG id="helpIMG" src="help.jpg" style="left:300; top:0; width:150; 
      height:29;" >
    <DIV id="helpMenu" style="left:319; top:44; width:150; height: 48;
      visibility:hidden;"></DIV>
    <FORM>
      <BR> <BR> <BR>
      <DIV id = "Label"> </DIV>
      <INPUT type="textfield" size="75" style="visibility:hidden"
        id="inputField">
      <INPUT type="button" value="Get Answer" style="visibility:hidden" 
        id="checkBtn" onclick=AnswerQuestion()>
      <H3><DIV id = "answer"> </H3>
</FORM>
  </BODY> 
</HTML>

Thank you !!!

corbin · November 11, 2009

You can do it with a onkeypress event on the text field, and then if the field is empty, set disabled = "yes" on the button, and otherwise = "no".

(You'll need to get a DOM object reference to the button, then it should be the disabled variable.)

Sign In

How to disable a button

Recommended Posts

pmd82

Link to comment

Share on other sites

corbin

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information