我的表格存在冲突问题。我的想法是，我需要将表单字段中的数据存储在Javascript中具有本地存储的表中，并且我需要使用PHP同时发送带有相同按钮的电子邮件。当我尝试它时，按钮实现表，或者它发送邮件。它取决于箭头内部动作的位置。这是我的代码：
<script>
var Contacts = {
index: window.localStorage.getItem("Contacts:index"),
$table: document.getElementById("contacts-table"),
$form: document.getElementById("contacts-form"),
$button_save: document.getElementById("contacts-op-save"),
$button_discard: document.getElementById("contacts-op-discard"),
init: function() {
// initialize storage index
if (!Contacts.index) {
window.localStorage.setItem("Contacts:index", Contacts.index = 1);
}
// initialize form
Contacts.$form.reset();
Contacts.$button_discard.addEventListener("click", function(event) {
Contacts.$form.reset();
Contacts.$form.id_entry.value = 0;
}, true);
Contacts.$form.addEventListener("submit", function(event) {
var entry = {
id: parseInt(this.id_entry.value),
first_name: this.first_name.value,
last_name: this.last_name.value,
company: this.company.value,
address: this.address.value,
city: this.city.value,
zip: this.zip.value,
state: this.state.value,
country: this.country.value,
phone: this.phone.value,
email: this.email.value,
nature_of_contact: this.nature_of_contact.value,
};
if (entry.id == 0) { // add
Contacts.storeAdd(entry);
Contacts.tableAdd(entry);
}
else { // edit
Contacts.storeEdit(entry);
Contacts.tableEdit(entry);
}
this.reset();
this.id_entry.value = 0;
event.preventDefault();
}, true);
// initialize table
if (window.localStorage.length - 1) {
var contacts_list = [], i, key;
for (i = 0; i < window.localStorage.length; i++) {
key = window.localStorage.key(i);
if (/Contacts:\d+/.test(key)) {
contacts_list.push(JSON.parse(window.localStorage.getItem(key)));
}
}
if (contacts_list.length) {
contacts_list
.sort(function(a, b) {
return a.id < b.id ? -1 : (a.id > b.id ? 1 : 0);
})
.forEach(Contacts.tableAdd);
}
}
Contacts.$table.addEventListener("click", function(event) {
var op = event.target.getAttribute("data-op");
if (/edit|remove/.test(op)) {
var entry = JSON.parse(window.localStorage.getItem("Contacts:"+ event.target.getAttribute("data-id")));
if (op == "edit") {
Contacts.$form.first_name.value = entry.first_name;
Contacts.$form.last_name.value = entry.last_name;
Contacts.$form.company.value = entry.company;
Contacts.$form.address.value = entry.address;
Contacts.$form.city.value = entry.city;
Contacts.$form.zip.value = entry.zip;
Contacts.$form.state.value = entry.state;
Contacts.$form.country.value = entry.country;
Contacts.$form.phone.value = entry.phone;
Contacts.$form.email.value = entry.email;
Contacts.$form.nature_of_contact.value = entry.nature_of_contact;
Contacts.$form.id_entry.value = entry.id;
}
else if (op == "remove") {
if (confirm('Are you sure you want to remove "'+ entry.first_name +' '+ entry.last_name +'" from your contacts?')) {
Contacts.storeRemove(entry);
Contacts.tableRemove(entry);
}
}
event.preventDefault();
}
}, true);
},
storeAdd: function(entry) {
entry.id = Contacts.index;
window.localStorage.setItem("Contacts:index", ++Contacts.index);
window.localStorage.setItem("Contacts:"+ entry.id, JSON.stringify(entry));
},
storeEdit: function(entry) {
window.localStorage.setItem("Contacts:"+ entry.id, JSON.stringify(entry));
},
storeRemove: function(entry) {
window.localStorage.removeItem("Contacts:"+ entry.id);
},
tableAdd: function(entry) {
var $tr = document.createElement("tr"), $td, key;
for (key in entry) {
if (entry.hasOwnProperty(key)) {
$td = document.createElement("td");
$td.appendChild(document.createTextNode(entry[key]));
$tr.appendChild($td);
}
}
$td = document.createElement("td");
$td.innerHTML = '<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';
$tr.appendChild($td);
$tr.setAttribute("id", "entry-"+ entry.id);
Contacts.$table.appendChild($tr);
},
tableEdit: function(entry) {
var $tr = document.getElementById("entry-"+ entry.id), $td, key;
$tr.innerHTML = "";
for (key in entry) {
if (entry.hasOwnProperty(key)) {
$td = document.createElement("td");
$td.appendChild(document.createTextNode(entry[key]));
$tr.appendChild($td);
}
}
$td = document.createElement("td");
$td.innerHTML = '<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';
$tr.appendChild($td);
},
tableRemove: function(entry) {
Contacts.$table.removeChild(document.getElementById("entry-"+ entry.id));
}
};
Contacts.init();
</script><form action="mailer.php" method="post" class="onerow">
<label class="col6">First name:
<input type="text" name="first_name" />
</label>
<label class="col6">Last name:
<input type="text" name="last_name" />
</label>
<label class="col6">Company:
<input type="text" name="company" />
</label>
<label class="col6">Address:
<input type="text" name="address" />
</label>
<label class="col6">City:
<input type="text" name="city" />
</label>
<label class="col6">Postal/zip code:
<input type="text" name="zip" />
</label>
<label class="col6">State/province:
<input type="text" name="state" />
</label>
<label class="col6">Country:
<input type="text" name="country" />
</label>
<label class="col6">Phone number:
<input type="text" name="phone" />
</label>
<label class="col6">Email:
<input type="text" name="email" />
</label>
<label class="col12">Why are you looking for our solutions ?
<SELECT name="nature_of_contact" size="1">
<OPTION>I'm a distributor and I want to sell your products in my country.
<OPTION>I'm a beautician I want to buy a product.
<OPTION>I'm a doctor.
<OPTION>I'm a distributor.
</SELECT>
</label>
<div class="col12">
<input type="button" id="contacts-op-discard" value="Discard" />
<input type="submit" id="contacts-op-save" value="Save" />
<input type="hidden" name="id_entry" value="0" />
</div>
</form>
</div>
<div></div>
<div id="tablecontrol" class="col12">
<h1>Contacts</h1>
<table id="contacts-table">
<tr id="contacts-head">
<th>ID</th>
<th>First name</th>
<th>Last name</th>
<th>Company</th>
<th>Address</th>
<th>City</th>
<th>Postal/Zip</th>
<th>State/province</th>
<th>Country</th>
<th>Phone number</th>
<th>Email</th>
<th>Kind of prospect</th>
<th>Actions</th>
</tr>
</table>
</div>
</div>
请参阅https://developers.facebook.com/docs/facebook-login/social-context/v2.5
答案 0 :(得分：1)
一种方法是：
onClick()添加到其中。readFromdata() - 从表单中读取值。将数据存储到容器中。sendFromdata() - 将数据发送到您的php脚本。提示：Ajax将是你的朋友。配置您的Ajax，以便将数据异步发送。printFOverview() - 扩展你的html表，以显示结果。sendFromdata()内调用printFOverview()和readFromdata()，并将数据容器传递给这些方法。readFromdata()添加到属性onClick()。答案 1 :(得分：0)
您可以执行以下操作：
event.preventDefault() localStorage Contacts.$form.submit(); 修改
将事件处理程序从submit更改为click，然后将其从表单中删除，将其添加到Contacts.$button_save按钮，然后添加preventDefault()。
当您将事件处理程序从表单更改为按钮时，您需要将表单值从this更改为Contacts.$form，因为this位于表单的范围内案件了。
Contacts.$button_save.addEventListener("click", function(event) {
event.preventDefault();
var entry = {
id: parseInt(Contacts.$form.id_entry.value),
first_name: Contacts.$form.first_name.value,
last_name: Contacts.$form.last_name.value,
// and so on
删除input type="submit"并改为创建一个普通按钮：
<button id="contacts-op-save">Save</button>
然后，您可以在storeAdd / storeEdit函数存储后提交表单，如Contacts.$form.submit();所述。
storeAdd: function(entry) {
entry.id = Contacts.index;
window.localStorage.setItem("Contacts:index", ++Contacts.index);
window.localStorage.setItem("Contacts:"+ entry.id, JSON.stringify(entry));
Contacts.$form.submit();
},
storeEdit: function(entry) {
window.localStorage.setItem("Contacts:"+ entry.id, JSON.stringify(entry));
Contacts.$form.submit();
},
storeRemove: function(entry) {
window.localStorage.removeItem("Contacts:"+ entry.id);
// eventually here too?
Contacts.$form.submit();
},
您也可以通过其id调用表单元素，但表单没有分配id。
$form: document.getElementById("contacts-form")
所以给你的表格ID：
<form id="contacts-form" action="mailer.php" method="post" class="onerow">