我目前正在构建一个动态表单,使用一些HTML,PHP和jQuery。此表单包含一个下拉选择字段(带有标记名称)和两个名为tag_text_color和tag_background_color的输入框。
当你在select字段中选择一个标签时,一些jQuery会用当前数据库值填充tag_text_color和tag_background_color框。
在此之前,我有一个允许用户在数据库中添加标签的表单。我在数据库中添加标记之前就出现了问题。
以下是添加标记的代码:
<form id="form_addtag" method="post" name="form_addtag" action="add_tag.php">
<legend>Add a tag</legend>
<input type="text" name="tag_name" id="tag_name" class="text" size="30" placeholder="Tag Name" />
<input type="text" name="tag_text_color" id="tag_text_color" class="text" size="6" placeholder="#ffffff"/>
<input type="text" name="tag_bg_color" id="tag_bg_color" class="text" size="6" placeholder="#000000" />
<button type="submit" id="button_save_tag">Add</button>
</form>
和jQuery对应的函数:
$( document ).ready(function() {
$("#form_addtag").submit(function(e) {
e.preventDefault();
var url = "add_tag.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#form_addtag").serialize(), // serializes the form's elements.
});
$('#form_addtag')[0].reset();
$("#form_edittag").load("demo.php #form_edittag")
});
添加标签工作正常,它可以完美地重新加载表单以编辑标签。但是,如果在此块中我选择了新标记,则jQuery
尚未加载它用于编辑代码的HTML:
<form id="form_edittag" method="post" name="form_edittag" action="edit_tag.php">
<legend>Edit a tag</legend>
<select id="select_edittag">
<?php
$tags = get_tags();
$numberOfTags = sizeof($tags);
var_dump($numberOfTags);
var_dump($tags);
foreach ($tags as $line)
{
echo("<option value='".$line["name"]."''>".$line["name"]."</option>");
}
//print("<option value='". $tags[ $j ]["name"]."'>".$tags[ $j ]["name"]."</option>");
?>
</select>
<input type="text" name="tag_text_color_edit" id="tag_text_color_edit" class="text" size="6" />
<input type="text" name="tag_bg_color_edit" id="tag_bg_color_edit" class="text" size="6" />
<button type="submit" id="button_edit_tag">Edit</button>
<button type="submit" id="button_delete_tag">Delete</button>
</form>
对应的jQuery:
$( document ).ready(function() {
$( document ).on( "change", "select#select_edittag", function()
{
var name = $("#select_edittag").val();
var tags = <?php echo json_encode(get_tags()); ?>;
$("#tag_text_color_edit").val(tags[name]["text_color"]);
$("#tag_bg_color_edit").val(tags[name]["background_color"]);
});
});
函数get_tags()将返回一个包含数据库中所有标记的数组。
我想每次在我的select&#34; select_edittag&#34;中选择一个新项目时它将运行脚本,并使用函数get_tags()中的最新内容更新tags变量。它并不遗憾。
有什么想法吗?如果你想要一个现场演示,我可以举办类似的东西