PHP,MySql和JQuery - 按添加按钮后填充选择框
PHP, MySql & JQuery - Filling select box after press add button
我有几个问题,我想你应该看看我的代码:)
- 当用户使用get-data.php单击添加按钮(或链接)时,我无法填写新的选择框。当用户单击添加按钮(或链接)时,将显示新表单包括新的选择框。当显示这些 html 元素时,我的脚本无法填充新的选择框元素。
- 当用户键入一些文本或填写所有元素时,他们添加新表单,他们以前的文本就消失了。
请指导我解决这个问题
提前致谢
这是我的HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
$(function(){
var items="";
$.getJSON("get-data.php",function(data){
$.each(data,function(index,item)
{
items+="<option value='"+item.id+"'>"+item.name+"</option>";
});
$("#mycollege").html(items);
});
});
</script>
<form id="contact-form" enctype="multipart/form-data" method="post" name="form1" target="_parent">
<fieldset>
<legend>EDUCATIONAL BACKGROUND</legend>
<label><span class="text-form">College:</span><input type="radio" name="rad_college[]" value="1" />
<select name="college[]" id="mycollege">
<option value="">Default</option>
</select>
<input type="radio" name="rad_college[]" value="2" />Other<input type="text" name="college[]" style="float: none; margin-left: 10px;" />
</label><br />
<label><span class="text-form">Ladder:</span><input type="text" name="id_ladder[]" /></label><br />
<label><span class="text-form">Majors:</span><input type="text" name="id_majors[]" /></label><br />
<label><span class="text-form">Period:</span><input type="text" name="period[]" /></label><br />
<label><span class="text-form">GPA:</span><input type="text" name="GPA[]" /></label><br />
<script type="text/javascript">
$(document).ready(function(){
var counter = 1;
$("#add").click(function () {
if(counter==800){
alert("Too many boxes");
return false;
}
$("#textBoxes").html($("#textBoxes").html() + "<div id='c"+counter+"' ><label for='t2'><span class='text-form'>College"+counter+":</span><input type='radio' name='rad_college"+counter+"[]' id='t"+counter+"' value='1' /><select name='college[]' id='mycollege'><option value=''>Default</option></select><input type='radio' name='rad_college"+counter+"[]' value='2' />Other<input type='text' name='college[]' style='float: none; margin-left: 10px;' /></label></div>'n");
$("#textBoxes").html($("#textBoxes").html() + "<div id='d"+counter+"' ><label for='t2'><span class='text-form'>Ladder"+counter+":</span><input type='text' name='id_ladder[]' id='t"+counter+"' /></label></div>'n");
$("#textBoxes").html($("#textBoxes").html() + "<div id='e"+counter+"' ><label for='t2'><span class='text-form'>Majors"+counter+":</span><input type='text' name='id_majors[]' id='t"+counter+"' /></label></div>'n");
$("#textBoxes").html($("#textBoxes").html() + "<div id='f"+counter+"' ><label for='t2'><span class='text-form'>Period"+counter+":</span><input type='text' name='period[]' id='t"+counter+"' /></label></div>'n");
$("#textBoxes").html($("#textBoxes").html() + "<div id='g"+counter+"' ><label for='t2'><span class='text-form'>GPA"+counter+":</span><input type='text' name='GPA[]' id='t"+counter+"' /></label><br /><br /></div>'n");
++counter;
});
$("#remove").click(function () {
if(counter==1){
alert("Can u see any boxes");
return false;
}
--counter;
$("#c"+counter).remove();
$("#d"+counter).remove();
$("#e"+counter).remove();
$("#f"+counter).remove();
$("#g"+counter).remove();
});
});
</script>
<div id="textBoxes">
<!-- <br /> -->
<br />
</div>
<br />
<a href="javascript:void(0)" id="add" class="button">add</a>
<a href="javascript:void(0)" id="remove" class="button">remove</a>
<br /><br /><br />
<input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="reset">
</fieldset>
</form>
</body>
</html>
这是我的PHP代码:(获取数据.php)
<?php
include 'configurations/db-connections.php';
$q = "select id, name from college";
$sql = mysql_query($q);
$data = array();
while($row = mysql_fetch_array($sql, true)){
$data[] = $row;
};
echo json_encode($data);
?>
根据您对我评论的回答,您需要先调试Javascript...,如果您不知道如何调试,请查看本教程:http://odetocode.com/blogs/scott/archive/2012/03/13/debugging-javascript-with-chrome.aspx
在您阅读并在您的代码上尝试后,让我知道似乎出了什么问题,我将编辑此答案,我会尽力帮助您解决问题。
相关文章:
- 点击填充输入的按钮&提交
- JavaScript:如何用变量填充单选按钮值和标签
- 可填充pdf绿色或红色标志按钮
- 单击按钮时填充javascript变量
- 如何用HTML中的JSON外部文件填充下拉按钮
- 如果在 HTML/JavaScript 中选中了复选框,则填充单选按钮
- 点击按钮后在css弹出窗口中填充valus
- 在引导模式中,点击相应的datatables行中的按钮,填充数据
- 如何在Mobile View中获得一个按钮来填充页脚的全宽
- 使用表单按钮填充文本输入
- 如何使用javascript用按钮填充表单列表
- 根据所选单选按钮填充文本框
- 如何使用按钮填充数据而不进行回发
- 如何根据选择的单选按钮填充文本框
- 用单击的按钮填充文本区域
- 基于单击的按钮填充字段值
- 用HTML和js中的按钮填充图像或矢量路径
- 为什么我的提交按钮填充
- 如何在Wordpress中让一个按钮填充Mailchimp弹出表单的模式
- 在GAS中单击按钮填充输入框