提交复选框的形式，显示在同一页面

Question

嗨会员，我需要一些帮助在“格”，我有我想送一个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> 

Answer 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>