Form Connected to ATM Locator

This allows for a simple form to be placed on any page of the site, where a user can enter a zip code or address. On submit of that form, the user is taken to the page that uses the Editable Blog CategoriesBranch/ATM Locator Banno component.

This code will work with sites of any age! You will only need to edit the HTML of the form to match the styling of your site. It will also work with Parsley–just make sure to update the parsley classes/functions in the form.

How To

HTML

This is the form that goes on the other page. You may need to edit it to match the styling of the form & version of parsley used on your site.

<form class="form-inline" action="/about-us/locations" method="GET" data-parsley-validate>
	<p class="biggest">Enter Your Zip Code to Locate a Branch or ATM!</p>
  	<label for="location" class="visuallyhidden">Zip Code</label>
  	<input type="text" data-parsley-zip  name="location" placeholder="Zip Code" required>
  	<button type="submit" class="btn btn-default">Go</button>
</form>

Script (within HTML)

Place this inside of a script tag, on your atm.mustache file–or whatever file your branch/ATM locator Banno component is placed. Make sure that it goes BELOW the “scripts” mustache tag. If things don’t work, there are several console.logs included in the code that you can uncomment. Just make sure to comment them out again when you’re done testing!

<script type="text/javascript">
    $(function(){
        if(document.location.search.length) {
          	setTimeout(function() {
            	$('#location').val(getLocationInput('location'));
            	$('#locationSearch').trigger('click');
          	}, 1000)
        }
        function getLocationInput(name) {
          	name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
          	// console.log(name);
          	var regexS = "[\\?&]" + name + "=([^&#]*)";
          	// console.log(regexS);
          	var regex = new RegExp(regexS);
          	// console.log(regex);
          	var results = regex.exec(window.location.search);
          	// console.log(results);
          	if(results == null) {
            	// console.log('dont work');
            	return "";
          	} else {
            	// console.log('this is working');
            	return decodeURIComponent(results[1].replace(/\+/g, " "));
          	}
        }
    });
</script>

Example Sites

• First National Bank (Paragould) (Form on homepage)
• 1st United Services Credit Union (Form on homepage)

Tags: BS2, BS3, BS4, ATM locator, search, banno component, html, js