Disable submit button until the user write number

Question

So I have a quick question, I am trying to build an exchange react app that converts currency. I want to make by submit button disabled until the user type number in the desired input, I see a lot of answers but all of them using Jquery, have any solutions for only JS? my HTML code :

       <div id='mainHomeDiv'>
            <h1>Exchange</h1>
            <lable>From :</lable> 
            <select>
                <option value=''>type</option>
                <option value='Dollar'>Dollar</option>
                <option value='Euro'>Euro</option>
                <option value='NIS'>NIS</option>
            </select> <input type='number' id='amountInput' placeholder='Amount'></input> <br /> <br />
            <label>To :</label>
            <select>
                <option value=''>type</option>
                <option value='Dollar'>Dollar</option>
                <option value='Euro'>Euro</option>
                <option value='NIS'>NIS</option>
            </select> <br /> <br />
            <button disabled="disabled">START</button> <br /> <br />
            <button>Update</button> <button>Share on facebook</button> <button>View your exchange list</button>
        </div>

jQuery is "just JavaScript", you've also tagged this ReactJS. If you're using React then the answer becomes *dramatically* different. — Quentin, Dec 30 '20 at 15:47
You should [learn how to use the label element properly](http://www.456bereastreet.com/archive/200711/use_the_label_element_to_make_your_html_forms_accessible/). Without a for attribute or a form control inside it, a label is useless. You also need to spell label correctly. — Quentin, Dec 30 '20 at 15:48
https://stackoverflow.com/questions/30187781/how-to-disable-a-button-when-an-input-is-empty — epascarello, Dec 30 '20 at 15:54

score 0 · Answer 1 · answered Dec 30 '20 at 16:00

hope this helps u

i have added an event onkeyup to your textbox code to run the function,

var enbbtn = document.getElementById("tgbtn");
var txtchng = document.getElementById("amountInput");
function enabledbtn() {
if (txtchng.value.length > 0) {
enbbtn.disabled = false;
} else {
enbbtn.disabled = true;
}
}

<div id='mainHomeDiv'>
            <h1>Exchange</h1>
            <lable>From :</lable> 
            <select>
                <option value=''>type</option>
                <option value='Dollar'>Dollar</option>
                <option value='Euro'>Euro</option>
                <option value='NIS'>NIS</option>
            </select> <input type='number' id='amountInput' placeholder='Amount' onkeyup="enabledbtn()"></input> <br /> <br />
            <label>To :</label>
            <select>
                <option value=''>type</option>
                <option value='Dollar'>Dollar</option>
                <option value='Euro'>Euro</option>
                <option value='NIS'>NIS</option>
            </select> <br /> <br />
            <button id="tgbtn" disabled="true">START</button> <br /> <br />
            <button>Update</button> <button>Share on facebook</button> <button>View your exchange list</button>
        </div>

Disable submit button until the user write number

1 Answers1