CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Paul Cunningham
Paul Cunningham

Reputation: 79

Display External Web Page Content on Button Click

Sorry if this question has been asked before, I have gone through the resources available and have still not found a solution to my problem.

I have an input field where the user enters their website, keyword, or industry, and when they click go they are redirected to semrush.com to view the data. 

<form onsubmit="handlerSubmitForm(this);" class="widget-form" target="_parent" method="get" action="http://www.semrush.com/search.php">
        <input type="text" name="q" class="widget-form__input" placeholder="Domain, keyword or url">
        <input type="hidden" name="db" value="us">
                        <input type="hidden" name="ref" value="798325166">
                    <div class="widget-form__db">us</div>
        <button type="submit" class="widget-form__submit">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14.7 13.3l-3.7-3.7c.6-.9 1-2 1-3.1 0-3-2.5-5.5-5.5-5.5s-5.5 2.5-5.5 5.5 2.5 5.5 5.5 5.5c1.2 0 2.2-.4 3.1-1l3.7 3.7c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4zm-12.2-6.8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z"/></svg>
        </button>
    </form>

Is there any way I can have this data display below the button once they click it? Instead of redirecting them to the semrush.com page?

I understand this can be accomplished using an iframe,

<iframe id="myIframe" src="http://www.semrush.com/search.php" onLoad="iframeDidLoad();"></iframe>

but I don't know how to add the inputted data to the iframe src You can view the current code on JSFiddle
Any help would be very much appreciated.

Upvotes: 0

Views: 167

Answers (1)

An Overflowed Stack
An Overflowed Stack

Reputation: 344

Use Ajax. Serialize the form data and do a ajax call to that url, then populate the iframe with the page returned. 

 $("button").click(function(){
        $.ajax(
        {
        url: "http://www.semrush.com/search.php", 
        type:'get',
        data: $( "form" ).serialize(), //find a way to serialize form data. 
        success: function(result){

          //result is the full html page returned from this url. Then you can put this in a iframe

        }});
    });

Upvotes: 1

Related Questions