-6

On this site, I have the following form which allows a visitor to select from a choice of mortgage calculators to use:

<select id="dynamic_select" name="cars">
<option value="http://www.visionabacus.com/Finance/Australia/1/SuiteA100/640/Borrowing-Power-Calculator.aspx?ID=MFAA">Borrowing Power Calculator</option>
...
</select><input id="Submitgo" type="submit" style="float:right; clear:both;"/></p>
<br class="cleanBreak" />

<script>// <![CDATA[
$('#Submitgo').on('click', function() { var url = $('#dynamic_select').val(); window.location = url; });
// ]]></script>

When the form selection is chosen, and the submit button is clicked, the user is taken to an external page where the calculator is displayed.

I would like the form to display within a new Wordpress page.

Unfortunately I am designer, not a developer, so I do not know where to start.

I gather perhaps I can change window.location = url to equate to a Wordpress URL?

Perhaps I need to embed the url within an iframe? However, I don't know how to get the window.location to forward to a Wordpress page with an iframe containing the calculator URL.

Thanks.

10
  • I think you can add per form through iframe in new wordpress page then you can redirect after select change. – Devendra Sharma Feb 15 '16 at 11:00
  • Is this done with a Shortcode or is the Form directly in the post_content of this page? – fischi Feb 15 '16 at 11:05
  • Hi @fischi, at this stage I do not know. I don't see how it could work with a shortcode. – Steve Feb 17 '16 at 11:34
  • 8
    decided not to downvote, but this is a horrible question, with almost zero useful info. What research have you done, what options have you tried? – Mark Kaplun Feb 17 '16 at 12:01
  • Can you clear more your question? – Devendra Sharma Feb 18 '16 at 5:23
3
+25

It's better to use Iframe in this case. Here is how I will do it. Do you really need the submit button? in this case I do it without submit button, you can change it to your needs. This example codes can be added to your WordPress page through Text Tab on editor

<style type="text/css">
    .hideframe {
        visibility:collapse;
        display:hidden;
        height:0px;
    }
</style>

<select id="car" name="car">
    <option value="none">None</option>
    <option value="calc">Borrowing Power Calculator</option>    
</select>

<script type="text/javascript">
    window.onload = function() {
        document.getElementById( 'car' ).onchange = function() {
            var calc = document.getElementById( 'calc' );
            if( this.value === 'calc' ) {
                calc.classList.remove( 'hideframe' );
            } else {
                calc.classList.add( 'hideframe' );
            }
        };
    }
</script>

<!-- iframe start -->

<div id="calc" class="hideframe">
    <iframe src="http://www.visionabacus.com/Finance/Australia/1/SuiteA100/640/Borrowing-Power-Calculator.aspx?ID=MFAA" />
</div>
<!-- iframe end -->
1
  • Great. I appreciate this @nackle. – Steve Feb 22 '16 at 12:46
1

Since you don't have access to this website and form your best bet will be to use an <iframe>. Paste this in some page:

<iframe src="http://www.visionabacus.com/Finance/Australia/1/SuiteA100/640/Borrowing-Power-Calculator.aspx?ID=MFAA"  style="height: 100%; width: 700px;">
  <p>
    <a href="http://www.visionabacus.com/Finance/Australia/1/SuiteA100/640/Borrowing-Power-Calculator.aspx?ID=MFAA">
      Fallback link for browsers that, unlikely, don't support frames
    </a>
  </p>
</iframe>

Although keep in mind that some browsers won't show the form as well as if you use it on a page with HTTPS the form won't be show and you will get Mixed Content errors.

1
  • Thanks @denis. Note that this does not provide a drop down box of calculators to choose from, which is a requirement of the client. – Steve Feb 20 '16 at 10:27
0

You should get results using below code:

$( "#dynamic_select" ).change( function() {
    var changingUrl = $( this ).val();
    window.location = changingUrl;
} );

Here you will get a selected option URL by selecting an option from the select box as:

var changingUrl = $( this ).val();

Then redirect the page as you want using:

window.location = changingUrl;
1
  • Please don´t post only code. Explain what it does, how it does that and why you think it should work in the context of the question. – flomei Feb 15 '16 at 12:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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