Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 68d0431

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /