Skip to content

Commit 68d0431

Browse files
johnnyzhang1992johnnyzhang1992
committed
demo contact mysql insert update and delete
1 parent bf98590 commit 68d0431

File tree

9 files changed

+954
-0
lines changed

9 files changed

+954
-0
lines changed

‎php-mysql/contact/MyContacts2.html‎

Lines changed: 282 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title> Yilu's Contact List </title>
5+
<meta charset="windows-1252">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="contact.css">
8+
<style>
9+
10+
</style>
11+
</head>
12+
<body style="background-color: BurlyWood;">
13+
<!--content-->
14+
<div class="content">
15+
<h1><center>Yilu's Contact List</center></h1>
16+
17+
<table id="table" border="1">
18+
<tr>
19+
<td><button onclick="selectAll()"><input type="checkbox" id="myCheck" value="out"></button></td>
20+
<td>First Name</td>
21+
<td>Last Name</td>
22+
<td>City</td>
23+
<td>State</td>
24+
<td>Date of Birthday</td>
25+
<td>Age</td>
26+
<td>Email</td>
27+
</tr>
28+
29+
</table>
30+
<button onclick="updateContact('new')">New Contact</button>
31+
<button onclick="updateContact('edit')">Edit Contact</button>
32+
<button onclick="deleteContact()">Delete Contact</button>
33+
</div>
34+
<!--table modal-->
35+
<div id="table_modal" class="table-modal" style="display: none">
36+
<div id="modal_new" class="modal-top new">New Contact</div>
37+
<div id="modal_edit" class="modal-top edit">Edit Contact</div>
38+
<span class="close" onclick="closeModal()">&times;</span>
39+
<!--<form action="" method="post">-->
40+
<input id="modal_type" type="hidden" name="type" value="create">
41+
<input id="contact_id" type="hidden" name="contact_id" value="-1">
42+
<div id="modal_message" class="message" style="display: none">
43+
It is not possible to edit multiple contacts at the moment. We apologize for any inconvenience caused.
44+
</div>
45+
<div class="modal-content">
46+
<div class="item">
47+
<label for="first_name" class="label">First Name</label>
48+
<div class="input">
49+
<input id="first_name" type="text" name="first_name" value="">
50+
</div>
51+
</div>
52+
<div class="item">
53+
<label for="last_name" class="label">Last Name</label>
54+
<div class="input">
55+
<input id="last_name" type="text" name="last_name" value="">
56+
</div>
57+
</div>
58+
<div class="item">
59+
<label for="city" class="label">City</label>
60+
<div class="input">
61+
<input id="city" type="text" name="city" value="">
62+
</div>
63+
</div>
64+
<div class="item">
65+
<label for="state" class="label">State</label>
66+
<div class="input">
67+
<input id="state" type="text" name="state" value="">
68+
</div>
69+
</div>
70+
<div class="item">
71+
<label for="birthday" class="label">Date of Birthday</label>
72+
<div class="input">
73+
<input id="birthday" type="text" name="birthday" value="">
74+
</div>
75+
</div>
76+
<div class="item">
77+
<label for="age" class="label">Age</label>
78+
<div class="input">
79+
<input id="age" type="number" name="age" value="">
80+
</div>
81+
</div>
82+
<div class="item">
83+
<label for="email" class="label">Email</label>
84+
<div class="input">
85+
<input id="email" type="email" name="email" value="">
86+
</div>
87+
</div>
88+
</div>
89+
<div class="submit">
90+
<button id="submit" type="submit" class="submit-modal" onclick="submit()">Add Contact</button>
91+
</div>
92+
<!--</form>-->
93+
</div>
94+
<script>
95+
// select contact id array
96+
var selected_ids = [];
97+
// new or edit contact
98+
function updateContact(state){
99+
100+
if(state== 'edit'){
101+
var contactIds = document.getElementsByName('select_contact_id');
102+
selected_ids = [];
103+
for(var i=0;i<contactIds.length;i++){
104+
if(contactIds[i].checked){
105+
selected_ids.push(contactIds[i].value);
106+
}
107+
}
108+
console.log(selected_ids);
109+
console.log(selected_ids.length);
110+
if(selected_ids.length<1){
111+
alert('you should select one');
112+
}else if(selected_ids.length>1){
113+
alert('you should select one')
114+
}else{
115+
document.getElementById('table_modal').style.display = 'block';
116+
document.getElementById('modal_new').style.display = 'none';
117+
document.getElementById('modal_edit').style.display = 'block';
118+
document.getElementById('modal_type').value = 'edit';
119+
document.getElementById('contact_id').value = -1;
120+
document.getElementById('submit').innerHTML = 'Save Changes';
121+
document.getElementById('modal_message').style.display = 'block';
122+
123+
// change modal data
124+
var _row = document.getElementById("table").rows[parseInt(selected_ids[0])-1].cells;
125+
console.log(_row);
126+
127+
document.getElementById('first_name').value= _row[1].innerHTML;
128+
document.getElementById('last_name').value = _row[2].innerHTML;
129+
document.getElementById('city').value = _row[3].innerHTML;
130+
document.getElementById('state').value = _row[4].innerHTML;
131+
document.getElementById('birthday').value = _row[5].innerHTML;
132+
document.getElementById('age').value = _row[6].innerHTML;
133+
document.getElementById('email').value = _row[7].innerHTML ;
134+
}
135+
}else{
136+
document.getElementById('table_modal').style.display = 'block';
137+
document.getElementById('modal_new').style.display = 'block';
138+
document.getElementById('modal_edit').style.display = 'none';
139+
document.getElementById('modal_type').value = 'create';
140+
document.getElementById('submit').innerHTML = 'Add Contact';
141+
}
142+
}
143+
144+
// delete
145+
function deleteContact() {
146+
selected_ids = [];
147+
var contactIds = document.getElementsByName('select_contact_id');
148+
for(var i=0;i<contactIds.length;i++){
149+
if(contactIds[i].checked){
150+
selected_ids.push(contactIds[i].value);
151+
}
152+
}
153+
if(selected_ids.length<1){
154+
alert('you should select one')
155+
}
156+
console.log(selected_ids.toString());
157+
for(var j=0;j<selected_ids.length;j++){
158+
document.getElementById("table").deleteRow(selected_ids[j]-1);
159+
}
160+
161+
}
162+
// save change
163+
function submit(e) {
164+
var state = document.getElementById('modal_type').value;
165+
// stop form submit
166+
if(e && e.preventDefault){
167+
e.preventDefault();
168+
}else{
169+
window.event.returnValue = false;
170+
}
171+
if(state =='create'){
172+
var id = document.getElementById('table').rows.length+1;
173+
var chk="<td><input type='checkbox' name='select_contact_id' id='chk_"+id+"' value='"+id+"'/></td>";
174+
var table = document.getElementById("table");
175+
var row = table.insertRow(id-1);
176+
var cell1 = row.insertCell(0);
177+
var cell2 = row.insertCell(1);
178+
var cell3 = row.insertCell(2);
179+
var cell4 = row.insertCell(3);
180+
var cell5 = row.insertCell(4);
181+
var cell6 = row.insertCell(5);
182+
var cell7 = row.insertCell(6);
183+
var cell8 = row.insertCell(7);
184+
cell1.innerHTML = chk;
185+
cell2.innerHTML = document.getElementById('first_name').value;
186+
cell3.innerHTML = document.getElementById('last_name').value;
187+
cell4.innerHTML = document.getElementById('city').value;
188+
cell5.innerHTML = document.getElementById('state').value;
189+
cell6.innerHTML = document.getElementById('birthday').value;
190+
cell7.innerHTML = document.getElementById('age').value;
191+
cell8.innerHTML = document.getElementById('email').value;
192+
document.getElementById('table_modal').style.display = 'none';
193+
}else{
194+
// edit
195+
console.log(selected_ids);
196+
var _row = document.getElementById("table").rows[parseInt(selected_ids[0])-1].cells;
197+
console.log(_row);
198+
_row[1].innerHTML = document.getElementById('first_name').value;
199+
_row[2].innerHTML = document.getElementById('last_name').value;
200+
_row[3].innerHTML = document.getElementById('city').value;
201+
_row[4].innerHTML = document.getElementById('state').value;
202+
_row[5].innerHTML = document.getElementById('birthday').value;
203+
_row[6].innerHTML = document.getElementById('age').value;
204+
_row[7].innerHTML = document.getElementById('email').value;
205+
// _row[8].innerHTML =
206+
document.getElementById('table_modal').style.display = 'none';
207+
}
208+
209+
}
210+
// close Modal
211+
function closeModal() {
212+
document.getElementById('table_modal').style.display = 'none';
213+
}
214+
// select all contacts
215+
function selectAll() {
216+
var contactIds = document.getElementsByName('select_contact_id');
217+
var is_check_all = document.getElementById('myCheck').value;
218+
for(var i=0;i<contactIds.length;i++){
219+
contactIds[i].checked = is_check_all == 'in' ? false : true;
220+
}
221+
if(is_check_all == 'in'){
222+
document.getElementById('myCheck').value = 'out';
223+
}else{
224+
document.getElementById('myCheck').value = 'in'
225+
}
226+
}
227+
</script>
228+
229+
</body>
230+
</html>
231+
232+
233+
<!--
234+
235+
/*
236+
237+
design check box attibute true or false go through 1st column
238+
239+
240+
show tables
241+
242+
use dbname
243+
244+
select now
245+
select version
246+
247+
show grants;
248+
249+
demiliter //
250+
251+
select now;
252+
253+
create procedure
254+
//
255+
256+
drop procedure
257+
//
258+
259+
select * from Classes;
260+
261+
insert into
262+
263+
264+
create
265+
read
266+
update
267+
delete
268+
269+
client side scripting - js
270+
vs
271+
server side scripting - php
272+
difference is where it is executed at
273+
274+
275+
username = dbname
276+
277+
278+
ajax //does something else in the backgroud when page is loading
279+
280+
281+
282+

0 commit comments

Comments
 (0)