提交一个复选框表单，并显示在同一页面上的“div”中答案

【问题标题】：submit a checkbox form,and display in a "div" on the same page提交一个复选框表单，并显示在同一页面上的“div”中
【发布时间】：2016-01-23 16:50:45
【问题描述】：

大家好，我需要一些帮助，我有一个表格，我想发送到同一页面上的一个 div。this is want I want to achieve 我有一个名为篮子的 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>

【问题讨论】：

分享您的购物篮 html 代码。我的意思是你已经尝试过的完整的 html 代码和 css
回复后会继续
有什么好的网站可以学习如何做到这一点我使用 w3c，但发现很少提到提交到同一页面，我知道向我解释代码需要一段时间，所以如果你不这样做'没时间没关系。
快速浏览w3schools.com/css
希望您只面临对齐问题。检查我对工作演示的回答，如果您仍然遇到任何其他问题，请告诉我们。

标签： javascript html css ajax

【解决方案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>

【讨论】：