Button can't be enabled

Question

My button can't be enabled after having 2 inputs in my textbox not sure how to do this. My button is <input id="rand" type="submit" value="submit" disabled> . I think that its because of the disabled that my entire function is not working... but I don't know any other way to enable it

 <script>
function validate() 
    {
        
            var values = document.getElementById("digit").value;
            if(values<0)
            {
                    document.getElementById("numbers").innerHTML = "This is not a number, number must be greater or equal to zero"
                    return false
            }
            else if (!(typeof +values && values >= 0)|| values.trim() == "") 
            {
                    document.getElementById("numbers").innerHTML = "Fill in a number";
                    return false;
            }
            else if (values>=0)
            {
                    document.getElementById("numbers").innerHTML = "";
            }
        
            var values1 = document.getElementById("digit1").value;
            if(values1<0)
            {
                    document.getElementById("numbers1").innerHTML = "This is not a number, number must be greater or equal to zero"
                    return false
            }
            else if (!(typeof +values1 && values1 >= 0)|| values1.trim() == "") 
            {
                    document.getElementById("numbers1").innerHTML = "Fill in a number";
                    return false;
            }
            else if (values >= values1)
            {
                    document.getElementById("numbers1").innerHTML = "Highest number is smaller than lowest number";
                    return false;  
            }
            else if (values1 > values)
            {
                    document.getElementById("numbers1").innerHTML = "";
            }
        
        
            if((document.getElementById("digit").value>0) && (document.getElementById("digit1").value>0))
            {
            document.getElementById("rand").removeAttribute('disabled');
            }
            else
            {
            document.getElementById("rand").setAttribute('disabled', 'disabled');
            }
        
    }
    
     
</script>

This is my codes from my

<body>
<table style="border-collapse: collapse" width="100%">  
<form action="random" method="get" onSubmit="return validate()">
        <tr>
            <td>
            Lowest number: 
            <input id="digit" type="text" name="lowestnumber">
            <span id="numbers"></span>
            <br/>
            </td>
        </tr>
        <tr>
            <td>
            Highest number:
            <input id="digit1" type="text" name="highestnumber">  
            <span id="numbers1"></span>    
            </td>
        </tr>
        <tr>
            <td>
                <input id="rand" type="submit" value="submit" disabled><br/>
                <input id="randno" type="text"><br/>
            </td>
        </tr>
        <tr>
            <td>
                <input id="guess" type="text"><br/>
                <input id="guessbut" type="button" value="" >
            </td>
        </tr>
        <br/>
</form>
</table>
</body>

Please attach your html file too and make it as a full snippet. — Derek Wang, Oct 20 '20 at 08:12
Copy and paste your html code in the question, do not provide us with path from your computer none can do that. — Oussama Ben Ghorbel, Oct 20 '20 at 08:14
Are values and values1 numeric or string? You start treating them as numbers, but your disabled check treats them as strings. — Tree Frog, Oct 20 '20 at 08:16
Is this link help you? https://stackoverflow.com/questions/11719961/javascript-remove-disabled-attribute-from-html-input — Raju Melveetilpurayil, Oct 20 '20 at 08:22

score 0 · Answer 1 · answered Oct 20 '20 at 08:25

0

You're enabling the button the right way, by using removeAttribute('disabled'). Maybe you just made some logic error, so you don't reach the removeAttribute statement. Check it out by using console.log()

answered Oct 20 '20 at 08:25

rubenipina

1
1

What do you mean? – Ng Leng Poh Oct 20 '20 at 08:32
Just write console.log("whatever") before ` document.getElementById("rand").removeAttribute('disabled');` Then look at the console, if it doesn't log a message, you made a logic mistake and you have to check out your code. I just wanted to mention, that the way you're enabling the button is correct – rubenipina Oct 20 '20 at 08:36

score 0 · Answer 2 · answered Oct 20 '20 at 08:34

I think everything works well, except one "u never call your javascript!!". your js code is wrapped in validate() function and u never call it so it wont be ran forever. u can try call it using

onchange="validate()"

in your input so this what it will look like

  <tr>
        <td>
        Lowest number: 
        <input id="digit" type="text" name="lowestnumber" onchange="validate()">
        <span id="numbers"></span>
        <br/>
        </td>
    </tr>
    <tr>
        <td>
        Highest number:
        <input id="digit1" type="text" name="highestnumber" onchange="validate()">  
        <span id="numbers1"></span>    
        </td>
    </tr>

score 0 · Answer 3 · answered Oct 20 '20 at 10:43

I am not an experienced coder but from what I am reading here is that you are trying to validate an input form and based on that you then disable/enable an input field.

First it is best when validating an input form using regex validations instead of conditionals. Then as soon as the regex is true then you would have to parseInt() which converts the input string to a number (since all inputs are type of string). Then you can make the comparisons.

I've broken down the validations in three stages for you to understand, I know it is a bit messy code but everything depends on the implementation. First validation checks the input with a regex then the second validation checks if the number with the first field and the third validation checks if there is any message/text. If there is no text then all is good so the Rad input field is enabled.

function firstValidation(valueToTest) {
  // Your regex matches positive numbers only
  var yourRegex = /^[+]?\d+([.]\d+)?$/;
  // Test the regex, if false then return the message
  return yourRegex.test(valueToTest) ?
    "" :
    "<br/>Input a number, the number must be greater or equal to zero";
}

function secondValidation(firstInput, secondInput) {
  return parseInt(firstInput) < parseInt(secondInput) ?
    "<br>Highest number is smaller than lowest number" :
    "";
}

function thirdValidation() {
  var randField = document.getElementById("rand");
  var highestMessage = document.getElementById("message-highestnumber")
    .innerHTML;
  var lowestMessage = document.getElementById("message-lowestnumber").innerHTML;
  // If highestMessage or LowestMessage have no message then everything is ok
  randField.disabled = highestMessage || lowestMessage;
}

function validate(inputField) {
  var message = firstValidation(inputField.value);
  var lowestNumber = document.getElementById("lowestnumber");
  var highestNumber = document.getElementById("highestnumber");

  // Is the Input field the highest number? Then make the extra check
  if (inputField === highestNumber)
    message += secondValidation(highestNumber.value, lowestNumber.value);

  // After all the checks display the message nextElementSibling will automatically go to the next element which is a span
  inputField.nextElementSibling.innerHTML = message;
  thirdValidation();
}

<body>
  <table>
    <tr>
      <td>
        Lowest number:
        <input id="lowestnumber" type="text" name="lowestnumber" onchange="validate(this)">
        <span id="message-lowestnumber"></span>
    </tr>
    </td>
    <tr>
      <td>
        Highest number:
        <input id="highestnumber" type="text" name="highestnumber" onchange="validate(this)">
        <span id="message-highestnumber"></span>
      </td>
    </tr>
    <tr>
      <td>
        Rand
        <input id="rand" type="text" name="rand"><br />
        <span id="message-rand"></span></td>
    </tr>
  </table>
</body>

Again I might complicate things but everything is based on what implementation you do.

Button can't be enabled

3 Answers3