如何使用fuelux向导表单存储数据?

时间:2019-02-08 03:23:24

标签: javascript php jquery

我正在使用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">&nbsp;&nbsp; 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);

目前。.没有数据保存到数据库。

0 个答案:

没有答案