jquery-steps表单未提交答案

【问题标题】：jquery-steps form not submittingjquery-steps表单未提交
【发布时间】：2014-05-22 14:48:49
【问题描述】：

我第一次使用 jquery-steps 提交表单，但我无法在我的数据库中获取表单存储。

该表单是使用 laravel Blade 语法构建的，但出于样式目的，我在 jquery-steps 中添加。

我的表格 -

{{ Form::model($contractor, array('url' => 'contractors/edit', 'class' => 'form-horizontal', 'method' => 'PUT')) }}
<div id="wizard">
    <h3>Tell Us About You</h3>
        <fieldset>

                <div class="control-group">
                        {{ Form:: label('name', 'Business Name', array('class' => 'control-label')) }}
                    <div class="controls">
                        {{ Form:: text('name', null, array('class' => 'form-control')) }}
                    </div>
                </div>

                <div class="control-group">
                    {{ Form:: label('tag_line', 'Business Tag Line', array('class' => 'control-label')) }}
                    <div class="controls">
                    {{ Form:: text('tag_line', null, array('class' => 'form-control')) }}
                    </div>
                </div>


                <div class="control-group">
                    {{ Form:: label('first_name', 'Company Contact', array('class' => 'control-label'))}}
                    <div class="controls">
                    {{ Form:: text('first_name', null, array('class' => 'form-control'))}}
                    </div>
                </div>


                <div>
                    {{ Form::label('story', 'Company Bio') }}
                    {{ Form::textarea('story', null, array('class' => 'row-fluid')) }}
                </div>
            </fieldset>


            <h3>Location</h3>
            <fieldset>


                <div class="control-group">
                {{ Form:: label('phone', 'Public Phone', array('class' => 'control-label'))}}
                <div class="controls">
                {{ Form:: text('phone', null, array('class' => 'form-control'))}}
                </div>
                </div>

                <div class="control-group">
                {{ Form:: label('address_1', 'Public Address', array('class' => 'control-label'))}}
                <div class="controls">
                {{ Form:: text('address_1', null, array('class' => 'form-control'))}}
                </div>
                </div>

                <div class="control-group">
                {{ Form:: label('city', 'City', array('class' => 'control-label'))}}
                <div class="controls">
                {{ Form:: text('city', null, array('class' => 'form-control'))}}
                </div>
                </div>

                <div class="control-group">
                {{ Form:: label('state', 'State', array('class' => 'control-label'))}}
                <div class="controls">
                {{ Form:: text('state', null, array('class' => 'form-control'))}}
                </div>
                </div>

            </fieldset>


            <div class="row">
            <div class="span9 text-center">


            {{ Form::close() }}
                </div>
        </div>
    </div>

向导脚本

        <script> $("#wizard").steps({
            headerTag: "h3",
            bodyTag: "fieldset",
              onFinished: function (event, currentIndex)
            {
                var form = $(this);

                // Submit form input
                form.submit();
            }
        });

   </script>

onFinished 事件似乎正在发生，但表单数据并未存储在我的数据库中。 TIA。

【问题讨论】：

那么你的控制器的“保存”功能是否被调用了？

标签： laravel-4 jquery-steps

【解决方案1】：

经过反复试验，我发现了问题所在。 #wizard id 需要在表单标签中：

{{ Form::model($contractor, array('url' => 'contractors/edit', 'id' => 'wizard', 'class' => 'form-horizontal', 'method' => 'PUT')) }}

同时删除存储 id="wizard" 的标签，它就可以工作了。

【讨论】：

【解决方案2】：

我删除了子 div 现在它工作正常，

<form id="example-form" action="<?php echo getCmsUrl('add/payment'); ?>">
            <h3>Your Information</h3>
            <section >
            <div class="form-group">
                <label for="name">Name *</label>
                <input id="name" name="name" type="text" class="required">
            </div>
            <div class="form-group">
                <label for="email">Email *</label>
                <input id="email" name="email" type="email" class="required">
            </div>
            <div class="form-group">
                <label for="contactNum">Mobile *</label>
                <input id="contactNum" name="contactNum" type="number" class="required">
            </div>
            </section>

            <h3>Add Information</h3>
            <section >
                <div class="form-group">
                    <label for="addDescription">Add Description *</label>
                    <textarea rows="4" cols="30" id="addDescription" name="addDescription" class="required addInput" placeholder="Describe what information you want to show in advertisement. eg. Your Business Name,Address, Contact Num,Phrase to be hilighted."></textarea>
                </div>

                <div class="form-group">
                    <label for="position">Add Position *</label>
                    <select class="addInput" name="position" id="position">
                    <?php if(!empty($addCategory)): ?>
                        <?php foreach($addCategory as $key => $add): ?>
                            <?php
                            $catName = $add->category_name;
                            $catName = (unserialize($catName))?unserialize($catName):NULL;
                            $catName = isset($catName[$this->currentLangID])?$catName[$this->currentLangID]:"";
                            echo "<option value=".$add->category_id.">".$catName."</option>"; 
                            ?>
                        <?php endforeach; ?>
                    <?php endif; ?>
                    </select>
                </div>

                <div class="form-group">
                    <label for="noOfDays">No of Days *</label>
                    <select class="addInput" name="numOfDays" id="numOfDays">
                      <option value="7">1 Week</option>
                      <option value="15">15 Days</option>
                      <option value="30" selected>1 Month</option>
                      <option value="365">1 Year</option>
                    </select>
                </div>
            </section>

            <h3>Finish</h3>
            <section >
            <h2>Are you Sure to Finish?</h2>

            </section>
    </form>

在js脚本中

<script type="text/javascript">
        var form = $("#example-form");
        form.validate({
            errorPlacement: function errorPlacement(error, element) { element.before(error); },
            // rules:
            messages:{
                name: {
                    required: "<?php echo tCms('frontend', 'required_field'); ?>",
                },
                email: {
                    required: "<?php echo tCms('frontend', 'required_field'); ?>",
                    email: "Your email address must be in the format of name@domain.com"
                },
                contactNum: {
                    required: "<?php echo tCms('frontend', 'required_field'); ?>",
                },
                addDescription: {
                    required: "<?php echo tCms('frontend', 'required_field'); ?>",
                },
                position: {
                    required: "<?php echo tCms('frontend', 'required_field'); ?>",
                },
                numOfDays: {
                    required: "<?php echo tCms('frontend', 'required_field'); ?>",
                }
            }
        });
        form.steps({
            headerTag: "h3",
            bodyTag: "section",
            transitionEffect: "slideLeft",
            onStepChanging: function (event, currentIndex, newIndex)
            {
                if (newIndex < currentIndex) {
                    return true;
                }
                form.validate().settings.ignore = ":disabled,:hidden";
                return form.valid();
            },
            onFinishing: function (event, currentIndex)
            {
                form.validate().settings.ignore = ":disabled";
                return form.valid();
            },
            onFinished: function (event, currentIndex)
            {
                var form = $(this);
                form.submit();
            }
        });
    </script>

【讨论】：