Question

大家好，我需要一些帮助，我有一个表格，我想发送到同一页面上的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>

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>

提交一个复选框表格，并显示在＆＃34; div＆＃34;在同一页上

1 个答案: