• Resolved Pepperfly

    (@pepperfly)


    Obligatory apologies in advance if this is in the wrong place. Been searching for a couple days for a solution and hope the community can help.

    First of all, I have a hand-crafted html form on a page. It has a select tag and 6 options. Fpr some reason when I publish and view the page the drop down list doesn’t show all the options (sometimes only the first, but sometimes only the first and second options).

    OK, that’s buggin’ me enough, but the real problem is that each option needs to be able to open a respective web page (url is the option value) when selected and the submit button is clicked. Is this doable?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Michael

    (@southstationmedia)

    Not really a WP issue but here’s a really basic example..
    Form:

    <form action="handler.php" method="get">
    <select name="url">
    <option value="page1.html">Page 1</option>
    <option value="page2.html">Page 2</option>
    </select>
    <input type="submit" />
    </form>

    handler.php:

    <?php
    header("Location: https://ExampleDomain.Com/".$_GET['url']);
    ?>

    Thread Starter Pepperfly

    (@pepperfly)

    Thanks for the example. Haven’t tried this, but looks like exactly what I need.

    Despite not being a WP issue (thanks again for the example), I also mentioned the dropdown list wasn’t showing all the options, which I thought might have been a WP issue. I guess I just panicked. Turns out it was a styling issue, where the form was at the bottom of my #content-wrapper, and the z-index was too low causing the options to “slip behind” the top of the footer section. ??

    All is working now. Thanks again, Michael! ??

    Thread Starter Pepperfly

    (@pepperfly)

    Hrmmm… if I may continue discussing the form example, I get an HTTP Error 500. Here are the lines I modified:

    Form:
    <form action="https://www.MyDomain.com/path/to/gotourl.php" method="get">

    …and PHP (I have the full URL as the value for each option):
    header("Location: ".$_GET'url');

    BTW, I found an implemented an example that uses javascript:

    <form>
        <select name="URL" onchange="if (this.value) window.open(this.value);">
            <option selected="selected" value=""> Choose Donation Amount </option>
            <option value="https://www.url1.com">URL#1</option>
            <option value="https://www.url2.com">URL#2</option>
            <option value="https://www.url3.com">URL#3</option>
            <option value="https://www.url4.com">URL#4</option>
            <option value="https://www.url5.com">URL#5</option>
            <option value="https://www.url6.com">URL#6</option>
        </select>
    </form>

    This example works, however it doesn’t use a submit button and instantly goes to the URL upon selecting an option. That’s not really a problem, but it is a little presumptuous. Is there a way to do something similar using javascript with a submit button, rather than PHP? I do realize there is the chance client-side javascript might be turned off, and that there’s an argument for letting the server handle redirects, but… I’m rolling the dice. ??

    Thread Starter Pepperfly

    (@pepperfly)

    I figured out how to use the submit button javascript method. I removed the javascript from the select tag and added the following before the closing form tag:
    <input type="submit" value="Submit" onclick="window.open(url.value);" />

    Easy enough. ??

    Thread Starter Pepperfly

    (@pepperfly)

    I figured out another way to do it with an anchor tag (which actually works out better for my need (in this case) than the ordinary submit button.

    Change the select tag to:
    <select id="url" name="url">

    Replace:
    <input type="submit" value="Submit" onclick="window.open(url.value);" />

    …with:
    <a href="javascript:if (document.getElementById('url').value) window.open(document.getElementById('url').value);" target="_blank">Submit</a>

    I’m able to add classes to the anchor tag (that I’m already using elsewhere) to style it as a custom button. Would have required extra CSS just to to the same to the input[type=”submit”] tag.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Form on a page, select option and submit opens new page’ is closed to new replies.