jquery formwizard, adding new steps won't work

corbeeresearch · September 2, 2010

Hi,

I had a problem with the jquery formwizard plugin, when trying to add new steps by this code creates error in a sense that I can't click next, because the validate plugin validates the next form, even though I haven't went through it yet.

Then all the other ajax drop down forms won't function properly in the new duplicated steps eventhough I used the .live() function

What's wrong with my code?

<div id="frmWrapper">
<form id="signupForm" method="post" action="" class="bbq">
    <div id="fieldWrapper">
    
     <span class="stepinfo">Registration</span><br />
    <span class="step" id="personal">
    <span class="title">Step 1 - Personal Information</span><br />
	<?php
        /*** create the form token ***/
        $form_token = uniqid();
        
        /*** add the form token to the session ***/
        $_SESSION['form_token'] = $form_token;
	$x = 0;
        ?>
	<input type="hidden" name="token" id="token" value="<?php echo $form_token;?>"/>
        <input type="hidden" name="counter" id="counter" value="<?php echo $x ?>" />
      <label for="firstname">First name*</label><br/>
      <input class="required" name="firstname" id="firstname" /><br />
      <label for="middlename">Middle name*</label><br />
      <input class="required" name="middlename" id="middlename" /><br />
      <label for="lastname">Last name*</label><br />
      <input class="required" name="lastname" id="lastname"><br/>
      <label for="homeaddress">Home Address*</label><br/>
      <textarea class="required" name="homeaddress" id="homeaddress" cols="45" rows="3"></textarea><br />
      <label for="telephone">Telephone*</label><br />
      <input class="required" maxlength="14" name="telephone" id="telephone"><br/>  
      <label for="birthday">Birthday*</label><br/>
      <input class="required date" name="birthday" id="birthday"><br />
      <label for="birthplace">Birthplace*</label><br/>
      <input class="required" name="birthplace" id="birthplace" /><br/>   
      <label for="oaddress">Office Address</label><br />
      <textarea class="" name="oaddress" id="oaddress" cols="45" rows="3"></textarea><br />
      <label for="otel">Office Telephone</label><br />
      <input class="" name="otel" id="otel" /><br />    
      <label for="ofax">Office Fax</label><br />
      <input class="" name="ofax" id="ofax" /><br/>    
      <label for="email">Email*</label><br />
      <input class="required email" name="email" id="email" /><br/>
      <label for="password">Password*</label><br />
      <input type="password" class="required password" maxlength="15" name="password" id="password" /><br />   
      <label for="cpassword">Confirm Password*</label><br />
      <input type="password" class="required password" equalTo="#password" name="cpassword" maxlength="15" id="cpassword" /><br />       
    </span>
    <span id="vehicle" class="step">
        <span class="title">Step 2 - Vehicle Information</span><br />
        <!--token data-->
        <span id="tokendata"></span>
    <label for="regname">Registered Name*</label>
    <br />
    	<input class="required" name="regname[]" id="regname" value="" /><br/>
    <label for="regaddress">Registered Address*</label><br />
    	<textarea class="required" name="regaddress[]" id="regaddress" cols="45" rows="3"></textarea><br />
    <label for="year">Year Manufactured:*</label><br />
		<select name="year[]" id="year" class="required">
            <option value="">Select a Year</option>
            <?php foreach ($qyear as $key =>$list) {?>
            <option value="<?php echo $list['year']?>"><?php echo $list['year'] ?></option>
            <?php }  ?>
        </select><br/>
    <label for="brand">Brand:*</label><br /> 						
	<select name="brand[]" id="brand" class="required">
	      <option value="">Select a Brand</option>
    	</select><br/>
    <label for="model">Model:*</label><br /> 
    <input type="hidden" id="carType" name="carType[]" />						
        <select name="model[]" id="model" class="required">
            <option value="">Select a Model</option>
        </select><br/>
    <label for="platenum">Plate Number*</label><br/>
   		<input type="text" name="platenum[]" id="platenum" class="required" maxlength="7"/><br/>
<label for="motornum">Motor Number*</label><br/>
	<input type="text" name="motornum[]" id="motornum" class="required" maxlength="13"/><br />
<label for="chassisnum">Chassis Number*</label><br/>
	<input type="text" name="chassisnum[]" id="chassisnum" class="required" maxlength="17"/><br />
