Disable Submit Button Until Form Filled Out JQuery/JavaScript

Question

I have a form which has 3 dropdownlist and an input field.

I want the 'Submit' button to be displayed until all the fields are populated but i cant seem to get it working as my 'Submit' button won't re-enable when the fields are populated.

The code im trying to use is:

HTML

<div class="row">
    <div class="col-sm-12">
        <div class="form-group" id="FromClass">
            <label class="col-sm-offset-3 col-sm-2 control-label">From</label>
            <div class="col-sm-6 col-md-4" id="FromDiv">
                <select name="RegCashMove_From_DropDownList" class="form-control" id="RegCashMove_From_DropDownList">
                    <option value="- - Please select - -">- - Please select - -</option>
                    <option value="AJBIC">AJBIC</option>
                    <option value="FSS">FSS</option>
                </select>
            </div>
        </div>
        <div class="form-group" id="ToClass">
            <label class="col-sm-offset-3 col-sm-2 control-label">To</label>
            <div class="col-sm-6 col-md-4" id="ToDiv">
                <select name="RegCashMove_To_DropDownList" class="form-control" id="RegCashMove_To_DropDownList">
                    <option value="- - Please select - -">- - Please select - -</option>
                    <option value="AJBIC">AJBIC</option>
                    <option value="FSS">FSS</option>
                </select>
            </div>
        </div>
        <div class="form-group" id="AmountClass">
            <label class="col-sm-offset-3 col-sm-2 control-label">Amount</label>
            <div class="col-sm-6 col-md-4" id="AmountDiv">
                <div class="input-group">
                    <div class="input-group-addon">£</div>
                    <input name="RegCashMove_Amount_TextBox" class="form-control" id="RegCashMove_Amount_TextBox" onblur="FormatCurrency(this);" type="number" step="any" value="" placeholder="0.00">
                </div>
            </div>
        </div>
        <div class="form-group" id="FrequencyClass">
            <label class="col-sm-offset-3 col-sm-2 control-label">Frequency</label>
            <div class="col-sm-6 col-sm-4" id="FrequencyDiv">
                <select name="RegCashMove_Frequency_DropDownList" class="form-control" id="RegCashMove_Frequency_DropDownList">
                    <option value="0">- - Please select - -</option>
                    <option value="1">Monthly</option>
                    <option value="3">Quarterly</option>
                    <option value="6">Half yearly</option>
                    <option value="12">Yearly</option>
                </select>
            </div>
        </div>
        <div class="form-group pull-right" id="submitAndCancel" style="display: block;">
            <div class="col-sm-12">
                <button name="RegularCashMovements_Submit_Button" disabled="disabled" class="btn btn-default" id="RegularCashMovements_Submit_Button" type="submit">
                    <span class="glyphicon glyphicon-ok"></span> Submit
                </button> 
                <button name="RegularCashMovements_Cancel_Button" class="btn btn-default" id="RegularCashMovements_Cancel_Button" type="submit">
                    <span class="glyphicon glyphicon-remove"></span> Cancel
                </button>
            </div>
        </div>
    </div>
</div>

JQuery

 $(document).ready(function () {    
    <% if (state == "Initial")
    { %>
        $('#RegularCashMovements_Submit_Button').attr('disabled', 'disabled');

            function updateFormEnabled()
            {
                if (verifyAdSettings())
                {
                    $('#RegularCashMovements_Submit_Button').attr('disabled', '');
                }
                else
                {
                    $('#RegularCashMovements_Submit_Button').attr('disabled', 'disabled');
                }
            }

            function verifyAdSettings()
            {
                if ($('#RegCashMove_From_DropDownList').val() != '- - Please select - -' && $('#RegCashMove_To_DropDownList').val() != '- - Please select - -' && $('#RegCashMove_Amount_TextBox').val() != '' && $('#RegCashMove_Frequency_DropDownList').val() != '0')
                {
                    return true;
                }
                else
                {
                    return false
                }
            }

            $('#RegCashMove_From_DropDownList').change(updateFormEnabled);
            $('#RegCashMove_To_DropDownList').change(updateFormEnabled);
            $('#RegCashMove_Amount_TextBox').change(updateFormEnabled);
            $('#RegCashMove_Frequency_DropDownList').change(updateFormEnabled);
    <%} %>
});

This is my fiddle.

@MeeneshJain These are server side calls as the page has different states (Initial, Confirm, Edit, DeleteConfirm & Complete) which are handled in my helper and are triggered depending on the button clicked — murday1983, Jul 24 '15 at 09:16
@AnthonyHorne Are you meaning rather than disabling the 'Submit' button i should show/hide it? — murday1983, Jul 24 '15 at 09:17
You could also try http://stackoverflow.com/a/4227096/1662973 — Anthony Horne, Jul 24 '15 at 09:19
You could achieve this easily using a framework like knockout. It has its learning curve and cost of adoption though. — ramp, Jul 24 '15 at 09:38

