-
Notifications
You must be signed in to change notification settings - Fork 0
/
inline-edit-textfield.html
75 lines (69 loc) · 2.62 KB
/
inline-edit-textfield.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<!-- include bootstrap CSS in head section-->
<head>
<title>Client-side Inline Edit (Text Field)</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<h1>Client-side Inline Edit (Text Field)</h1>
<div id="content">
<span id="labelField">Default Value</span>
<button id="editButton" class="btn btn-primary ml-2">Edit</button>
<input type="text" id="editableField" class="form-control d-none" />
<div class="mt-2">
<button id="cancelButton" class="btn btn-secondary d-none ml-6">Cancel</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.0.slim.min.js" integrity="sha256-tG5mcZUtJsZvyKAxYLVXrmjKBVLd6VpVccqz/r4ypFE=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('#editButton').on('click', function() {
var $label = $('#labelField');
var originalValue = $label.text();
var $input = $('<input>', {
type: 'text',
id: 'editableField',
class: 'form-control',
value: originalValue
});
$label.addClass('d-none');
$('#editButton').addClass('d-none');
$('#cancelButton').removeClass('d-none');
$input.removeClass('d-none').insertAfter($label);
$input.on('focusout', function(event) {
var newValue = $input.val();
$label.text(newValue);
$input.remove();
$label.removeClass('d-none');
$('#editButton').removeClass('d-none');
$('#cancelButton').addClass('d-none');
//post data to server to save the new value
});
$input.on('keyup', function(event) {
if (event.keyCode === 13) {
var newValue = $input.val();
$label.text(newValue);
$input.remove();
$label.removeClass('d-none');
$('#editButton').removeClass('d-none');
$('#cancelButton').addClass('d-none');
//post data to server to save the new value
}
});
});
$('#cancelButton').on('click', function() {
var $label = $('#labelField');
var currentValue = $label.text();
$('#editableField').val(currentValue);
$('#editableField').remove();
$label.removeClass('d-none');
$('#editButton').removeClass('d-none');
$('#cancelButton').addClass('d-none');
});
});
</script>
</body>
</html>