大家好我需要一些帮助，我有一个表格我想发送到同一页面上的一个 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>
最佳答案
为您的表单和结果容器使用float。只有变化被添加到父 div 元素。 内容面板
像下面这样尝试。
.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>关于javascript - 提交一个checkbox表单，并显示在同一页面的 "div"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34966140/