Web form / Select (beginner)

aroj · 03-07-2012, 05:40 PM

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?

dan-dan · 03-07-2012, 06:49 PM

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>

aroj · 03-07-2012, 08:34 PM

That is helpful, thanks, but it doesn't quite work, yet.

I copy pasted this

Quote:

<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.

dan-dan · 03-07-2012, 09:04 PM

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...

aroj · 03-08-2012, 12:57 AM

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.

webdev1958 · 03-08-2012, 01:13 AM

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>

dan-dan · 03-08-2012, 01:17 AM

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?

felgall · 03-08-2012, 01:23 AM

<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).

dan-dan · 03-08-2012, 01:29 AM

Amazing!!!
I definately need to buy a book on javascript.
Cheers.

Quote:

Originally Posted by webdev1958

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>

webdev1958 · 03-08-2012, 01:40 AM

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;           
       }

aroj · 03-08-2012, 10:35 AM

Quote:

Originally Posted by webdev1958

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.

aroj · 03-08-2012, 10:38 AM

Quote:

Originally Posted by felgall

<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.