0

I've got a store locator currently on my website - this works by loading an ajax map when the user enters a postcode, this all works fine on the one page that it is on.

The problem I am having is I now want a separate input box on my home page where a user can input their postcode, be redirected to the store locator page and have the map load.

I am sending the postcode from the home page to the store locator page through GET. It then takes the data puts it into the input form and submits it - this all happens on the page load. However when it then starts loading the AJAX, it causes a little refresh(?) which then makes it run the original javascript again and a loop begins.

My code to process the GET data and search is this;

<script>
    var getData = new QueryData();              
    var str = jQuery.param( getData );
    var result = str.split("=")[1];
    result = result.replace('+', ' ')
    console.log(result);
    $( "postcode" ).text( result );
    document.getElementById('postcode').value = result;
    document.getElementById("postcodesearch").click();
</script>

My AJAX script is the following;

bindFindARetailerMapFormValidators: function() {
    $('#findARetailerMapForm').formValidation().on('success.form.fv', function (e) {
        // Prevent form submission
        e.preventDefault();

        // Get the form instance
        var $form = $(e.target);

        $('html, body').animate({
            scrollTop: $("#findARetailerResultsOuter").offset().top
        }, 600);
        document.getElementById('loader').style.display = "block";
        postcode = $('#postcode').val();
        $.ajax({
            type: "POST",
            url: '/umbraco/Surface/FindARetailer/PostcodeSearch',
            contentType: "application/json; charset=utf-8",
            dataType: 'text',
            data: JSON.stringify({
                postcode: postcode
            }),
            success: function (response) {
                $("#findARetailerResults").fadeOut('fast', function () {
                    $("#findARetailerResultsOuter").html(response).fadeIn('fast');

                    document.getElementById('loader').style.display = "none";
                });
                $form.data('formValidation').disableSubmitButtons(false);
            },
            failure: function (response) {
                $form.find('.form-error').text(response);
                $form.find('.form-error').fadeIn('slow');
                $form.data('formValidation').disableSubmitButtons(false);
            }
        });
    });
},

The form accepting my postcode is;

                <form method="post" id="findARetailerMapForm" autocomplete="off">
                        <div class="find-near-you-postcode-container">
                            <label for="postcode">Postcode</label>
                            <input type="text" name="postcode" id="postcode" placeholder="Enter Postcode" />
                            <input type="image" id="postcodesearch" src="~/Assets/FindARetailer/search.png" alt="Go" />
                        </div>
                    </form>

Any help on the issue would be greatly appreciated.

1 Answer 1

0

The problem seems to be that you're not hitting the code that contains your e.preventDefault() line. I think this is because you are nesting all that code in an anonymous function and assigning it to the key bindFindARetailerMapFormValidators, but you're not calling that function anywhere. If you look at the example in the documentation for the validation library you're using (here), you'll see that they select the form in the scope of the document.ready function and don't nest it in another function.

So I can suggest two possible solutions:

  1. Extracting your validation and ajax code from that function:

    var getData = new QueryData();              
    var str = jQuery.param( getData );
    var result = str.split("=")[1];
    
    result = result.replace('+', ' ')
    console.log(result);
    
    $( "postcode" ).text( result );
    document.getElementById('postcode').value = result;
    document.getElementById("postcodesearch").click();
    
    $('#findARetailerMapForm').formValidation().on('success.form.fv', function (e) {
        e.preventDefault();
        etc...
    
  2. If you can't do this for some reason, perhaps you can bind the bindFindARetailerMapFormValidators variable to a submit event on the form and achieve the same result, like so:

    $("findARetailerMapForm").on("submit" bindFindARetailerMapFormValidators)
    

Though the validation library my interfere with this. Anyway, those are my suggestions. Apologies if I've misunderstood what you're trying to do.

3
  • @btwebsite Thanks for your input - however I've just tried both of your suggested solutions and I'm still hitting a loop before the ajax loads.
    – J. Gill
    Dec 2, 2015 at 16:51
  • @J.Gill Too bad! Another thing I noticed. You call the jQuery method .click() on the submit button, but you did not select it as a jQuery object. Perhabs that is part of the problem. Maybe try $("#postcodesearch").click(), or even better, $("#findARetailerMapForm").submit().
    – branweb
    Dec 2, 2015 at 17:01
  • Another thing that may help is if you move the event listener above the code where you trigger it. In other words, the .click() or .submit() method should be called below the $('#findARetailerMapForm').formValidation().on('success.form.fv, ...
    – branweb
    Dec 2, 2015 at 20:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.