我正在处理小型项目..在一个模块中,我需要使用多个表单进行一些输入。并且我需要在添加每个值之后在同一页面中显示添加的表单数据(相应的表数据)。 因此,该用户将知道他插入了什么数据。
请看代码。
<div class="container">
<div class="row">
<br><br>
<h4> School Name: <?php echo $sn; ?>
</h4>
</div>
</div>
<div class="container col-md-offset-1 col-md-7">
<h3>Budget/Students Count:</h3>
<br>
<ul class="nav nav-tabs">
<li class="active"><a href="#home">K6</a></li>
<li><a href="#menu1">K7</a></li>
<li><a href="#menu2">K8</a></li>
<li><a href="#menu3">K9</a></li>
<li><a href="#menu4">K10</a></li>
<li><a href="#menu5">K11 SC</a></li>
<li><a href="#menu6">K12 SC</a></li>
<li><a href="#menu7">K11 NSC</a></li>
<li><a href="#menu8">K12 NSC</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<form name="add_name" id="add_name" class="col-md-5">
<table class="table" id="dynamic_field">
<tr>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:12px;">Section</label></td>
<td><label style="font-size:12px;">#of students</label> </td>
<td><label style="font-size:10px;"></label></td>
</tr>
<tr>
<td> <input type="text" name="idref" id="idref" class="form-control input-xs" value="<?php echo $idk; ?>" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> K6: <input type="text" name="clas" id="clas" class="form-control input-xs" value="6" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> <input type="text" name="k[]" id="k" class="form-control k_list " style="width:45px; height:28px"> </td>
<td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:80px; height:28px"> </td>
<td> <button type="button" name="add" id="add" class="btn btn-success btn-xs">add</button> </td>
</tr>
</table>
<input type="submit" name="submit" id="submit" value="submit" class="btn-success btn-xs" style="margin-left:170px;">
<input type="reset" name="Reset" class="btn-success btn-xs">
</form>
</div>
<div id="menu1" class="tab-pane fade">
<form name="add_name1" id="add_name1" class="col-md-5">
<table class="table" id="dynamic_field1">
<tr>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:12px;">Section</label></td>
<td><label style="font-size:12px;">#of students</label> </td>
</tr>
<tr>
<td> <input type="text" name="idref" id="idref" class="form-control input-xs" value="<?php echo $idk; ?>" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> K7: <input type="text" name="clas" id="clas" class="form-control input-xs" value="7" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> <input type="text" name="k[]" id="k" class="form-control k_list" style="width:45px; height:28px"> </td>
<td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:80px; height:28px"> </td>
<td> <button type="button" name="add" id="add1" class="btn btn-success btn-xs">add</button> </td>
</tr>
</table>
<input type="submit" name="submit" id="submit1" value="submit" class="btn-success btn-xs" style="margin-left:170px;">
<input type="reset" name="Reset" class="btn-success btn-xs">
</form>
</div>
<div id="menu2" class="tab-pane fade">
<form name="add_name2" id="add_name2" class="col-md-5">
<table class="table" id="dynamic_field2">
<tr>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:12px;">Section</label></td>
<td><label style="font-size:12px;">#of students</label> </td>
</tr>
<tr>
<td> <input type="text" name="idref" id="idref" class="form-control input-xs" value="<?php echo $idk; ?>" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> K8: <input type="text" name="clas" id="clas" class="form-control input-xs" value="8" style="width:35px; height:20px; visibility: hidden;"> </td>
<td> <input type="text" name="k[]" id="k" class="form-control k_list" style="width:45px; height:28px"> </td>
<td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:80px; height:28px"> </td>
<td> <button type="button" name="add" id="add2" class="btn btn-success btn-xs">add</button> </td>
</tr>
</table>
<input type="submit" name="submit" id="submit2" value="submit" class="btn-success btn-xs" style="margin-left:170px;">
<input type="reset" name="Reset" class="btn-success btn-xs">
</form>
</div>
&#13;
脚本:
$(document).ready(function() {
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
$(function() {
var i = 1;
$("#add").click(function() {
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td></td><td></td><td> <input type="text" name="k[]" id="k'+i+'" class="form-control name_list" style="width:35px; height:20px" > </td><td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:55px; height:20px"> </td><td> <button name="remove" id="'+i+'" class="btn btn-danger btn_remove btn-xs">X</button> </td></tr>');
});
$(document).on('click','.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("#add1").click(function() {
i++;
$('#dynamic_field1').append('<tr id="row'+i+'"><td></td><td></td><td> <input type="text" name="k[]" id="k'+i+'" class="form-control name_list" style="width:35px; height:20px" > </td><td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:55px; height:20px"> </td><td> <button name="remove" id="'+i+'" class="btn btn-danger btn_remove btn-xs">X</button> </td></tr>');
});
$(document).on('click','.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$('#submit').click(function() {
$.ajax({
url: "section.php",
data: $('#add_name').serialize(),
success: function(data) {
alert(data);
$('#add_name')[0].reset();
}
});
});
$('#submit1').click(function() {
$.ajax({
url: "section.php",
data: $('#add_name1').serialize(),
success: function(data) {
alert(data);
$('#add_name1')[0].reset();
}
});
});
&#13;
在section.php中我编写了sql查询插入。 现在我需要的是,我需要将输入的数据显示在同一页面中。每次添加新值时都应更新表格。
答案 0 :(得分:1)
$.ajax({
type:"GET",
url:"path/to/file",
data: 'your data',
success:function(html){
$('.response').html(html); //this return response to your page
}
})