我正在使用Fuelux向导表单作为反馈系统。我已经在http://jsfiddle.net/yu4qeqs0/1/
的https://stackoverflow.com/a/35729713/5971854处尝试过此示例但是我还是什么也没得到。感谢您的帮助。谢谢
我正在开发一个简单的反馈系统,该系统需要输入数据(复选框,星级和表情符号)。以下是我的代码:
feedback.php
<div class="widget-body">
<div class="widget-main">
<div id="fuelux-wizard-container">
<div class="wizard" data-initialize="wizard" id="myWizard">
<div>
<ul class="steps">
<li data-step="1" class="active">
<span class="step">1</span>
<span class="title">ABOUT YOU</span>
</li>
<li data-step="2">
<span class="step">2</span>
<span class="title">ABOUT US</span>
</li>
<li data-step="3">
<span class="step">3</span>
<span class="title">FACILITIES</span>
</li>
<li data-step="4">
<span class="step">4</span>
<span class="title">OVERALL</span>
</li>
</ul>
</div>
<form class="form-horizontal" id="feedbackForm" action="<?php echo base_url().'feedback/addFeedback'; ?>" method= "POST">
<div class="step-content pos-rel">
<div class="step-pane active" data-step="1">
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<center><h1 class="lighter block green">PLEASE PROVIDE YOUR ROOM NUMBER</h1></center>
</div>
<div class="col-lg-3"></div>
</div>
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<div class="form-group has-warning">
<div class="col-xs-12 col-sm-12">
<span class="block input-icon input-icon-right">
<div class="input-container easy-get">
<input type="text" name="fRoomNo" id="fRoomNo" class="easy-put" maxlength="4" align="center" style="height:200px; width: 500px; font-size:200px;" />
</div>
<?php $date = date('Y/m/d H:i:s'); ?>
<input type="hidden" name="fDateTime" id="fDateTime" value="<?php echo $date; ?>"
</span>
<center><h5 class="lighter block black">You Can Skip This Page by Click on Next Button</h5></center>
</div>
</div>
</div>
<div class="col-lg-3"></div>
</div>
</div>
<div class="step-pane" data-step="2">
<div class="center">
<h1 class="blue lighter">HOW DID YOU HEAR ABOUT US?</h1>
</div>
<br>
<div class="form-group">
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-2">
<div class="row">
<div class="checkbox">
<label class="block">
<input name="fAdvert" value="fAdvert" id="fAdvert" type="checkbox" class="ace input-lg" />
<span class="lbl bigger-120"> ADVERTISMENT</span>
</label>
</div>
</div>
</div>
// more checkboxes
<div class="col-lg-3"></div>
</div>
</div>
<div class="step-pane" data-step="3">
<div class="center">
<h1 class="blue lighter">HOW DO YOU RATE OUR FACILITIES?</h1>
</div>
<br>
<div class="form-group">
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-2">
<h3>Check-In Process</h3>
</div>
<div class="col-lg-3">
<div class='starrr' id='fCheckIn'></div>
</div>
// more star rating
<div class="col-lg-3"></div>
</div>
</div>
<div class="step-pane" data-step="4">
<div class="form-group">
<div class="center">
<h3 class="green">HOW IS YOUR OVERALL SATISFACTION?</h3>
<br><br>
<div id="fOverall"></div>
</div>
</div>
</div>
</form>
<div class="wizard-actions">
<button class="btn btn-prev" id="btnPrev">
<i class="ace-icon fa fa-arrow-left"></i>Prev
</button>
<button class="btn btn-success btn-next" data-last="Finish" id="btnNext">Next
<i class="ace-icon fa fa-arrow-right icon-on-right"></i>
</button>
</div>
<!-- inline scripts related to this page -->
<script type="text/javascript">
jQuery(function($) {
$('#fuelux-wizard-container')
.ace_wizard({
//step: 2 //optional argument. wizard will jump to step "2" at first
//buttons: '.wizard-actions:eq(0)'
})
//.on('changed.fu.wizard', function() {
//})
.on('finished.fu.wizard', function(e) {
bootbox.dialog({
message: "Thank you! Your information was successfully saved!",
buttons: {
"success" : {
"label" : "OK",
"className" : "btn-sm btn-primary"
}
}
});
}).on('stepclick.fu.wizard', function(e){
e.preventDefault();//this will prevent clicking and selecting steps
});
});
</script>
<script>
$(function() {
$('#myWizard').on('finished.fu.wizard', function(evt, item) {
$('#feedbackForm').submit();
});
});
</script>
<script>
$('#fCheckIn').starrr({
change: function(e, value){
if (value) {
$('.your-choice-was').show();
$('.choice').text(value);
} else {
$('.your-choice-was').hide();
}
}
});
</script>
<script>
var emotionsArray = ['angry','disappointed','meh', 'happy', 'inlove'];
$("#fOverall").emotionsRating({
emotionSize: 50,
bgEmotion: 'happy',
emotions: emotionsArray,
color: 'gold'
});
</script>
Feedback.php
public function addFeedback() {
$this->load->helper('form');
$this->load->library('form_validation');
$this->load->model('model_feedback');
$this->model_feedback->add_feedback();
$this->load->view('pages/feedback');
}
Model_Feedback.php
// To add feedback
public function add_feedback() {
$this->load->helper('url');
$this->load->helper('form');
$data = array(
'room_no' => $this->input->post('fRoomNo'),
'fback_datetime' => $this->input->post('fDateTime')
'fback_advert' => $this->input->post('fAdvert'),
//star rating
'fback_checkin' => $this->input->post('fCheckIn'),
//emoji rating
'fback_overall' => $this->input->post('fOverall')
);
$this->db->insert('feedback_tbl',$data);
目前。.没有数据保存到数据库。