Parsley - Examples | Multi steps form

neumachen

11/11/2018 - 3:53 AM

Parsley - Examples | Multi steps form

Parsley - Examples Multi steps form.markdown

Rendered
Source

Parsley - Examples | Multi steps form

Where does this show???

A Pen by erika harvey on CodePen.

License.

index.html

<body>
<form class="demo-form">
	<div class="form-navigation">
    <button type="button" class="previous btn btn-info pull-left">&lt; Previous</button>
    <button type="button" class="next btn btn-info pull-right">Next &gt;</button>
    <input type="submit" class="btn btn-default pull-right">
    <span class="clearfix"></span>
  </div>

</form>
  <div class="form-section">
	  <div class = "page-header"></div>
    <label for="firstname">First Name:</label>
    <input type="text" class="form-control" name="firstname" required="">

    <label for="lastname">Last Name:</label>
    <input type="text" class="form-control" name="lastname" required="">
  </div>
 <div class="form-section">
	  <div class = "page-header">50% complete</div>
    <p id="eventDateTime">
		<label for ="date start">Event Starts
			<input type="date" class =" date start" />
			<input type="time" class="time start " /> 
		</label>
		to<br />
		<label for = "date end">Event Ends
			<input type="date" class="date end " />
			<input type="time" class="time end " />
		</label>
</p>
	</div>
	<div class = "form-section">
		 <div class = "page-header">75% complete</div>
    <label for="email">Event Contact Email:</label>
    <input type="email" class="form-control" name="email" required="">
 

 


	  <tr></tr>
		
 
 
      <div id="locationField">
      <input id="autocomplete" placeholder="Enter the 
											events address"
             onFocus="geolocate()" type="text"required></input>
  
	  <tr></tr>

    <table id="address">
      <tr>
        <td class="label">Street address</td>
        <td class="slimField"><input class="field" id="street_number"
              disabled="true"></input></td>
        <td class="wideField" colspan="2"><input class="field" id="route"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">City</td>
        <td class="wideField" colspan="3"><input class="field" id="locality"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">State</td>
        <td class="slimField"><input class="field"
              id="administrative_area_level_1" disabled="true"></input></td>
        <td class="label">Zip code</td>
        <td class="wideField"><input class="field" id="postal_code"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">Country</td>
        <td class="wideField" colspan="3"><input class="field"
              id="country" disabled="true"></input></td>
      </tr>
    </table>
 

</form>
</div>
<div class = "form-section">
	<div class = "page-header">100% complete</div>
	<
    <script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function initAutocomplete() {
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
      {types: ['geocode']});

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  autocomplete.addListener('place_changed', fillInAddress);
}

// [START region_fillform]
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}
// [END region_fillform]

// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}
// [END region_geolocation]

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBOiaxXqgeDsoFRCLduoTioRx4VIljTzEc&signed_in=true&libraries=places&callback=initAutocomplete"
        async defer></script>
		 
  </body>

script.js

$(function () {
  var $sections = $('.form-section');

  function navigateTo(index) {
    // Mark the current section with the class 'current'
    $sections
      .removeClass('current')
      .eq(index)
        .addClass('current');
    // Show only the navigation buttons that make sense for the current section:
    $('.form-navigation .previous').toggle(index > 0);
    var atTheEnd = index >= $sections.length - 1;
    $('.form-navigation .next').toggle(!atTheEnd);
    $('.form-navigation [type=submit]').toggle(atTheEnd);
  }

  function curIndex() {
    // Return the current index by looking at which section has the class 'current'
    return $sections.index($sections.filter('.current'));
  }

  // Previous button is easy, just go back
  $('.form-navigation .previous').click(function() {
    navigateTo(curIndex() - 1);
  });

  // Next button goes forward iff current block validates
  $('.form-navigation .next').click(function() {
    if ($('.demo-form').parsley().validate({group: 'block-' + curIndex()}))
      navigateTo(curIndex() + 1);
  });

  // Prepare sections by setting the `data-parsley-group` attribute to 'block-0', 'block-1', etc.
  $sections.each(function(index, section) {
    $(section).find(':input').attr('data-parsley-group', 'block-' + index);
  });
  navigateTo(0); // Start at the beginning
});

//////////////////////geolocation//////////////
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}
var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function initAutocomplete() {
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
      {types: ['geocode']});

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  autocomplete.addListener('place_changed', fillInAddress);
}

// [START region_fillform]
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}
////////////////////////////EVENT DATE AND TIME/////////////////////


    // initialize input widgets
    

 
 // initialize input widgets
    // ptTimeSelect doesn't trigger change event by default
  
    $('#eventDateTime.date').pikaday();

    var TIMEFORMAT = 'h:mm a';
    var eventDateTimeEl = document.getElementById('eventDateTime');
    var eventDateTimepair = new Datepair(eventDateTimeEl, {
        parseTime: function(input){
            // use moment.js to parse time
            var m = moment(input.value, TIMEFORMAT);
            return m.toDate();
        },
        updateTime: function(input, dateObj){
            var m = moment(dateObj);
            input.value = m.format(TIMEFORMAT);
        },
        parseDate: function(input){
            var picker = $(input).data('pikaday');
            return picker.getDate();
        },
        updateDate: function(input, dateObj){
            var picker = $(input).data('pikaday');
            return picker.setDate(dateObj);
        }
    });

scripts

<script src="//code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://rawgit.com/guillaumepotier/Parsley.js/2.3.3/dist/parsley.js"></script>

style.css

.form-section {
  padding-left: 15px;
  border-left: 2px solid #FF851B;
  display: none;
}
*{
	color:#191919;
}
.form-section.current {
  display: inherit;
	background-color: ;
	color: whitesmoke;
	font-size: 24px;
}
 #map {
        height: 100%;
      }
.btn-info, .btn-default {
  margin-top: 10px;
}
 #locationField, #controls {
        position: relative;
        width: 100%;
      }
      #autocomplete {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 99%;
      }
      .label {
        text-align: right;
        font-weight: bold;
        width: 200px;
		  text-align:justified;
        color: #191919;
		  
      }
      #address {
		  margin-left: 30%;
		  padding-top: 4%;
   
		  margin-top: 5%;
        color:#eeddbb;
        width: 800px;
        padding-right: 2px;
      }
      #address td {
        font-size: 24pt;
		  text-align: right;
		  padding-bottom: 5%;
		  padding-top: 5%;
		  margin-top: 3%''
		  
      }
      .field {
        width: 100%;
      }
      .slimField {
        width: 180px;
      }
      .wideField {
        width: 240px;
      }
      #locationField {
    margin-top: 5%;
        margin-bottom: 2px;
      }

styles

<link href="https://rawgit.com/guillaumepotier/Parsley.js/2.3.3/bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<link href="https://rawgit.com/guillaumepotier/Parsley.js/2.3.3/doc/assets/docs.css" rel="stylesheet" />
<link href="https://rawgit.com/guillaumepotier/Parsley.js/2.3.3/src/parsley.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/css/pikaday.css" rel="stylesheet" />

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Parsley - Examples | Multi steps form

Parsley - Examples | Multi steps form