Bibek Sharma · Accepted Answer · 2015-07-24T09:35:45.397

Use removeAttr to remove the disabled attributes.You may be wonder that disabled = "" also disable the DOM element.

$(document).ready(function () {    
  var state = "Initial";
   if (state == "Initial")
    { 
            function updateFormEnabled()
            {
                if (verifyAdSettings())
                {
                    $('#RegularCashMovements_Submit_Button').removeAttr('disabled');
                }
                else
                {
                    $('#RegularCashMovements_Submit_Button').attr('disabled', 'disabled');
                }
            }

            function verifyAdSettings()
            {
                if ($('#RegCashMove_From_DropDownList').val() != '- - Please select - -' && $('#RegCashMove_To_DropDownList').val() != '- - Please select - -' && $('#RegCashMove_Amount_TextBox').val() != '' && $('#RegCashMove_Frequency_DropDownList').val() != '0')
                {
                    return true;
                }
                else
                {
                    return false
                }
            }
 

            $('#form select').change(updateFormEnabled);
            $('#RegCashMove_Amount_TextBox').change(updateFormEnabled);
           
   } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="form">
    <div class="col-sm-12">
        <div id="RegCashMoveHeading">
            <h3>Set up a new regular cash movement</h3>
        </div>
        <div class="form-group" id="FromClass">
            <label class="col-sm-offset-3 col-sm-2 control-label">From</label>
            <div class="col-sm-6 col-md-4" id="FromDiv">
                <select name="RegCashMove_From_DropDownList" class="form-control" id="RegCashMove_From_DropDownList">
                    <option value="- - Please select - -">- - Please select - -</option>
                    <option value="AJ Bell Investcentre">AJ Bell Investcentre</option>
                    <option value="Funds and Shares Service">Funds and Shares Service</option>
                </select>
            </div>
        </div>
        <div class="form-group" id="ToClass">
            <label class="col-sm-offset-3 col-sm-2 control-label">To</label>
            <div class="col-sm-6 col-md-4" id="ToDiv">
                <select name="RegCashMove_To_DropDownList" class="form-control" id="RegCashMove_To_DropDownList">
                    <option value="- - Please select - -">- - Please select - -</option>
                    <option value="AJ Bell Investcentre">AJ Bell Investcentre</option>
                    <option value="Funds and Shares Service">Funds and Shares Service</option>
                </select>
            </div>
        </div>
        <div class="form-group" id="AmountClass">
            <label class="col-sm-offset-3 col-sm-2 control-label">Amount</label>
            <div class="col-sm-6 col-md-4" id="AmountDiv">
                <div class="input-group">
                    <div class="input-group-addon">£</div>
                    <input name="RegCashMove_Amount_TextBox" class="form-control" id="RegCashMove_Amount_TextBox" onblur="FormatCurrency(this);" type="number" step="any" value="" placeholder="0.00">
                </div>
            </div>
        </div>
        <div class="form-group" id="FrequencyClass">
            <label class="col-sm-offset-3 col-sm-2 control-label">Frequency</label>
            <div class="col-sm-6 col-sm-4" id="FrequencyDiv">
                <select name="RegCashMove_Frequency_DropDownList" class="form-control" id="RegCashMove_Frequency_DropDownList">
                    <option value="0">- - Please select - -</option>
                    <option value="1">Monthly</option>
                    <option value="3">Quarterly</option>
                    <option value="6">Half yearly</option>
                    <option value="12">Yearly</option>
                </select>
            </div>
        </div>
        <div class="form-group pull-right" id="submitAndCancel" style="display: block;">
            <div class="col-sm-12">
                <button name="RegularCashMovements_Submit_Button" disabled="disabled" class="btn btn-default" id="RegularCashMovements_Submit_Button" type="submit">
                    <span class="glyphicon glyphicon-ok"></span> Submit
                </button> 
                <button name="RegularCashMovements_Cancel_Button" class="btn btn-default" id="RegularCashMovements_Cancel_Button" type="submit">
                    <span class="glyphicon glyphicon-remove"></span> Cancel
                </button>
            </div>
        </div>
    </div>
</div>

score 0 · Answer 2 · edited May 23 '17 at 12:33

0

Just change .attr() in your code to .prop() because setting back the button to Not Disabled with .attr will not work, more about this on many questions on stackoverflow:
- difference between prop() and attr() in jQuery and when to use attr() and prop()
- .prop() vs .attr()
- jQuery attr vs prop?
- .prop() vs .attr()

edited May 23 '17 at 12:33

Community

1
1

answered Jul 24 '15 at 09:32

Amr Elgarhy

66,568
69
184
301

Disable Submit Button Until Form Filled Out JQuery/JavaScript

2 Answers2