php - jQuery-steps Formwizard and CakePhp not submitting -
i have webform in cakephp application (2.5.4), , using jquery-steps (1.1.0) in conjunction jquery validate plugin (1.13.1) make multistep form.
all seems going well, form not being submitted. have inkling how work? far can tell, end in onfinished event.
here view file:
<div class="col-lg-11 col-md-10 col-sm-10"> <!--nocache--> <?php if($this->session->flash()) { echo $this->session->flash(); } ?> <?php if($this->session->flash('auth')) { echo $this->session->flash('auth') ;} ?> <!--/nocache--> <?php // output success info if(isset($this->params['named']['success']) && $this->params['named']['success']=='1') : ?> // success message <?php endif; ?> <h1 class="lead">request pricing information</h1> <div class="formwrapper"> <?php echo $this->form->create();?> <div> <h2>select date</h2> <fieldset> <div class="form-group"> <?php echo $this->form->input('date', array( 'type' => 'text', 'placeholder' => 'mm/dd/yyyy', 'label'=> 'what date of event / project?', 'class' => 'required form-control', 'div' => 'form-group col-lg-6 col-md-6 col-sm-6' )); ?> </div> <div class="clearme smallcontentspacer "> </div> </fieldset> <h2>type of photography</h2> <fieldset> <?php $options = array( 'wedding photography' => 'wedding / event photography', 'portrait photography' => 'portrait photography', 'corporate photography' => 'corporate photography', 'other photography' => 'other' ); echo $this->form->input('type_of_photography', array( 'options' => $options, 'label' => 'what type of photography inquiring about?', 'empty' => 'please select', 'class' => 'form-control', 'div' => 'form-group col-lg-6 col-md-6 col-sm-6' )); // display error message echo $this->form->error('contact.type_of_photography'); ?> <div id="photographydetailsarea" style="display:none"> <?php // weddings ?> <div class="details_weddings" style="clear: both; display:none"> <h4>wedding details</h4> <?php echo $this->form->input('wedding_venue', array( 'label' => 'reception venue:', 'type' => 'text', 'placeholder'=> 'reception venue', 'class' => 'form-control', 'div' => 'form-group' )); echo $this->form->input('wedding_venuecity', array( 'label' => 'city:', 'type' => 'text', 'placeholder' => 'city', 'class' => 'form-control', 'div' => 'form-group' )); echo $this->form->input('wedding_venuestate', array( 'label' => 'state / province:', 'type' => 'text', 'placeholder' => 'state / province', 'class' => 'form-control', 'div' => 'form-group' )); echo $this->form->input('wedding_venuecountry', array( 'label' => 'country:', 'type' => 'text', 'default' => 'usa', 'class' => 'form-control', 'div' => 'form-group' )); ?> </div> <?php // portraits ?> <div class="details_portraits" style="clear: both; display:none"> <h4>portrait details</h4> <div class="radiowrap"> <?php $options = array('studio' => 'studio', 'location' => 'location', 'not sure' => 'not sure'); echo $this->form->input('portrait_location', array( 'type' => 'radio', 'before' => '<div class="radio-inline">', 'after' => '</div>', 'separator' => '</div><div class="radio-inline">', 'options' => $options, 'value' => 'not sure', 'legend' => false, 'div' => 'form-group' )); ?> </div> </div> <?php // corporate ?> <div class="details_corporate" style="clear: both; display:none"> <h4>corporate details</h4> <?php $options = array( 'advertising' => 'advertising', 'editorial' => 'editorial', 'fashion shoot' => 'fashion shoot', 'other' => 'other' ); echo $this->form->input('corporate_details', array( 'options' => $options, 'label' => 'what kind of corporate photography looking for?', 'empty' => false, 'class' => 'form-control', 'div' => 'form-group col-lg-6 col-md-6 col-sm-6' )); ?> </div> <?php // other ?> <div class="details_other" style="clear: both; display:none"> <h4>details</h4> <?php echo $this->form->input('other_photography_details', array( 'label' => 'project details', 'type' => 'textarea', 'rows' => 4, 'cols' => 30, 'class' => 'form-control', 'div' => 'form-group col-lg-6 col-md-6 col-sm-6' )); ?> </div> <input name="data[pricing][validate_options]" value="" id="contactvalidateoptions" type="hidden" /> </div> </fieldset> <h2>personal information</h2> <fieldset> <?php echo $this->form->input('firstname', array( 'label' => 'first name:', 'type' => 'text', 'placeholder' => 'first name', 'class' => 'form-control', 'div' => 'form-group' )); echo $this->form->input('lastname', array( 'label' => 'last name:', 'type' => 'text', 'placeholder' => 'last name', 'class' => 'form-control', 'div' => 'form-group' )); echo $this->form->input('email', array( 'label' => 'email:', 'type' => 'text', 'placeholder' => 'email', 'class' => 'form-control', 'div' => 'form-group' )); echo $this->form->input('city', array( 'label'=> 'city:', 'type' => 'text', 'placeholder' => 'city', 'class' => 'form-control', 'div' => 'form-group' )); echo $this->form->input('state', array( 'label' => 'state / province:', 'type' => 'text', 'placeholder' => 'state / province', 'class' => 'form-control', 'div' => 'form-group' )); echo $this->form->input('country', array( 'label' => 'country:', 'type' => 'text', 'default'=>'usa', 'class' => 'form-control', 'div' => 'form-group' )); echo $this->form->input('phone', array( 'label' => 'phone:', 'type' => 'text', 'placeholder' => 'phone number', 'class' => 'form-control', 'div' => 'form-group' )); ?> <?php $options = array( array ( 'name'=> 'anytime', 'value' => 'anytime', 'selected' => 'selected' ), 'morning' => 'morning', 'noon' => 'noon', 'afternoon' => 'afternoon', 'evening' => 'evening' ); echo $this->form->input('contact_time', array( 'options' => $options, 'label' => 'preferred contact time <i>(your timezone)</i>', 'empty'=>false, 'class' => 'form-control', 'div' => 'form-group col-lg-6 col-md-6 col-sm-6' )); ?> </fieldset> <h2>additional information</h2> <fieldset> <?php echo $this->form->input('additional_information', array( 'label' => 'comments:', 'type' => 'textarea', 'rows' => 10, 'cols' => 30, 'class' => 'form-control ignore', 'div' => 'form-group')); ?> <div class="likelabel"></div><br /> <?php $options = array( 'past client' => 'past client', 'vendor recommendation' => 'vendor recommendation', 'online forum' => 'online forum', 'magazine feature' => 'magazine feature', 'magazine ad - listing' => 'magazine advertising or listing', 'other' => 'other' ); echo $this->form->input('howdidyoufindus', array( 'options' => $options, 'label' => 'how did find us?', 'class' => 'form-control ignore', 'div' => 'form-group', 'empty'=> 'please select' )); ?> <label for="findusaddtional" class="additionalinfolabel"></label> <div id="additionalinfoarea" class="input text"> <?php echo $this->form->input('findusadditional', array( 'type' => 'text', 'label' => false, 'class' => 'form-control ignore', 'div' => 'form-group' ));?> </div> </fieldset> </div> <?php $this->form->end(); ?> </div> <div class="clearme smallcontentspacer "> </div> </div><!--class="col-lg-11 col-md-10 col-sm-10" --> <?php // render javascript , required files $this->html->script(array('jquery.steps','jquery.validate.min', 'infopacketform'), array('block' => 'scriptbottom')); echo $this->html->css('multistepform'); ?> here javascript file contains validation + jquery-step call:
$(function() { var form = $("#pricingindexform"); // jquery validator - add settings bootstrap $.validator.setdefaults({ debug: true, success: "valid", highlight: function(element) { $(element).closest(".form-group").addclass("has-error"); }, unhighlight: function(element) { $(element).closest(".form-group").removeclass("has-error"); }, errorelement: "span", errorclass: "help-block", errorplacement: function(error, element) { if(element.parent(".input-group").length) { error.insertafter(element.parent()); } else { error.insertafter(element); } } }); // jquery validator - additional validation format date $.validator.addmethod( "dateformat", function(value, element) { return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/); }, "please enter date in format dd/mm/yyyy" ); // jquery validator - form validation form.validate({ rules: { "data[pricing][date]": { dateformat:true }, "data[pricing][firstname]" : { required: true, minlength: 2}, "data[pricing][lastname]" : { required: true, minlength: 2}, "data[pricing][email]" : { email: true}, "data[pricing][city]" : { required: true, minlength: 2}, "data[pricing][state]" : { required: true, minlength: 2}, "data[pricing][country]" : { required: true, minlength: 2}, "data[pricing][phone]" : { required: true, minlength: 2}, "data[pricing][additional_information]" : { required: false}, "data[pricing][findusadditional]" : { required: false} }, ignore: ".ignore" }); form.children("div").steps({ headertag: "h2", bodytag: "fieldset", transitioneffect: "slideleft", onstepchanging: function (event, currentindex, newindex) { if (currentindex > newindex) { return true; } else { form.validate().settings.ignore = ":disabled,:hidden"; return form.valid(); } }, onstepchanged: function (event, currentindex, newindex) { // adjust form height content switch(currentindex) { case 0: setformstepcontentheight(200); break; case 1: var selectedoption = $('#pricingtypeofphotography').val(); if( selectedoption === '' || selectedoption === 'portrait\ photography' || selectedoption === 'other\ photography') { setformstepcontentheight(200); } else if ( selectedoption === 'corporate\ photography' ) { setformstepcontentheight(220); } else { setformstepcontentheight(450); } break; case 2: setformstepcontentheight(600); break; case 3: setformstepcontentheight(450); break; } }, onfinishing: function (event, currentindex) { return form.valid(); }, onfinished: function (event, currentindex) { console.log(form); // submit form input form.submit(); } }); /** * set height of form step based on content * @param height */ function setformstepcontentheight(height) { $('.wizard>.content').css('height', height + 'px'); } }); i appreciate input!
as @scowler has graciously pointed out, issue when debug: true set in $.validator.setdefaults({...}) form not submitted.
once set false form submission works without flawlessly.