{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 我想做一个坏孩纸 的问题《form inside Bootstrap Accordion Wizard》','https://www.manongdao.com/q-1098544.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am using Bootstrap Accordion Wizard http://bootply.com/77372 and I have a form inside it, with action=addaroom.php but the form doesn't send any values to the php page, I am not sure what is going wrong
here is my code:
<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> </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> </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> </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> </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> </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>
Questions:
- How can I do this?
- How can I send all of the values to the php page?
- After they are sent will they be saved in the database?
If I am understanding the problem correctly you should wrap the whole wizard in one form.
If it is wrapped in one form all inputs should be sent. If you don't want to send all inputs in all wizard pages on submit you should use the
disabledhtml attribute on the inputs you don't want to sendThat depends on how you have implemented the logic server side.