提交复选框的形式,显示在同一页面
问题描述:
嗨会员,我需要一些帮助在“格”,我有我想送一个div在同一页上的表单。 this is want I want to achieve 我有一个div名为篮子在我的页面,在这里我想发送表单的右上角浮动。所以一旦用户点击提交,订单就会显示在购物篮中。提交复选框的形式,显示在同一页面
我在努力寻找相关的信息,以做到这一点,我要问,如果有一个人能告诉我如何做到这一点,FYI我没有Ajax代码在呢。所以请尽可能保持基本。许多感谢的先进:)
<form id="payment">
<!-- select pizza section -->
<fieldset>
<legend> select your pizza </legend>
<p><input type="checkbox" name="pizza_size" value="select_pizza_size"> small<span class="price"> £5.50</span></p>
<p><input type="checkbox" name="pizza_size" value="select_pizza_size"> medium<span class="price"> £8.50</span></p>
<p><input type="checkbox" name="pizza_size" value="select_pizza_size"> large <span class="price"> £11.50</span></p>
</fieldset>
<!-- toppings section -->
<fieldset>
<legend> select one or more toppings </legend>
<p><input type="checkbox" name="topping" value="select_pizza_topping"> bacon <span class="price"> £0.20</span></p>
<p><input type="checkbox" name="topping" value="select_pizza_topping"> chicken <span class="price"> £0.20</span></p>
<p><input type="checkbox" name="topping" value="select_pizza_topping"> beef <span class="price"> £0.20</span></p>
<p><input type="checkbox" name="topping" value="select_pizza_topping"> sweetcorn <span class="price"> £0.20</span></p>
<p><input type="checkbox" name="topping" value="select_pizza_topping"> onion <span class="price"> £0.20</span></p>
<p><input type="checkbox" name="topping" value="select_pizza_topping"> peppers <span class="price"> £0.20</span></p>
<p><input type="checkbox" name="topping" value="select_pizza_topping"> sasauge <span class="price"> £0.20</span></p>
</fieldset>
<!-- extras section -->
<fieldset>
<legend>extras</legend>
<p><input type="checkbox" name="extras" value="extra_sides"> extra cheese <span class="price"> £0.50</span></p>
<p><input type="checkbox" name="extras" value="extra_sides"> chips <span class="price"> £1.50</span></p>
<p><input type="checkbox" name="extras" value="extra_sides"> cola <span class="price"> £0.50</span></p>
<p><input type="checkbox" name="extras" value="extra_sides"> fanta <span class="price"> £0.50</span></p>
</fieldset>
<!-- delivery info section -->
<fieldset>
<legend> delivery Information </legend>
<p><label> address line 1(*): </label> <input type="text" name="address" required></p>
<p><label> address line 2: </label> <input type="text" name="address"></p>
<p><label> post code(*): </label> <input type="text" name="post_code" required></p>
</fieldset>
<!-- Submit button -->
<div id="submit">
<input type="submit" class="submit_button" value="place order">
<input type="reset" class="reset_button" value="reset">
</div>
</form>
答
使用float
您的形式和结果的容器。只有更改添加了父div元素。 content-pane
尝试像下面。
.content-pane {
float: left;
width: 40%;
}
.details {
float: left;
width: 20%;
margin: 10px 0 0 30px;
padding: 10px;
border: 5px dashed green;
}
.details h2 {
text-align: center;
}
<div class="content-pane">
<form id="payment">
<!-- select pizza section -->
<fieldset>
<legend> select your pizza </legend>
<p>
<input type="checkbox" name="pizza_size" value="select_pizza_size"> small<span class="price"> £5.50</span></p>
<p>
<input type="checkbox" name="pizza_size" value="select_pizza_size"> medium<span class="price"> £8.50</span></p>
<p>
<input type="checkbox" name="pizza_size" value="select_pizza_size"> large <span class="price"> £11.50</span></p>
</fieldset>
<!-- toppings section -->
<fieldset>
<legend> select one or more toppings </legend>
<p>
<input type="checkbox" name="topping" value="select_pizza_topping"> bacon <span class="price"> £0.20</span></p>
<p>
<input type="checkbox" name="topping" value="select_pizza_topping"> chicken <span class="price"> £0.20</span></p>
<p>
<input type="checkbox" name="topping" value="select_pizza_topping"> beef <span class="price"> £0.20</span></p>
<p>
<input type="checkbox" name="topping" value="select_pizza_topping"> sweetcorn <span class="price"> £0.20</span></p>
<p>
<input type="checkbox" name="topping" value="select_pizza_topping"> onion <span class="price"> £0.20</span></p>
<p>
<input type="checkbox" name="topping" value="select_pizza_topping"> peppers <span class="price"> £0.20</span></p>
<p>
<input type="checkbox" name="topping" value="select_pizza_topping"> sasauge <span class="price"> £0.20</span></p>
</fieldset>
<!-- extras section -->
<fieldset>
<legend>extras</legend>
<p>
<input type="checkbox" name="extras" value="extra_sides"> extra cheese <span class="price"> £0.50</span></p>
<p>
<input type="checkbox" name="extras" value="extra_sides"> chips <span class="price"> £1.50</span></p>
<p>
<input type="checkbox" name="extras" value="extra_sides"> cola <span class="price"> £0.50</span></p>
<p>
<input type="checkbox" name="extras" value="extra_sides"> fanta <span class="price"> £0.50</span></p>
</fieldset>
<!-- delivery info section -->
<fieldset>
<legend> delivery Information </legend>
<p>
<label> address line 1(*): </label>
<input type="text" name="address" required>
</p>
<p>
<label> address line 2: </label>
<input type="text" name="address">
</p>
<p>
<label> post code(*): </label>
<input type="text" name="post_code" required>
</p>
</fieldset>
<!-- Submit button -->
<div id="submit">
<input type="submit" class="submit_button" value="place order">
<input type="reset" class="reset_button" value="reset">
</div>
</form>
</div>
<div class="details">
<h2>Order Summary<h2>
</div>
分享你的篮子HTML代码。我的意思是完全的HTML代码,并不管你试过已经 –
一旦你回复 –
将继续CSS是否有良好的网站,以了解如何这个我使用W3C但发现很少提及提交到同一页面,我的理解,这将需要一段时间来向我解释代码,所以如果你没有时间的话。 – edwin