The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> PROBLEM WITH DISABLING SUBMIT BUTTON TILL ALL INPUTS FILLED
shankar from vizag
post May 28 2019, 09:12 AM
Post #1


Advanced Member
****

Group: Members
Posts: 164
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 28 2019, 12:02 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,238
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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
shankar from vizag
post May 28 2019, 07:49 PM
Post #3


Advanced Member
****

Group: Members
Posts: 164
Joined: 18-June 13
Member No.: 19,316



QUOTE(Christian J @ May 28 2019, 10:32 PM) *

The first INPUT has no value (also the user can't give it a value since it's READONLY).


Thank you very much for the response. I have removed the readonly attribute and tried but it is not working. Am I doing any wrong in script ?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post May 29 2019, 12:48 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 1,672
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 29 2019, 04:58 AM
Post #5


.
********

Group: WDG Moderators
Posts: 8,238
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".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 29 2019, 07:23 AM
Post #6


.
********

Group: WDG Moderators
Posts: 8,238
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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
shankar from vizag
post May 29 2019, 10:59 AM
Post #7


Advanced Member
****

Group: Members
Posts: 164
Joined: 18-June 13
Member No.: 19,316



QUOTE(Christian J @ May 29 2019, 05:53 PM) *

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.
Attached File  button_disable.php ( 725bytes ) Number of downloads: 204


This post has been edited by shankar from vizag: May 29 2019, 11:00 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post May 29 2019, 05:55 PM
Post #8


Programming Fanatic
********

Group: Members
Posts: 1,672
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
shankar from vizag
post May 29 2019, 07:57 PM
Post #9


Advanced Member
****

Group: Members
Posts: 164
Joined: 18-June 13
Member No.: 19,316



QUOTE(CharlesEF @ May 30 2019, 04:25 AM) *

Your scripts are using jQuery but you haven't linked to the jQuery library. Once you do that it will work.


Yes, now its working charles Ji

Thank you so much and so kind both of you.

regards
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 17th October 2019 - 12:41 PM