在Bootstrap手风琴向导内部形成

时间:2013-11-26 17:19:52

标签: html5 forms twitter-bootstrap

我正在使用Bootstrap Accordion Wizard http://bootply.com/77372并且我在其中有一个表单,action=addaroom.php但表单不会向php页面发送任何值,我不确定会出现什么问题 这是我的代码:

<div class="thumbnail center text-center">

    <div class="row-fluid">
      <p class="lead well">     
        In this page, you can becomme a host. this means that you can can create one or more rooms. and then you will have to follow the steps in order
        to become a host. You ust fill in the informtion correctly, because these will be displayed when a users making a search in your city. they might check
        out your place. So its important to give them correct details about your place.
      </p>
    </div>
    <div class="row-fluid acc-wizard">
      <div class="span3" style="padding-left: 2em;">
        <p style="margin-bottom: 2em;">
          Follow the steps below to successfully become a host.
        </p>
        <ol class="acc-wizard-sidebar">
          <li class="acc-wizard-todo acc-wizard-active"><a href="#prerequisites">Room details</a></li>
          <li class="acc-wizard-todo"><a href="#addwizard">Room description</a></li>
          <li class="acc-wizard-todo"><a href="#adjusthtml">Facility datails</a></li>
          <li class="acc-wizard-todo"><a href="#viewpage">Prices</a></li>
        </ol>
      </div>
      <div class="span9">
        <div class="accordion" id="accordion-demo">
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion-demo" href="#prerequisites">
                Details of the room
              </a>
            </div>
            <div id="prerequisites" class="accordion-body in collapse" style="height: auto;">
              <div class="accordion-inner">
                <!-- -->
                <form method="POST" action="addaroom.php">
                <fieldset>
                    <h3 class="legend ui-corner-all"><span>&nbsp;</span>Details of your room</h3>
                    <div class="row row-room_category row-choice"><label for="room_category" class=" label label-required">
                    Category
                    <span class="required" title="required-field">*</span></label>
                    <div class="field">
                        <select id="category" name="category" required="required" class="infobulle ui-widget-content ui-corner-all ui-input select-field radio-field">
                                <option>Homestay guest room</option>
                                <option>Apartment/flat</option>
                                <option>Bed and breakfast</option>
                                <option>Guest rooms</option>
                                <option>Host family</option>
                                <option>Independent room to let</option>
                                <option>Hall of residence</option>
                                <option disabled="disabled">
                        </option></select>
                     </div>
                     </div>
                     <div class="row row-room_type row-choice">

                     </div>
                     </fieldset><div class="acc-wizard-step"><button class="btn btn-primary" type="submit">Next Step</button></div></form></div>


                <!-- -->
              </div> <!--/.accordion-inner -->
            </div> <!-- /#prerequisites -->
          </div> <!-- /.accordion-group -->

          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#addwizard">
                 Description of the room
              </a>
            </div>
            <div id="addwizard" class="accordion-body collapse" style="height: 0px;">
              <div class="accordion-inner">
                <form method="POST" action="addaroom.php">
                    <fieldset>
                    <h3 class="legend ui-corner-all"><span>&nbsp;</span>Description of the room:</h3>
                        <div class="row row-room_excerpt row-text"><label for="description" class=" label label-required">
                            Description of the room
                            <span class="required" title="required-field">*</span>
                            </label>
                            <div class="field">
                                <input type="text" id="description" name="description" required="required" class="ui-widget-content ui-corner-all ui-input text-field" value="">
                            </div>
                        </div>
                        <div class="help-section">
                            <strong>Room's picture</strong><br>
                            Add the more represtentativ photo of the room, you will be able to add more photos at the edition of your accomodation.<br>
                            Your picture should be of one of the following formats: jpg, jpeg, gif or png and not to exceed the size of 2 Mo.
                        </div>
                        <div class="form-group">
                            <label for="exampleInputFile">File input</label>
                            <input type="file" id="exampleInputFile">
                            <p class="help-block"></p>
                        </div>
                    </fieldset>
                <div class="acc-wizard-step"><button class="btn" type="reset">Go Back</button> <button class="btn btn-primary" type="submit">Next Step</button></div></form>
              </div> <!--/.accordion-inner -->
            </div> <!-- /#addwizard -->
          </div> <!-- /.accordion-group -->

          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#adjusthtml">
                 Description of the facility, You're Almost Done
              </a>
            </div>
            <div id="adjusthtml" class="accordion-body in collapse" style="height: 319px;">
              <div class="accordion-inner">
                <form method="POST" action="addaroom.php">
                    <fieldset>
                    <h3 class="legend ui-corner-all"><span>&nbsp;</span>Details of the facility</h3>        
                            <div class="row row-room_toiletprivacy row-choice">
                            <label for="room_toiletPrivacy" class=" label label-required">
                            Toilets
                            <span class="required" title="required-field">*</span>
                            </label>
                            <div class="field">
                            <select id="room_toiletPrivacy" name="room_toiletPrivacy" required="required" class="ui-widget-content ui-corner-all ui-input select-field radio-field">
                            <option value="Shared toilets">Shared toilets</option>
                            <option value="Private toilets">Private toilets</option>
                            </select>
                            </div>
                        </div>

                        <div class="row row-room_type row-choice">
                            <label for="bed_type" class=" label label-required">
                            Bed type
                            <span class="required" title="required-field">*</span>
                            </label>
                            <div class="field">
                            <select id="bed_type" name="bed_type" required="required" class="ui-widget-content ui-corner-all ui-input select-field radio-field">
                            <option value="Double bed">Double bed</option>
                            <option value="Couch">Couch</option>
                            <option value="King size bed">King size bed</option>
                            <option value="Twin bed">Twin bed</option>
                            <option value="Baby bed">Baby bed</option>
                            <option value="Single bed">Single bed</option>
                            </select>
                            </div>
                        </div>

                    </fieldset>
                <div class="acc-wizard-step"><button class="btn" type="reset">Go Back</button> <button class="btn btn-primary" type="submit">Next Step</button></div></form>
              </div> <!--/.accordion-inner -->
            </div> <!-- /#adjusthtml -->
          </div> <!-- /.accordion-group -->

          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#viewpage">
                Pricing
              </a>
            </div>
            <div id="viewpage" class="accordion-body collapse" style="height: 0px;">
              <div class="accordion-inner">
                <form method="POST" action="addaroom.php">
                    <fieldset>
                    <h3 class="legend ui-corner-all"><span>&nbsp;</span>Pricing</h3>

                    <div class="row row-room_currency row-choice"><label for="room_currency" class=" label label-required">
                    Currency
                    <span class="required" title="required-field">*</span></label>
                    <div class="field">
                    <select id="room_currency" name="room_currency" required="required" class="select-field radio-field" style=" width:75px;">
                    <option value="EUR">Eur</option>
                    <option value="USD">Usd</option>
                    <option value="GBP">Gbp</option>
                    </select>
                    </div></div>

                    <br>


                    <h3 class="legend ui-corner-all"><span>&nbsp;</span>Price per night</h3>

                    <div class="row row-room_maxstay row-text">
                        <label for="pricepernight" class=" label">
                        Price per night
                        </label>
                    </div>


                    <div class="row row-room_maxstay row-text">
                        <label for="month" class=" label">
                        By month
                        </label>
                        <div class="field">
                        <input type="text" id="week" name="month" class="infobulle ui-widget-content ui-corner-all ui-input text-field" o="">
                        </div>
                    </div>
                    <button class="btn btn-danger">Save</button>
                    </fieldset>
                </form>
              </div> <!--/.accordion-inner -->
            </div> <!-- /#viewpage -->
          </div> <!-- /.accordion-group -->
          </div>
        </div>
</div>

问题

  • 我该怎么做?
  • 如何将所有值发送到php页面?
  • 发送后会将它们保存在数据库中吗?

1 个答案:

答案 0 :(得分:1)

  

我该怎么做?

如果我正确理解了问题,您应该以一种形式包装整个向导。

  

如何将所有值发送到php页面?

如果它以一种形式包装,则应发送所有输入。如果您不希望在提交的所有向导页面中发送所有输入,则应在您不想发送的输入上使用disabled html属性

  

发送后会将它们保存在数据库中吗?

这取决于您如何实现逻辑服务器端。