CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Sam
Sam

Reputation: 39

Input into form, output into iframe URL

I am trying to get a map search where the user inputs the location they want and it appears in an iframe below, so user looks for London and the URL would bring back google.com/maps&location=london. I cannot get the output part to work so far;

I feel I am so close just can't work out how to move the location to the iFrame

<div class="search">
<div class="row">       
    <div class="large-6 medium-6 small-12 columns">
        <div class="postcode-wrapper">
            <form class="lookup-form">                  
                <input type="text" class="postcode" placeholder="Location" >
                <input type="submit" class="go-btn" value="Search"/>
                <a  href="#" class="fancybox go" style="position:absolute; left:-99999px" data-fancybox-type="iframe">Search</a>
                <div class="form-error"></div>
            </form>
            <script>
                jQuery('form').submit(function (evt) {
                    evt.preventDefault();
                    var error = false;
                    var error_list = [];

                    var $postcode = jQuery('.postcode').val();

                    if($postcode == ''){
                        error = true;
                        error_list.push('Location is required');
                    }
                    console.log(error);
                    if(error === true){
                        jQuery('.form-error').show();
                        jQuery('.search-results').hide();
                        jQuery('.form-error').html('');
                        for(i=0;i<error_list.length;i++){
                            jQuery('.form-error').append(error_list[i]+'<br/>');
                        }
                    }else if(error === false)  {
                        jQuery('.form-error').hide();
                        jQuery('.postcode-wrapper .go').click(function(){
                            jQuery(".search-results").slideDown("slow");
                        });                         

                        var location = encodeURIComponent(jQuery('.postcode-wrapper .postcode').val());
                        console.log(location);  
                        jQuery('.postcode-wrapper .go').click();                        
                    }
                    return false;
                });
            </script>
        </div>          
    </div>
</div>  
</div>
<div class="search-results">
    <div class="map">       
        <iframe src="http://google.com/maps&location=OUTPUTHERE" width="100%" height="400" frameborder="0"></iframe>
    </div>
</div>

Upvotes: 0

Views: 67

Answers (1)

Steven B.
Steven B.

Reputation: 9372

So you just need to be able to pass the location to the src?

Use $('#selector').attr('src', value);

Also, your var declaration used the wrong selector to get the value.

}else if(error === false)  {
     jQuery('.form-error').hide();
     jQuery('.postcode-wrapper .go').click(function(){
          jQuery(".search-results").slideDown("slow");
     });                         

     var location = encodeURIComponent(jQuery('.postcode').val());  // Fix your selector
     console.log(location);  
     $('iframe').attr('src', 'https://google.com/maps&location=' + location); // Add this
     jQuery('.postcode-wrapper .go').click();                        
}

And one last thing, I believe the url is wrong and it should be https://www.google.com/maps/place/locationvariable.

Upvotes: 1

Related Questions