编辑001:
加入:
- event.preventDefault();
和锚点而不是按钮
<div class="edit-area">
<div class="controls">
<a href="#" class="add">+</a>
<a href="#" class="rem">-</a>
</div>
</div>
现在页面+
或-
不会让页面发送表单,但现在它什么都不做:s
我正在撰写联系表格,但我有一些问题/问题。
当我现在按下+按钮时,它会尝试像提交按钮一样发送表单......
脚本
<script>
(function($) {
"use strict";
var itemTemplate = $('.example-template').detach(),
editArea = $('.edit-area'),
itemNumber = 1;
$(document).on('click', '.edit-area .add', function(event) {
var item = itemTemplate.clone();
item.find('[project]').attr('project', function() {
return $(this).attr('project') + '_' + itemNumber;
});
++itemNumber;
item.appendTo(editArea);
});
$(document).on('click', '.edit-area .rem', function(event) {
editArea.children('.example-template').last().remove();
});
$(document).on('click', '.edit-area .del', function(event) {
var target = $(event.target),
row = target.closest('.example-template');
row.remove();
});
}(jQuery));
</script>
HTML
<form action="<? echo $_SERVER['PHP_SELF']; ?>" method="POST" name="contact">
<div class="row uniform 50%">
<div class="6u 12u(mobilep)">
Your personal card number
<input type="text" name="card2" id="card" value="<?php echo $_SESSION['username']; ?>" placeholder="Card Number" readonly/>
</div>
<div class="6u 12u(mobilep)">
Your name
<input type="text" name="name2" id="name" value="<?php echo $_SESSION['realName']; ?>" placeholder="Your name" readonly/>
</div>
</div>
<div class="row uniform 50%">
<div class="6u 12u(narrower)">
Order tickets for a project.
</div>
</div>
<div class="example-template">
<div class="row uniform 50%" id="readroot">
<div class="4u 12u(narrower)">
<select name="project" id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
<option disabled selected>Select a project</option>
<option value="Smile">Project Smile</option>
<option value="Sand">Project Sand</option>
<option value="Schmuck">Project Schmuck</option>
</select>
</div>
<div class="4u 12u(narrower)">
<select id="ddl2" name="date">
<option disabled selected>Select a date</option>
</select>
</div>
<div class="2u 12u(narrower)">
<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' name="amount" id="currentamount" value="" placeholder="Amount" />
</div>
</div>
<div class="edit-area">
<div class="controls">
<button class="add">+</button>
<button class="rem">-</button>
</div>
</div>
<div class="row uniform 50%">
<div class="6u 12u(mobilep)">
<input type="hidden" id="currentprice" value="10" />
</div>
</div>
<div class="6u 12u(mobilep)">
<input type="hidden" id="nextprice1" value="10" placeholder="" />
</div>
</div>
<div class="row uniform">
<div class="12u">
</div>
</div>
<div class="4u 12u(mobilep)">
Total price.(In EUR)
<input type="text" name="total2" id="total" value="" readonly/>
</div>
<div class="row uniform">
<div class="12u">
<ul class="actions align-center">
<li><input type="submit" name="submit"value="Place Order"/></li>
</ul>
</div>
</div>
</form>
表单图片(此处未显示ID和名称)
答案 0 :(得分:2)
将按钮更改为锚点:
<a href="#" class="add">+</a>
<a href="#" class="rem">-</a>
然后在您的javascript中,点击后,请务必致电preventDefault()
以阻止其行为与标准链接相同。
$(document).on('click', '.edit-area .rem', function(event) {
event.preventDefault();
editArea.children('.example-template').last().remove();
});
$(document).on('click', '.edit-area .del', function(event) {
event.preventDefault();
var target = $(event.target),
row = target.closest('.example-template');
row.remove();
});
我认为,您可以在按钮中添加type
,因此它不会默认为submit
类型(但请不要引用我):
<button type="button" class="add">+</button>