Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Web form / Select (beginner)

    Hello,

    Is it possible modify this form

    Code:
    <form name="input" action="">
    <fieldset>
    Redirect: <select name="merchant">
    <option value="https://www.amazon.com" selected="yes">amazon</option>
    <option value="https://www.ebay.com">ebay</option>
    <option value="https://www.bestbuy.com">bestbuy</option>
    </select>
    <br />
    <input type="submit" value="Submit" />
    </fieldset>
    </form>
    such that clicking on Submit redirects to the selected option in {amazon.com, ebay.com, bestbuy} ? If so, how?

  • #2
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    OK, now when you submit the form it will get validated by js and redirected.
    There's a fall back with PHP as well if you want it.

    PHP Code:
    <?php 

    error_reporting 
    (E_ALL E_NOTICE);

    if (
    $_POST['redirect']) {
        if (isset(
    $_POST['merchant']) && !empty($_POST['merchant'])) {
            
    $directTo $_POST['merchant'];
            
    header("location:".$directTo);
        }
        else {
            echo 
    "Sorry, you did not make a selection.";
        }
    }    

    ?>

    <html>
    <head>
    <script>
    function validate(form) {
    if (document.form.merchant.value == "") {
        alert("You did not make a selection");
        return false;
        }
    var directTo = document.form.merchant.value;     
    window.location=directTo;
    }        
    </script>

    </head>

    <body>
    <form method="post" action="" name="form" onsubmit="return validate(this);">
    <fieldset>
    Redirect: <select name="merchant">
    <option value="" selected="yes">Please select</option>
    <option value="https://www.amazon.com">amazon</option>
    <option value="https://www.ebay.com">ebay</option>
    <option value="https://www.bestbuy.com">bestbuy</option>
    </select>
    <br />
    <input type="submit" name="redirect" value="Submit" />
    </fieldset>
    </form>
    </body>

    </html>
    Last edited by dan-dan; 03-07-2012 at 07:38 PM.

  • Users who have thanked dan-dan for this post:

    aroj (03-08-2012)

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That is helpful, thanks, but it doesn't quite work, yet.

    I copy pasted this


    <html>
    <head>
    <script>
    function validate(form) {
    if (document.form.merchant.value == "") {
    alert("You did not make a selection");
    return false;
    }
    var directTo = document.form.merchant.value;
    window.location=directTo;
    }
    </script>

    </head>

    <body>
    <form method="post" action="" name="form" onsubmit="return validate(this);">
    <fieldset>
    Redirect: <select name="merchant">
    <option value="" selected="yes">Please select</option>
    <option value="https://www.amazon.com">amazon</option>
    <option value="https://www.ebay.com">ebay</option>
    <option value="https://www.bestbuy.com">bestbuy</option>
    </select>
    <br />
    <input type="submit" name="redirect" value="Submit" />
    </fieldset>
    </form>
    </body>

    </html>
    in an empty file and saved it. Opened the file with my browser (Firefox). Selected amazon. Clicked submit, and what it does is reset the selected option to "Please select" i.e. the default, rather than redirect to amazon.com

    The "You did not make a selection" functionality, however, works.

  • #4
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Aaarrrggghhh... I HATE JAVASCRIPT!
    I don't know why the javascript isn't working, I've checked on various sources and it appears to be the right syntax.

    The PHP works, I can guarantee that. As not everyone will have javascript enabled, it would be wise to have the PHP fall back anyway.

    Someone help with the javascript, please...

  • #5
    New Coder
    Join Date
    Mar 2012
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Opening a file containing:

    Code:
    <html>
    <head>
    <script language="JavaScript">
    window.location="http://amazon.com";
    </script>
    </head>
    </html>
    works as anticipated. But not this:

    Code:
    <html>
    </head>
    <script type="text/javascript">
    function validate() {
    if (document.form.merchant.value == "") {
        alert("You did not make a selection");
        return false;
        }
    var directTo = document.form.merchant.value;     
    window.location="http://amazon.com"; // A constant, for now
    }        
    </script>
    </head>
    
    <body>
    <form method="post" action="" name="form" onsubmit="return validate();">
    <fieldset>
    Redirect: <select name="merchant">
    <option value="" selected="yes">Please select</option>
    <option value="https://www.amazon.com">amazon</option>
    <option value="https://www.ebay.com">ebay</option>
    <option value="https://www.bestbuy.com">bestbuy</option>
    </select>
    <br />
    <input type="submit" name="redirect" value="Submit" />
    </fieldset>
    </form>
    </body>
    It seems as though validate() is invoked onsubmit, though, otherwise "You did not make a selection" wouldn't flash when it's appropriate.

  • #6
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    I would do something along the line of:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript">
            function validate(){
                var selO = document.getElementById('merchant');
                if(selO.selectedIndex == 0){
                    alert('You have not made a selection');
                } else {
                    window.location.href = selO.value;
                }
                return false;
            }
            </script>
        </head>
        <body>
            <form method="post" action="" onsubmit="return validate();">
                Redirect: <select id="merchant">
                    <option selected="selected">Please select</option>
                    <option value="url1">amazon</option>
                    <option value="url2">ebay</option>
                    <option value="url3">bestbuy</option>
                </select>
                <br />
                <input type="submit" name="redirect" value="Submit" />
            </form>
        </body>
    </html>
    Last edited by webdev1958; 03-08-2012 at 01:38 AM.

  • #7
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    I tried a load of things after posting that. I too realised it only worked outside of a function. I find it weird and incredibly frustrating, but javascript is my worst enemy at the best of times!

    I promise myself to buy a book on js next pay day

    Do you not wish to use server side scripting?

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    <select id="merchant" onchange="location.href = this[this.selectedIndex].value">

    and then they don't even need to press the submit button (so you could hide the button if JavaScript is enabled but leave it there so that the value can be submitted to a server side script to do the redirect when JavaScript is disabled).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    aroj (03-08-2012)

  • #9
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Amazing!!!
    I definately need to buy a book on javascript.
    Cheers.

    Quote Originally Posted by webdev1958 View Post
    I would do something along the line of:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript">
            function validate(){
                var selO = document.getElementById('merchant');
                if(selO.selectedIndex == 0){
                    alert('You have not made a selection');
                    return false;
                } else {
                    window.location.href = selO.value;
                }
                return false;
            }
            </script>
        </head>
        <body>
            <form method="post" action="" onsubmit="return validate();">
                Redirect: <select id="merchant">
                    <option selected="selected">Please select</option>
                    <option value="url1">amazon</option>
                    <option value="url2">ebay</option>
                    <option value="url3">bestbuy</option>
                </select>
                <br />
                <input type="submit" name="redirect" value="Submit" />
            </form>
        </body>
    </html>

  • #10
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    actually, you don't need the first return false;

    Code:
            
            function validate(){             
                var selO = document.getElementById('merchant');             
                if(selO.selectedIndex == 0){                 
                     alert('You have not made a selection');             
               } else {
                     window.location.href = selO.value;             
               }             
               return false;           
           }

  • #11
    New Coder
    Join Date
    Mar 2012
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by webdev1958 View Post
    actually, you don't need the first return false;

    Code:
            
            function validate(){             
                var selO = document.getElementById('merchant');             
                if(selO.selectedIndex == 0){                 
                     alert('You have not made a selection');             
               } else {
                     window.location.href = selO.value;             
               }             
               return false;           
           }
    Thanks, I tried with and w/o return false, and there is no improvement.

  • #12
    New Coder
    Join Date
    Mar 2012
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    <select id="merchant" onchange="location.href = this[this.selectedIndex].value">

    and then they don't even need to press the submit button (so you could hide the button if JavaScript is enabled but leave it there so that the value can be submitted to a server side script to do the redirect when JavaScript is disabled).
    This works, thanks.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •