Disable form input by default. Turn them onClick. Disable onclick various

Question

Basically, I would like all inputs of the form to be disabled until the "Edit Profile" button is clicked, and then click the "Save Changes" button to disable the attribute again.

I tried a bunch of solutions from this site, with no luck. Any help would be appreciated, even if it just directed me in the right directions.

Here is the code that uses 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> 

Answer 1

Add some selectors for the 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 input fields -

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

Change input field attributes -

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

Remember to enable jquery. And e.preventDefault() to prevent the default action a s.

Working demo

Answer 2

You also have two elements with submit_btn identifier, the identifier must be unique.

I would modify them to be different, and then try:

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

Then to disconnect again:

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

You can change the input[type='text'] selector if you have more input on the page that you do not want to disable.

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

Answer 3

I would use jQuery. Here is 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 the script: http://jsfiddle.net/92ng2hs0/2/