入力フィールドのセットを追加するこのスクリプトがあり、正常に動作しますが、他の追加フィールドに影響を与えずに追加を削除/キャンセルするオプションが必要です。たとえば、追加ボタンを 5 回クリックすると、入力フィールドが 5 セット表示されますが、セット 4 を削除することにしました。フォーム データが mysql db に送信されています。
ここに私の追加コードがあります:
<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>
私の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());
}
}
}