<label for="mvfnum">MvFile Number*</label><br/>
	<input type="text" name="mvfnum[]" id="mvfnum" class="required" maxlength="16"/><br />
<label for="color">Color*</label><br/>
	<input type="text" name="color[]" id="color" class="required"/><br />
<label for="aog">Acts of God*<img src="<?php echo base_url()?>images/question.jpg"  title="If yes, will cover damages from disasters such as floods, hurricane, etc" class="betipped" style="color:#009;" /></label><br/>
	<select name="aog[]" id="aog" class="required">
            <option value=""> </option>
            <option value="yes">Yes</option>
            <option value="no">No</option>            
  	</select><br/>
      <!--<span id="bank"></span>-->
      <label for="tpl">TPL*<img src="<?php echo base_url()?>images/question.jpg" title="If there is an existing TPL, clicking yes,<br/> will prompt Insurance Experts to remind you of your TPL expiration" class="betipped" /></label><br/>
      	<select name="tpl[]" id="tpl" class="required">
                <option value=""> </option>
                <option value="yes">Yes</option>
                <option value="no">No</option>            
  		</select><br/>
      <label for="delivery">Delivery*<img src="<?php echo base_url()?>images/question.jpg" title="Included in GMA: Metro Manila, Laguna, Cavite, Rizal, Bulacan, Pampanga and Batangas.<br/> All other cities not mentioned are under Outside GMA" class="betipped" /></label><br/>     
      	<select name="delivery[]" id="delivery" class="required">
                <option value=""> </option>
                <option value="gma">Greater Manila Area(GMA)</option>
                <option value="outside">Outside of GMA</option>            
  		</select><br/>
      <label for="mortgator" id="lblmortgator" style="display:none;">Mortgator:</label><br/>
          <select name="mortgator[]" id="mortgator" style="display:none;">
          <option value="">Select a Mortgator</option>
          </select><br/>                    
    </span>
    <span id="insurance" class="step">
    <span class="title">Step 3 - Select an Insurance</span><br/>
        <span id="selinsurance"></span><br/>
        <input type="button" class="addcar" value="click here to add more vehicle"/><br/>
        Once you clicked it, a new form will be added on the next page<br/>
        Do note that you cannot remove the form once you added it, <br/>
        so please finalize your thought before adding a new vehicle.<br/>
        <span id="msgaddcar"></span>
        </span>
    </span>
    <span id="review" class="step submit_step">
        <span class="title">Last step - Username</span><br />
        <label for="username">User name</label><br />
        <input class="" name="username" id="username" /><br />
        <label for="password">Password</label><br />
        <input class="" name="password" id="password" type="password" /><br />
        <label for="retypePassword">Retype password</label><br />
        <input class="" name="retypePassword" id="retypePassword" type="password" /><br />
        </span>
        </div>
        <div id="frmNavigation"> 							
            <input class="navigation_button" id="back" value="Back" type="reset" />
            <input class="navigation_button" id="next" value="Next" type="submit" />
        </div>
    </form>
    <hr />
    
    <p id="data"></p>
