Disable textbox and select box
Question
I have several textboxes that disables the submit button unless they are all filled up. I have also a dropdwon list but won't disable the submit button until the user have chosen. How can I disable the submit button until all fields are filled and satisfied? pls help
<html> <head> <script> function success() { if (document.getElementById("uname").value === "" || document.getElementById("age").value === "" || document.getElementById("sex").selectValue == "Please Select") { document.getElementById('submit_form').disabled = true; } else { document.getElementById('submit_form').disabled = false; } } </script> <style> </style> </head> <body> Name: <input type="text" id="uname" onkeyup="success()"/> Age: <input type="text" id="age" onkeyup="success()"/> Sex: <select id="sex" name="sex"> <option value="" selected="selected"> Please Select </option> <option value="Male"> Male </option> <option value="Female"> Female </option> </select> <input type="submit" name="submit" id="submit_form" value="Submit" disabled> </body> </html>
2 answers
solution1
0 ACCPTED 2019-04-25 03:37:04
document.addEventListener("input", function() {
if (
document.getElementById("uname").value == "" ||
document.getElementById("age").value == "" ||
document.getElementById("sex").value == ""
) {
document.getElementById("submit_form").disabled = true;
} else {
document.getElementById("submit_form").disabled = false;
}
});
Here is pen: https://codepen.io/ahmetzeybek/pen/ROqLme
solution2
0 2019-04-25 05:42:57
In jquery you can use "prop" function to disable select box:
<script>
$('#select_id').prop('disabled', 'disabled');
</script>
And to disable text box you could just add "readonly" attribute to the element, using jquery:
<script>
$("#textboxid").attr("readonly");
</script>
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.