Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ PROBLEM WITH DISABLING SUBMIT BUTTON TILL ALL INPUTS FILLED

Posted by: shankar from vizag May 28 2019, 09:12 AM

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.

Posted by: Christian J May 28 2019, 12:02 PM

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

Posted by: shankar from vizag May 28 2019, 07:49 PM

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 ?

Posted by: CharlesEF May 29 2019, 12:48 AM

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.

Posted by: Christian J May 29 2019, 04:58 AM

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".

Posted by: Christian J May 29 2019, 07:23 AM

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>

Posted by: shankar from vizag May 29 2019, 10:59 AM

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: 100

Posted by: CharlesEF May 29 2019, 05:55 PM

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

Posted by: shankar from vizag May 29 2019, 07:57 PM

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)