</div>

    							
<script type="text/javascript">
/*****************Validation***************************/
		$(function()
		{
			$("#signupForm").validate
			({
				rules:
				{
					firstname:
					{
						minlength: 3
					},
					middlename:
					{
						minlength: 2
					},
					lastname:
					{
						minlength: 2
					},												
					email:
					{
						remote:
						{
							url: "<?php echo base_url();?>index.php/register/emailchecker",	
							type: "post"
						}
					},
					password:
					{
						rangelength: [6,15]
					},						
					birthplace:
					{
						minlength: 2	
					},
					homeaddress:
					{
						minlength: 10
					},
					oaddress:
					{
						minlength: 10	
					}, 
				//step 2
					regname:
					{
						minlength: 3
					},
					regaddress:
					{
						minlength: 10
					},
					platenum:
					{
						remote:
						{
							url: "<?php echo base_url(); ?>index.php/register/platechecker",
							type: "post"
						}
					},
				},
				messages:
				{
					firstname:
					{
						minlength: "Enter your first name"
					},
					middlename:
					{
						minlength: "Enter your middle name"
					},
					lastname:
					{
						minlength: "Enter your last name"
					},
					email:
					{
						remote: "Email already exists"
					},
					password:
					{
						rangelength: "Enter between 6 to 15 characters"
					},
					birthplace:
					{
						minlength: "Enter a proper address"	
					},
					homeaddress:
					{
						minlength: "Enter a proper address"	
					},
					oaddress:
					{
						minlength: "Enter a proper address"	
					},
					cpassword:
					{
						equalTo: "Password does not match"
					},
					//step 2
					regaddress:
					{
						minlength: "Enter a proper address"	
					},
					platenum:
					{
						remote: "Plate Number entered already exists"
					},
				}	
			});

/******************Tool Tip**************************/

	$("#signupForm").live("mousemove", function(){
			$(".betipped[title]").tooltip
			({
				position: 'center right'
			});
	});


/**********************Form Wizard********************************/				
			$("#signupForm").formwizard(
			{ 
			 	//formPluginEnabled: true,
			 	validationEnabled: true,
			 	focusFirstInput : true,
				remoteAjax:
				{
					"personal" :
					{
						url: "<?php echo base_url(); ?>index.php/register/gotostep2",
						success: function(data)
						{
							$('#tokendata').html(data);
							return true;
						}
					},
					"vehicle" :
					{
						url: "<?php echo base_url();?>index.php/register/insurance",
						success: function(data)
						{
							$('#selinsurance').html(data);
							return true;	
						},
					},
					"insurance" :
					{
						url: "<?php echo base_url(); ?>index.php/register/gotostep2",
						success: function(data)
						{
							$('#tokendata').html(data);
							return true;
						}
					}
				}

			 }
			); //end of formwizard

	//add new form
			//update cached steps in the wizard with a new step (adds one first)
			var x = 0;	
			$(".addcar").live('click',function(){
			//step 2 vehicle information content
			x += 1;
			//var vcontent = $('#vehicle').clone().attr("id","vehicle" + x);
			//var icontent = $('#insurance').clone().attr("id","insurance" + x);
			var vcontent = '<span id="vehicle'+ x +'" class="step">' +
        '<span class="title">Step 2 - Vehicle Information</span><br /><span id="tokendata"></span><label for="regname">Registered Name*</label><br /><input class="required" name="regname[]" id="regname" value="" /><br/><label for="regaddress">Registered Address*</label><br /><textarea class="required" name="regaddress[]" id="regaddress" cols="45" rows="3"></textarea><br /><label for="year">Year Manufactured:*</label><br /><select name="year[]" id="year" class="required"><option value="">Select a Year</option><?php foreach ($qyear as $key =>$list) {?><option value="<?php echo $list['year']?>"><?php echo $list['year'] ?></option><?php }  ?></select><br/><label for="brand">Brand:*</label><br /><select name="brand[]" id="brand" class="required"><option value="">Select a Brand</option></select><br/><label for="model">Model:*</label><br /><input type="hidden" id="carType" name="carType[]" /><select name="model[]" id="model" class="required"><option value="">Select a Model</option></select><br/><label for="platenum">Plate Number*</label><br/><input type="text" name="platenum[]" id="platenum" class="required" maxlength="7"/><br/><label for="motornum">Motor Number*</label><br/><input type="text" name="motornum[]" id="motornum" class="required" maxlength="13"/><br /><label for="chassisnum">Chassis Number*</label><br/><input type="text" name="chassisnum[]" id="chassisnum" class="required" maxlength="17"/><br /><label for="mvfnum">MvFile Number*</label><br/><input type="text" name="mvfnum[]" id="mvfnum" class="required" maxlength="16"/><br /><label for="color">Color*</label><br/><input type="text" name="color[]" id="color" class="required"/><br /><label for="aog">Acts of God*<img src="<?php echo base_url()?>images/question.jpg"  title="If yes, will cover damages from disasters such as floods, hurricane, etc" class="betipped" style="color:#009;" /></label><br/><select name="aog[]" id="aog" class="required"><option value=""> </option><option value="yes">Yes</option><option value="no">No</option></select><br/><label for="tpl">TPL*<img src="<?php echo base_url()?>images/question.jpg" title="If there is an existing TPL, clicking yes,<br/> will prompt Insurance Experts to remind you of your TPL expiration" class="betipped" /></label><br/><select name="tpl[]" id="tpl" class="required"><option value=""> </option><option value="yes">Yes</option><option value="no">No</option></select><br/><label for="delivery">Delivery*<img src="<?php echo base_url()?>images/question.jpg" title="Included in GMA: Metro Manila, Laguna, Cavite, Rizal, Bulacan, Pampanga and Batangas.<br/> All other cities not mentioned are under Outside GMA" class="betipped" /></label><br/><select name="delivery[]" id="delivery" class="required"><option value=""> </option><option value="gma">Greater Manila Area(GMA)</option> <option value="outside">Outside of GMA</option></select><br/><label for="mortgator" id="lblmortgator" style="display:none;">Mortgator:</label><br/><select name="mortgator[]" id="mortgator" style="display:none;"><option value="">Select a Mortgator</option> </select><br/></span>';
			var icontent = '<span id="insurance'+ x + '" class="step">' +
    '<span class="title">Step 3 - Select an Insurance</span><br/><span id="selinsurance"></span><br/><input type="button" class="addcar" value="click here to add more vehicle"/><br/>Once you clicked it, a new form will be added on the next page<br/>Do note that you cannot remove the form once you added it, <br/>so please finalize your thought before adding a new vehicle.<br/><span id="msgaddcar"></span></span></span>';
				$("#review").before(vcontent);
				$("#review").before(icontent);
				$("#signupForm").formwizard("update_steps");
				$(this).attr('disabled','disabled').css('color','#CCC');
			});		


/********************masked input**************************************/
			$("#telephone, #otel, #ofax").mask("(999) 999-9999");
			$("#platenum").mask("aaa-999");
			$("#chassisnum").mask("*****************");
			$("#motornum").mask("*****-*******");
			$("#mvfnum").mask("9999-99999999999");


/**********************Calendar*************************/
	$("#birthday").datepicker
	({ 
			changeYear: true,
			changeMonth: true,
			yearRange: '-90:-18',
	});

/**************Drop down controller**********/			
//year change event
	$('#year').live('change',function()
	{
		//drop down model
		//adds a loading animation			
		$("#brand").html("<option>Loading...</option>");
		//clears brandlogo
		$('#brandlogo').html('')

		//populates the brand drop down list
		$.ajax
		({
			 type: "POST",
        		 url: "<?php echo base_url();?>index.php/welcome/ajaxbrand/",
	         data: "year=" + $('#year').val(),
	         success: function(msg)
			 {
				$("#brand")
					.html(msg);
			}	 
       	}); //end of the ajax	

		//clears the list in the drop down model
		$("#model").html('<option value="">Select a Model</option>');

	});//end of the year change event

//brand change event		
	$('#brand').live('change',function()
	{
		//adds a loading animation
		$("#model").html("<option>Loading...</option>");

		//drop down model
		$.ajax
		({
			 type: "POST",
        		 url: "<?php echo base_url();?>index.php/welcome/ajaxmodel",
	         data: "year=" + $('#year').val() + "&" + "brandID=" + $('#brand').val(),
	         success: function(msg)
			 {
				$("#model").html(msg);
			}	 
	}); //end of the ajax

	});//end of brand change event

/*Model Event Change*/		
	$('#model').live('change',function() {
				//displays the car type
				$.ajax
				({
					 type: "POST",
					 url: "<?php echo base_url();?>index.php/welcome/cartypeonly",
					 data: "modelID=" + $('#model').val(),
					 success: function(msg)
					 {
						$("#carType")
							.val(msg);
					}	 
				}); // end of the ajax		
	}); //end of the model change function
}); //end of document ready
//Aog change event
$('#aog').live('change',function() 
{
	if ($('#aog').val()==='yes')
	{		
		$("#mortgator").removeAttr('disabled');	

		$.ajax
		({
			type: "POST",
			url: "<?php echo base_url(); ?>index.php/register/mortgator",
			data: "aog=" + $('#aog').val(),
			success: function(msg)
			{
				$("#lblmortgator").show();
				$("#mortgator").addClass("required").show();
				$("#mortgator").html(msg);
			}
		}); //end of ajax

	}
	else
	{
		//$("#bank").html('');	
		$("#lblmortgator").hide();
		$("#mortgator").hide().removeClass("required").html('<option>Select a Mortgator</option>');	
	}
});//end of aog event



    </script>

corbeeresearch · September 2, 2010

About form wizard, it divides your one form into alot of parts using span id as the name of the separate page and the class = step or step_submit as next step or submit page

Sign In

jquery formwizard, adding new steps won't work

Recommended Posts

corbeeresearch

Link to comment

Share on other sites

corbeeresearch

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information