私はいくつかの問題を抱えています。私のコードを見るべきだと思いました:)
- ユーザーが 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コードです:(get-data.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);
?>