<a> 标签的隐含附带效果就是跳转页面到其它地方,而提交表单时应该有一个隐含附带的让浏览器触发提交表单的效果,
它就与 button 默认的行为不一样了。所以我们根据这点来区分我们应该用 button 还是用 input 或 a 标签。
今天遇到一个难题,代码如下, 不管我怎么弄,点击“增加”按钮,都不会复制表单,准确的说是表单只是闪现一下,console却能得到想要的复制表单效果,最后试着把button改成a, 结果就出来了。。。。。
<form class="form-horizontal">
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Membership Card:</label>
<div class="col-sm-9 col-xs-12" id="big-box" style="padding-left: 0px;">
<div class="col-sm-12 col-xs-12" id="small-box" style="padding-left: 0px;">
<div class="col-sm-3 col-xs-7" style="padding-right: 0px;">
<select class="form-control" name="Cardss">
<option value="SingleCard">Single Card</option>
<option value="MonthCard">Month Card</option>
<option value="SeasonCard">Season Card</option>
<option value="HalfyearCard">Half year Card</option>
<option value="AnnualCard">Annual Card</option>
</select>
</div>
<div class="col-sm-4 col-xs-3" style="padding-left: 0px;">
<input type="text" class="form-control" id="inputDate" placeholder="" name="ActivityPrices">
</div>
<div class="col-sm-1 col-xs-1 " style="padding:0px;margin-top:5px;margin-left:-12px;font-size:14px;font-weight: bold;">RMB</div>
<div class="col-sm-1 col-xs-1" style="padding: 0px;margin-left: -20px;">
<a type="button" style="padding: 0px; background:#fff;border-radius:16px;border:2px solid #fff;"><img id="add" src="__PUBLIC__/Home/img/Add.png"><img id="delete" src="__PUBLIC__/Home/img/delete.png" style="display: none;"></a>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="inputNumber" class="col-sm-2 col-sm-offset-1 control-label"></label>
<div class="col-sm-6 col-xs-6 col-sm-offset-2 col-xs-offset-4" style="margin-top:10px;">
<a type="button" class="btn btn-primary" id="Release" >Release </a>
</div>
</div>
</form>
<script language="javascript">
$(function(){
$("#add").click(function(){
$("#small-box").clone(true).appendTo("#big-box")
.find("input").val("")
.end().find("img").toggle();
});
$("#delete").click(function(){
var self = $(this);
self.closest("#small-box").remove();
});
$("#Release").click(function(){
var dd = new Array();
var cc = document.getElementsByName("Cardss");
var aa = document.getElementsByName("ActivityPrices");
for(var j=0;j<cc.length;j++){
var mm = cc[j].value;
var pp = aa[j].value;
if(pp !=""){
dd.push(mm);
}
}
console.log(dd);
});
});
</script>