PROBLEM WITH DISABLING SUBMIT BUTTON TILL ALL INPUTS FILLED |
PROBLEM WITH DISABLING SUBMIT BUTTON TILL ALL INPUTS FILLED |
shankar from vizag |
May 28 2019, 09:12 AM
Post
#1
|
Advanced Member Group: Members Posts: 202 Joined: 18-June 13 Member No.: 19,316 |
Greetings,
I have a form with input fields. I would like to disable submit button till all input fields of the form entered. I placed the code below and it is not working. <head> <script> $(document).ready(function (){ validate(); $('#notenum, #note_date).change(validate); }); function validate(){ if ($('#notenum').val().length > 0 && $('#note_date').val().length > 0) { $("input[type=submit1]").prop("disabled", false); } else { $("input[type=submit1]").prop("disabled", true); } } </script> </head> <center><table class = "table table-striped table-bordered table-hover table-condensed" > <tr class="active"><td align="right">Note Number:</td><td><input type = "text" readonly name="notenum"> </td></tr> <tr><td align="right">Date:</td><td><input type="text" id="myDatepicker" name="note_date" placeholder="Click to pick date" ></td></tr> </table></center> <input class ="btn btn-primary" type="submit" id="submit1" name="submit1" value="SAVE" onsubmit='this.disabled = true;'>i Request to guide me to fix the problem. Thanks in advance. |
Christian J |
May 28 2019, 12:02 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
The first INPUT has no value (also the user can't give it a value since it's READONLY).
|
shankar from vizag |
May 28 2019, 07:49 PM
Post
#3
|
Advanced Member Group: Members Posts: 202 Joined: 18-June 13 Member No.: 19,316 |
|
CharlesEF |
May 29 2019, 12:48 AM
Post
#4
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
I don't do jQuery but doesn't $('#notenum') refer to the element id? That input is missing the id attribute. Also, the script uses $('#note_date') but there is no HTML element with that id. You do have an input with the id 'myDatepicker'.
In other words, you seem to use the name attribute in the jQuery selector when you should be using the id attribute. This post has been edited by CharlesEF: May 29 2019, 12:50 AM |
Christian J |
May 29 2019, 04:58 AM
Post
#5
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
This is also incorrect:
CODE $("input[type=submit1]") It's the button's TYPE that has the value "submit", and the NAME that has the value "submit1". |
Christian J |
May 29 2019, 07:23 AM
Post
#6
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Found a few more issues:
QUOTE CODE $('#notenum, #note_date).change(validate); A quote character is missing. Also, the onchange event may not be user-friendly, since it only fires once the user leaves the form field --instead I'd use the oninput event (which fires as soon as the user makes changes), but note that oninput seems to require special syntax in JQuery. QUOTE CODE onsubmit='this.disabled = true;'> I recall the onsubmit event only applies to the FORM element, not the submit button. This seems to work: CODE <script> $(document).ready(function() { validate(); $("#notenum, #note_date").on("input", validate); $("#foo").submit(function() { $(this).prop("disabled", true); }); }); function validate() { if($('#notenum').val().length>0 && $('#note_date').val().length>0) { $("#submit1").prop("disabled", false); } else { $("#submit1").prop("disabled", true); } } </script> <form id="foo"> <input id="notenum" name="notenum"> <input id="note_date" name="note_date" > <input type="submit" id="submit1" name="submit1" value="SAVE"> </form> |
shankar from vizag |
May 29 2019, 10:59 AM
Post
#7
|
Advanced Member Group: Members Posts: 202 Joined: 18-June 13 Member No.: 19,316 |
Found a few more issues: QUOTE CODE $('#notenum, #note_date).change(validate); A quote character is missing. Also, the onchange event may not be user-friendly, since it only fires once the user leaves the form field --instead I'd use the oninput event (which fires as soon as the user makes changes), but note that oninput seems to require special syntax in JQuery. QUOTE CODE onsubmit='this.disabled = true;'> I recall the onsubmit event only applies to the FORM element, not the submit button. This seems to work: CODE <script> $(document).ready(function() { validate(); $("#notenum, #note_date").on("input", validate); $("#foo").submit(function() { $(this).prop("disabled", true); }); }); function validate() { if($('#notenum').val().length>0 && $('#note_date').val().length>0) { $("#submit1").prop("disabled", false); } else { $("#submit1").prop("disabled", true); } } </script> <form id="foo"> <input id="notenum" name="notenum"> <input id="note_date" name="note_date" > <input type="submit" id="submit1" name="submit1" value="SAVE"> </form> Thank you Christian ji I tried with the provided code but the button is not disabled and it is active. The file is attached for your reference please. button_disable.php ( 725bytes ) Number of downloads: 459 This post has been edited by shankar from vizag: May 29 2019, 11:00 AM |
CharlesEF |
May 29 2019, 05:55 PM
Post
#8
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
Your scripts are using jQuery but you haven't linked to the jQuery library. Once you do that it will work.
|
shankar from vizag |
May 29 2019, 07:57 PM
Post
#9
|
Advanced Member Group: Members Posts: 202 Joined: 18-June 13 Member No.: 19,316 |
|
Lo-Fi Version | Time is now: 25th April 2024 - 10:19 PM |