Мне не понравилось что мы при любом изменении сразу же отправляем форму на сервер. Попробуем улучшить скрипт:
| Код | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
<title>Changer v0.1</title>
<script language="Javascript" type="text/javascript">
<!--
var Peoples={}; //в этом массиве будем сохранять изменения
function changeData(tr) {
var pl=new people(tr);
Peoples[pl.user_id]=pl;
//разметку напиши по вкусу или подгрузи документ
wn=window.open("about:blank","formulier","height=200, widht=300,location=no,resizable=no,scrollbars=no,toolbar=no");
wn.document.open();
wn.document.write("<html><body><form>\
<input type='hidden' name='id' value='"+pl.user_id+"'>\
Name:<input type='text' name='name' value='"+pl.name+"'><br>\
Adres:<input type='text' name='adres' value='"+pl.adres+"'><br>\
Phone:<input type='text' name='phone' value='"+pl.phone+"'><br>\
<input type='button' onClick='javascript: window.opener.set_data(this.form); window.close();' value='Done'></form></body></html>");
wn.document.close();
}
//сюда придут изменения
function set_data(frm) {
//check data
var name, adres, phone, tr=Peoples[frm.elements.id.value];
if((name=frm.elements.name.value)&&(adres=frm.elements.adres.value)&&(phone=frm.elements.phone.value)) {
tr.update_target(name,adres,phone);
}
}
//обьект представляющий запись изменений одного человека
function people(tr) {
this.target=tr;
this.name=tr.childNodes[0].firstChild.nodeValue;
this.adres=tr.childNodes[1].firstChild.nodeValue;
this.phone=tr.childNodes[2].firstChild.nodeValue;
this.user_id=tr.getAttribute("name");
this.update_target=function(nm,adres,phone) {
tr.childNodes[0].firstChild.nodeValue=this.name=nm;
tr.childNodes[1].firstChild.nodeValue=this.adres=adres;
tr.childNodes[2].firstChild.nodeValue=this.phone=phone;
}
}
//отправляем форму
function sendForm() {
var sf=document.getElementById('s_form');
var chlds=[];
for(i in Peoples) {
//столько полей, сколько данных
var chld=document.createElement('INPUT');
chld.type='hidden';
chld.name="usr_data['"+i+"']";
chld.value=(Peoples[i].name+"|"+Peoples[i].adres+"|"+Peoples[i].phone);
chlds.push(chld);
}
if(chlds.length>0) {
if(window.confirm("Сохранить "+chlds.length+" изменений?")) {
//если да то кидаем все в форму и отправляем
for(var i=0; i<chlds.length; i++) sf.appendChild(chlds[i]);
sf.submit();
}
} else alert("Вы не сделали изменений");
}
//-->
</script>
</head>
<body>
<table>
<tr><td>Name</td><td>Adress</td><td>Phone</td></tr>
<tbody>
<tr onClick="changeData(this)" name="ppl1"><td>Sardar</td><td>Someweg 67</td><td>032544523</td><tr>
<tr onClick="changeData(this)" name="ppl2"><td>Sardar</td><td>Someweg 67</td><td>032544523</td><tr>
</tbody>
</table>
<button onClick="sendForm()">Save changes</button>
<!-- Скрытая форма -->
<form id="s_form" action="http://localhost/recieve.php" style="display: none" method="POST" target="_self">
</form></body></html> |
Код на скорую руку, но проверил, он работает. Работает везде кроме Opera, так как она криво работает с аттрибутами html элементов - мне не удалось достать name(идентификатор записи).
На северре получаем массив $_POST['usr_data'], в котором лежат имя_tr=>значения|полей|через_вертикальную черту. Простейший код покажет все:
| Код | <pre>
<?php
print_r($_POST);
?>
</pre> |
|
