Disable form inputs by default. Enable them onClick of . Disable onClick of different

Question

Basically I would like to have all form inputs disabled until the "Edit Profile" button is clicked, then once the "Save Changes" button is clicked, have the disabled attribute reapplied.

I have tried a bunch of solutions from this site, with no luck. Any help would be appreciated, even if it's just guiding me int he right directions.

Here is the code, which is using bootstrap and contains Django (not shown, obviously). Thanks in advance.

<div class="main">
    <div class="container">
        <section class="hgroup">
            <h1>My Profile</h1>
            <h2>View and edit your profile.</h2>
            <ul class="breadcrumb pull-right">
                <li><a href="../dashboard">Dashboard</a> </li>
                <li class="active">Profile</li>
            </ul>
        </section>
        <section>
            <div class="row">
                <div class="contact_form col-sm-12 col-md-12">
                    <form name="contact_form" id="contact_form" method="post">
                        <div class="row">
                            <div class="col-sm-4 col-md-4">
                                <label>First Name</label>
                                <input name="first_name" id="name" class="form-control" type="text" value="">
                            </div>
                            <div class="col-sm-4 col-md-4">
                                <label>Middle Name</label>
                                <input name="middle_name" id="email" class="form-control" type="text" value="">
                            </div>
                            <div class="col-sm-4 col-md-4">
                                <label>Last Name</label>
                                <input name="last_name" id="email" class="form-control" type="text" value="">
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12">
                            <br/>
                            <a id="submit_btn" class="btn btn-primary" name="submit">Edit Profile</a>
                            <a id="submit_btn" class="btn btn-primary" name="submit">Save Changes</a>
                            <!--<span id="notice" class="alert alert-warning alert-dismissable hidden" style="margin-left:20px;"></span>-->
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>
</div>

Did you see how to add a click handler using jQuery or how id disable/enable elements using jQuery — Arun P Johny, May 20 '15 at 05:29
something similar has already been asked [this](http://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery) may help — Saubar, May 20 '15 at 05:34

Sougata Bose · Answer 1 · 2015-05-20T05:49:38.807

Add some selectors to link -

<a href="#" id="edit_profile" class="btn btn-primary">Edit Profile</a>
<a href="#" id="save_button" class="btn btn-primary">Save Changes</a>

Disable all the input fields -

$('input').attr('disabled', true);

Alter the attributes of input fields -

$('#edit_profile').on('click', function(e) {
    e.preventDefault();
    $('input').attr('disabled', false);
});

$('#save_button').on('click', function(e) {
    e.preventDefault();
    $('input').attr('disabled', true);
});

Dont forget to include jquery. And e.preventDefault() for preventing the default action of the as.

Working Demo

score 0 · Answer 2 · answered May 20 '15 at 05:35

You also have two elements that have the id submit_btn, id's should be unique.

I would change them to be different and then try:

$("#edit_btn").on('click', function() {
    $("input[type='text']").removeAttr('disabled');
});

Then to re-disable:

$("#submit_btn").on('click', function() {
    $("input[type='text']").attr('disabled', 'disabled');
});

You may wish to change the input[type='text'] selector if you have more inputs on the page you don't want disabled.

Maybe change your <input> elements to include the js-disable class, then target the $(".js-disable") selector instead of input[type='text']

score 0 · Answer 3 · answered May 20 '15 at 05:48

I would use jQuery. Here's an example.

html:

<form>
    <p>Edit the form</p>
    <input type="text" placeholder="one" disabled>
    <input type="text" placeholder="two" disabled>
    <input type="text" placeholder="three" disabled>
    <div id="saveForm">Save Form</div>
    <div id="editForm">Edit Form</div>
</form>

jQuery:

$("#editForm").click(function(){
    $("p").show(0);
    $("#saveForm").show(0);
    $("form input").prop('disabled', false);
    $(this).hide(0);
});
$("#saveForm").click(function(){
    $("p").hide(0);
    $("#editForm").show(0);
    $("form input").prop('disabled', true);
    $(this).hide(0);
});

CSS:

div,input{
    padding: 10px;
    display: block;
    margin: 10px;
    border-radius: 5px;
    border: 2px solid #000;
}
#saveForm{display: none;color:#ff0000;}
p{display:none;color:#ff0000;}
div{cursor:pointer;}
div:hover{opacity: 0.7;}

Here's a fiddle: http://jsfiddle.net/92ng2hs0/2/

Disable form inputs by default. Enable them onClick of . Disable onClick of different

3 Answers3