CodingForums.com - Web form / Select (beginner)

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Web form / Select (beginner) (http://www.codingforums.com/showthread.php?t=253544)

aroj	03-07-2012 05:40 PM

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?

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 (Post 1201839)

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 (Post 1201849)

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 (Post 1201843)

This works, thanks.

All times are GMT +1. The time now is 01:24 PM.