大家好,我需要一些帮助,我有一个表格,我想发送到同一页面上的div。this is want I want to achieve 我有一个名为basket的div,它漂浮在我页面的右上角,我希望将表单发送到。这样,一旦用户点击提交,就会在购物篮中显示订单。
我很难找到相关的信息来做这件事,我问是否有人可以告诉我这是怎么做的,仅供参考我还没有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>
答案 0 :(得分:1)
使用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>