Do you know how to create a form with edit mode? For details: Suppose I've a form with 5 or 6 fields which has button 'Save' and 'Cancel' . If I save the form, it'll show the plain form without text fields and a button named 'Edit' will appear. And When I'll click on 'edit', the form will be editable. Is it possible?
Do you know how to create a form with edit mode? For details: Suppose I've a form with 5 or 6 fields which has button 'Save' and 'Cancel' . If I save the form, it'll show the plain form without text fields and a button named 'Edit' will appear. And When I'll click on 'edit', the form will be editable. Is it possible?
Share Improve this question asked Aug 18, 2013 at 16:39 Ebrahim KhalilEbrahim Khalil 371 gold badge1 silver badge13 bronze badges 2- 1 any link to start ? Please help Sir. – Ebrahim Khalil Commented Aug 18, 2013 at 16:46
- Take a look at: How can I make a field readonly in a Web form? as a place to start. – dc5 Commented Aug 18, 2013 at 17:02
2 Answers
Reset to default 4Full example, can handle as many input fileds as you want.(no select,textarea..)
The code is written based on modern browsers in pure javascript and css3.
Tested on Chrome.
hides and shows the buttons with css3,
saves the default values to apply them on cancel,
responds on the enter button.
If any questions .. just ask
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Modern Form</title>
<style>
label{display:block;}
form input{border:none;outline:none;box-sizing:border-box;}
form.invert input{border:1px solid rgba(0,0,0,0.2);outline:none;}
form>button:nth-of-type(1){
color:green;display:none;
}
form>button:nth-of-type(2){
color:red;display:none;
}
form>button:nth-of-type(3){
color:yellow;display:inline-block;
}
form.invert>button:nth-of-type(1){
display:inline-block;
}
form.invert>button:nth-of-type(2){
display:inline-block;
}
form.invert>button:nth-of-type(3){
display:none;
}
</style>
<script>
(function(W){
var D,form,bts,ipt;
function init(){
D=W.document,previous=[];
form=D.getElementsByTagName('form')[0];
bts=form.getElementsByTagName('button');
ipt=form.getElementsByTagName('input');
form.addEventListener('submit',save,false);
bts[1].addEventListener('click',cancel,false);
bts[2].addEventListener('click',edit,false);
}
function save(e){
e.preventDefault();
form.classList.remove('invert');
var l=ipt.length;
while(l--){
ipt[l].readOnly=true;
};
previous=[];
//send your info here
}
function edit(e){
e.preventDefault();
form.classList.add('invert');
var l=ipt.length;
while(l--){
previous[l]=ipt[l].value;
ipt[l].readOnly=false;
}
}
function cancel(e){
form.classList.remove('invert');
e.preventDefault();
var l=ipt.length;
while(l--){
ipt[l].value=previous[l];
ipt[l].readOnly=true;
}
}
W.addEventListener('load',init,false);
})(window)
</script>
</head>
<body>
<form>
<label>A:<input readonly></label>
<label>B:<input readonly></label>
<label>C:<input readonly></label>
<button>Save</button><button>Cancel</button><button>Edit</button>
</form>
</body>
</html>
ps: the handler function could be merged into one bigger function... but i think this way it's easier to understand
The following is a very simplistic sample of how this might be done.
- It is just to give you an idea - there are many ways to approach this.
- Works in chrome, pletely untested in other browsers (for example: assumes 2 pixel border)
- What you do will depend on your UX and browser requirements
Sample Fiddle
HTML
<span>Example</span>
<div class="example">
<form>
<label for="ex1fld1">Field 1:</label><input type="text" name="ex1fld1" readonly value="Hello"></input>
<label for="ex1fld2">Field 2:</label><input type="text" name="ex1fld2" readonly></input>
<input type="button" value="Edit"></inpu>
</form>
</div>
CSS
div {
margin-bottom: 20px;
margin-top: 10px;
}
input[type="text"] {
font-size: 14px;
}
input[type="text"][readonly] {
border: 2px solid rgba(0,0,0,0);
}
Script (jQuery used here, but not required for something like this)
var readonly = true;
$('.example input[type="button"]').on('click', function() {
$('.example input[type="text"]').attr('readonly', !readonly);
readonly = !readonly;
$('.example input[type="button"]').val( readonly ? 'Edit' : 'Save' );
return false;
});