jquery-steps form not submitting

Question

I am using jquery-steps to submit a form for the first time, but I cannot get the form store in my db.

The form was built using the laravel blade syntax, but for styling purposes, I am adding in the jquery-steps.

My form -

{{ 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>

The wizard script

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

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

   </script>

The onFinished event appears to be occurring, but the form data is not being stored in my db. TIA.

Answer 1

i removed children div now its working fine,

<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>

And in js script

<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>

Answer 2

After some trial and error, I found the problem. The #wizard id needs in form tag:

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

Also remove the tag storing the id="wizard" and it works.