我有这个脚本来附加一组输入字段，它工作正常，但我需要一个选项来删除/取消附加，而不影响其他附加字段。例如，我点击追加按钮 5 次，它给了我 5 组输入字段，但我决定删除第 4 组。我该如何处理？我的表单数据正在提交到 mysql 数据库。
这是我的附加代码:
<script type="text/javascript">
var oncount = 0;
$(function(){
$('a#add_field_online').click(function(e){
e.preventDefault();
oncount += 1;
$('#activation').append(
'<div class="row-fluid">'
+'<div class="span12" style="border-bottom:1px #dddddd; background-color:#cac6c6; ">'
+'<div style="float:left; width:5%;">'
+'<label> </label>'
+'<input type="radio" id="oprocess_where' + oncount + '" name="oprocess_where' + oncount + '" value="Online" checked >Online'
+'</div>'
+'<div style="float:left; width:7%">'
+'<label> </label>'
+'<select name="ostatus' + oncount + '" id="ostatus' + oncount + '" class="input-small">'
+'<option value="Ghost">Ghost</option>'
+'<option value="Actual">Actual</option>'
+'</select>'
+'</div>'
+'<div style="float:left; width: 7%">'
+'<label>Type</label>'
+'<select id="oupg' + oncount + '" name="oupg' + oncount + '" class="input-small" >'
+'<option value="" selected=" " > </option>'
+'<option value="Exp" >Exp</option>'
+'<option value="Post" >Post</option>'
+'<option value="Upgrade" >Upg</option>'
+'<option value="Retail" >Retail</option>'
+'</select>'
+'</div>'
+'<div style="float:left; width: 8%">'
+'<label>F.U.D</label>'
+'<input id="oupg_date' + oncount + '" name="oupg_date' + oncount + '" type="text" class="input-small" />'
+'</div> '
+'<div style="float:left; width: 11%">'
+'<label>Phone Used</label>'
+'<select id="ophone_used' + oncount + '" name="ophone_used' + oncount + '" class="input-medium" >'
+'<option value="" selected=" " > </option>'
+'<option value="Basic" >Basic</option>'
+'<option value="LTE" >LTE</option>'
+'<option value="iPhone 4/4S" >iPhone 4/4S</option>'
+'<option value="iPhone LTE" >iPhone LTE</option>'
+'<option value="BlackBerry" >BlackBerry</option>'
+'<option value="3G/4G" >3G/4G</option>'
+'<option value="Data Block / Smartphone" >Data Block / Smartphone</option>'
+'</select>'
+'</div>'
+'<div id="odataBasic' + oncount + '" style="float:left; width: 12%;">'
+'<label>Data Plan</label>'
+'<select id="odata' + oncount + '" name="odata' + oncount + '" class="input-medium" >'
+'<option value="" selected=" " > </option>'
+'<option value="DDL" >DDL</option>'
+'<option value="DPPU" >DPPU</option>'
+'<option value="Data Block" >Data Block</option>'
+'<option value="$10" >$10</option>'
+'<option value="$15" >$15</option>'
+'</select>'
+'</div>'
+'<div id="odataSmart' + oncount + '" style="float:left; width: 12%; display: none;">'
+'<label>Data Plan</label>'
+'<select id="odatasmart' + oncount + '" name="odatasmart' + oncount + '" class="input-medium" >'
+'<option value="" selected=" " > </option>'
+'<option value="$15" >$15</option>'
+'<option value="$20" >$20</option>'
+'<option value="$25" >$25</option>'
+'<option value="$30" >$30</option>'
+'</select>'
+'</div>'
+'<div id="odivmessaging' + count + '" style="float:left; width: 11%">'
+'<label>Messaging</label>'
+'<select id="omessaging' + oncount + '" name="omessaging' + oncount + '" class="input-medium" >'
+'<option value="" selected=" " > </option>'
+'<option value="$5" >$5</option>'
+'<option value="$10" >$10</option>'
+'<option value="$15" >$15</option>'
+'<option value="$20" >$20</option>'
+'<option value="$30" >$30</option>'
+'</select>'
+'</div>'
+'<div style="float:left; width: 8%">'
+'<label>Rate Plan</label>'
+'<input id="orate' + oncount + '" name="orate' + oncount + '" type="text" class="input-small" />'
+'</div> '
+'<div style="float:left; width: 8%">'
+'<label>Phone Number</label>'
+'<input id="onumber_act' + oncount + '" name="onumber_act' + oncount + '" type="text" maxlength="10" class="input-small" />'
+'</div>'
+'<div style="float:left; width: 12%">'
+'<label>Notes / Username </label>'
+'<input id="onotes' + oncount + '" name="onotes' + oncount + '" type="text" class="input-medium"/>'
+'<input type="hidden" name="oncounter[]" value="1">'
+'</div>'
+'</div>'
+'</div>'
);
$("#ophone_used"+ oncount).change(function(){
if ($("#ophone_used"+ oncount).val() == "Basic") {
('#odataBasic'+ oncount).show();
$('#odataSmart'+ oncount).hide();
} else {
$('#odataBasic'+ oncount).hide();
$('#odataSmart'+ oncount).show();
}
});
});
});
这是我的追加按钮
<a href="#" class="btn btn-mini btn-danger" id="add_field"><span>Add In-Store Activation</span></a>
My SQL 提交
if(is_array($_POST[oncounter]))
{
$oncount=count($_POST[oncounter]);
for($o=0;$o<=$oncount;$o++)
{
$oprocess_where = mysql_real_escape_string(stripslashes(htmlentities($_POST["oprocess_where".$o.""])));
$ostatus = mysql_real_escape_string(stripslashes(htmlentities($_POST["ostatus".$o.""])));
$oupg = mysql_real_escape_string(stripslashes(htmlentities($_POST["oupg".$o.""])));
$oupg_date = date('Y-m-d', strtotime($_POST["oupg_date".$o.""]));
$ophone_used = mysql_real_escape_string(stripslashes(htmlentities($_POST["ophone_used".$o.""])));
$odata = mysql_real_escape_string(stripslashes(htmlentities($_POST["odata".$o.""])));
$odatasmart = mysql_real_escape_string(stripslashes(htmlentities($_POST["odatasmart".$o.""])));
$omessaging = mysql_real_escape_string(stripslashes(htmlentities($_POST["omessaging".$o.""])));
$orate = mysql_real_escape_string(stripslashes(htmlentities($_POST["orate".$o.""])));
$onumber_act = mysql_real_escape_string(stripslashes(htmlentities($_POST["onumber_act".$o.""])));
$onotes = mysql_real_escape_string(stripslashes(htmlentities($_POST["onotes".$o.""])));
$oorderStatus = "Pending";
$oinstore= 0;
$oonline = 1;
$opending = 1;
if($oprocess_where !="")
{
$query="insert into phone_details (process_where, status, upg, upg_date, phone_used, data, datasmart, messaging, rate, number_act, notes, dealID, custID, orderStatus, online, instore, pending)
values ('".$oprocess_where."','".$ostatus."','".$oupg."','".$oupg_date."','".$ophone_used."','".$odata."','".$odatasmart."','".$omessaging."','".$orate."','".$onumber_act."','".$onotes."', '$dealID', $custID, '$oorderStatus', $oonline, $oinstore, $opending)";
mysql_query($query) or die(mysql_error());
}
}
}
最佳答案
在该 div 的某处添加一个按钮
$('#activation').append(
'<div class="row-fluid removethisrow"><button class="remove">Remove</button>'
使用 .on() 预绑定(bind)该按钮(以 .live() 的工作方式)，因此该 JQ 可以超出附加功能.
$('#activation').on('click', '.remove', function(){
$(this).closest('.removethisrow').remove();
});
...
但我不会使用 name="ostatus' + oncount + '" 我会将该值放入行的 div 中，以防我需要定位其中的内容
$('#activation').append(
'<div class="row-fluid removethisrow" id="oncount_' + oncount + '"><button class="remove">Remove</button>'
并使用 post 数组，因此一旦发送到服务器，oncount 实际上并不相关。
或者
<input type="radio" name="oprocess_where[]" class="oprocess_where" ... />
和
if(is_array($_POST[oprocess_where])) {
for ($i=0; $i<count($_POST['oprocess_where']); $i++){
$oprocess_where = mysql_real_escape_string(stripslashes(htmlentities($_POST["oprocess_where"][$i])));
$ostatus = mysql_real_escape_string(stripslashes(htmlentities($_POST["ostatus"][$i])));
或
<input type="radio" name="rows[]['oprocess_where']" class="oprocess_where" ... />
和
if(is_array($_POST[rows])) {
foreach ($_POST['rows'] as $row) {
$oprocess_where = mysql_real_escape_string(stripslashes(htmlentities($row["oprocess_where"])));
$ostatus = mysql_real_escape_string(stripslashes(htmlentities($row["ostatus"])));
...
但是我不会多次执行mysql_real_escape_string(stripslashes(htmlentities)
foreach ($_POST['rows'] as $row) {
foreach (explode(' ','oprocess_where ostatus oupg oupg_date etc')) as $allowed) {
$insert[$allowed]=mysql_real_escape_string(stripslashes(htmlentities($row[$allowed])));
}
$sql='INSERT INTO phone_details ('.implode(array_keys($insert)).') VALUES ('.implode($insert).')';
}
关于php - 如何取消追加，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14077376/