将 html 表单输入映射到新形成的元素内的 javascript 对象
Mapping html form input to javascript object inside a newly formed element
我有以下html。请看一下,我会在我们进行时解释问题。
<table>
<tbody>
<tr id="<?php echo $record['id']?>" style="...">
<td><?php echo $record['id']; ?></td>
<td><?php echo $record['url']; ?></td>
<td><input type="button" name="edit" value="Edit" onclick="edit(<?php echo ($record['id'])?>)"></td>
</tr>
</tbody>
</table>
我在这里想要实现的是,当我单击 "Edit" 按钮时,它会清除该字段并在其位置创建新的空字段,以便再次输入这些详细信息并代替编辑按钮,出现更新按钮。
这是编辑功能的样子:
<script>
function edit(id){
var element = document.getElementById(id);
$(element).empty();
$(element).append("<td><input name='id' value="+id+" disabled></td>" +
"<td><input type='text' name='url' ></td>" +
"<td><input type='text' name='title'></td>" +
"<td><input type='button' value='Update' onclick='testFunction()'></td>");
}
更新按钮会触发一个名为 testFunction 的函数。现在在这个 testFunction 中,我想将新值发送到我用 jQuery 创建的新表单中,这样我就可以将这些值发送到 MySQL 以便更新 title 的新值给定的 ID。
请查看代码并告诉我应该如何解决这个问题?
var testFunction = function(newID){
console.log("This is the NEW id of the object that we are changing----->");
console.log(newID);
console.log("--------------------------END------------------");
$.post( "update", { id: newID})
.done(function( ) {
document.getElementById(id).style.display = "none";
});
};
</script>
//test record
var record = {
id: 12345,
title: 'Some title',
url: 'https://whosebug.com/posts/45861223/edit'
};
function action(id) {
var $element = $('#' + id),
$title = $('[name=title]', $element),
$url = $('[name=url]', $element),
$btn = $('[type=button]', $element),
isUpdate = ($btn.attr('value') != 'Edit');
$title.prop('readOnly', isUpdate);
$url.prop('readOnly', isUpdate);
$btn.attr('value', isUpdate ? 'Edit' : 'Update');
if (isUpdate) {
// show some loading mask
$.post("update", {
title: $title.val(),
url: $url.val(),
id: id
})
.done(function() {
// here you have the new id from the server
// hide the loading mask
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="12345">
<td><input type='text' name='title' value="Some title" readOnly></td>
<td><input type='text' name='url' value="https://whosebug.com/posts/45861223/edit" readOnly></td>
<td><input type="button" name="edit" value="Edit" onclick="action(12345)"></td>
</tr>
</tbody>
</table>
我有以下html。请看一下,我会在我们进行时解释问题。
<table>
<tbody>
<tr id="<?php echo $record['id']?>" style="...">
<td><?php echo $record['id']; ?></td>
<td><?php echo $record['url']; ?></td>
<td><input type="button" name="edit" value="Edit" onclick="edit(<?php echo ($record['id'])?>)"></td>
</tr>
</tbody>
</table>
我在这里想要实现的是,当我单击 "Edit" 按钮时,它会清除该字段并在其位置创建新的空字段,以便再次输入这些详细信息并代替编辑按钮,出现更新按钮。
这是编辑功能的样子:
<script>
function edit(id){
var element = document.getElementById(id);
$(element).empty();
$(element).append("<td><input name='id' value="+id+" disabled></td>" +
"<td><input type='text' name='url' ></td>" +
"<td><input type='text' name='title'></td>" +
"<td><input type='button' value='Update' onclick='testFunction()'></td>");
}
更新按钮会触发一个名为 testFunction 的函数。现在在这个 testFunction 中,我想将新值发送到我用 jQuery 创建的新表单中,这样我就可以将这些值发送到 MySQL 以便更新 title 的新值给定的 ID。
请查看代码并告诉我应该如何解决这个问题?
var testFunction = function(newID){
console.log("This is the NEW id of the object that we are changing----->");
console.log(newID);
console.log("--------------------------END------------------");
$.post( "update", { id: newID})
.done(function( ) {
document.getElementById(id).style.display = "none";
});
};
</script>
//test record
var record = {
id: 12345,
title: 'Some title',
url: 'https://whosebug.com/posts/45861223/edit'
};
function action(id) {
var $element = $('#' + id),
$title = $('[name=title]', $element),
$url = $('[name=url]', $element),
$btn = $('[type=button]', $element),
isUpdate = ($btn.attr('value') != 'Edit');
$title.prop('readOnly', isUpdate);
$url.prop('readOnly', isUpdate);
$btn.attr('value', isUpdate ? 'Edit' : 'Update');
if (isUpdate) {
// show some loading mask
$.post("update", {
title: $title.val(),
url: $url.val(),
id: id
})
.done(function() {
// here you have the new id from the server
// hide the loading mask
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="12345">
<td><input type='text' name='title' value="Some title" readOnly></td>
<td><input type='text' name='url' value="https://whosebug.com/posts/45861223/edit" readOnly></td>
<td><input type="button" name="edit" value="Edit" onclick="action(12345)"></td>
</tr>
</tbody>
</table>