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
– Quentin, Commented Dec 30, 2020 at 15:47
You should learn how to use the label element properly. Without a for attribute or a form control inside it, a label is useless. You also need to spell label correctly. — Quentin
– Quentin, Commented Dec 30, 2020 at 15:48

Burham B. Soliman · Accepted Answer · 2020-12-30 16:00:23Z

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>

Collectives™ on Stack Overflow

Disable submit button until the user write number

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related