#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    154
    Rep Power
    14

    Using Javascript to determine page taken to on submission of form


    Can anyone give some ideas or examples of javascript code which could be used to determine the webpage which a form goes to based upon the criteria filled out in the form.

    To make things clearer, an example in my case is that if a user selects the option '3' in the field 'min num of bedrooms:', then I would like the form (when the user presses the submit button) to go to a particular url.

    The code for the form is shown below (note, the 'action' is blanked at the moment as I'm sure the solution will involve putting some variable in there):

    <form method="POST" action="">
    <tr>
    <td width="50%" align="right">
    <p><font size="2" face="Arial" color="#007952">District/Area:</font></p>
    </td>
    <td width="50%">
    <p><font color="#007952"><select size="1" name="District">
    <option selected>All Districts</option>
    <option>Burley</option>
    <option>Harehills</option>
    <option>Headingley</option>
    <option>Kirkstall</option>
    <option>Woodhouse</option>
    </select></font></p>
    </td>
    </tr>
    <tr>
    <td width="50%" align="right"><font size="2" face="Arial" color="#007952">Rent
    per Month(£):</font></td>
    <td width="50%"><font color="#007952"><select size="1" name="MinRentPerMonth">
    <option selected>No Minimum</option>
    <option>50</option>
    <option>100</option>
    <option>150</option>
    <option>200</option>
    <option>250</option>
    <option>300</option>
    <option>350</option>
    <option>400</option>
    <option>450</option>
    <option>500</option>
    <option>550</option>
    <option>600</option>
    <option>650</option>
    <option>700</option>
    <option>750</option>
    <option>800</option>
    </select> And <select size="1" name="MaxRentPerMonth">
    <option selected>No Maximum</option>
    <option>250</option>
    <option>300</option>
    <option>350</option>
    <option>400</option>
    <option>450</option>
    <option>500</option>
    <option>550</option>
    <option>600</option>
    <option>650</option>
    <option>700</option>
    <option>750</option>
    <option>800</option>
    <option>850</option>
    <option>900</option>
    <option>950</option>
    <option>1000</option>
    </select></font></td>
    </tr>
    <tr>
    <td width="50%" align="right"><font size="2" face="Arial" color="#007952">Minimum
    Number of Bedrooms:</font></td>
    <td width="50%"><font color="#007952"><select size="1" name="MinNumofBedrooms">
    <option selected>Any Number</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    </select></font></td>
    </tr>
    <tr>
    <td width="50%" align="right"><font size="2" face="Arial" color="#007952">Type
    of Property:</font></td>
    <td width="50%"><font color="#007952"><select size="1" name="TypeofProperty">
    <option selected>Any</option>
    <option>Apartment</option>
    <option>Bedsit</option>
    <option>Detached</option>
    <option>Flat</option>
    <option>Semi-Detached</option>
    <option>Terraced</option>
    <option>Town House</option>
    </select></font></td>
    </tr>
    <tr>
    <td width="100%" align="right" colspan="2">
    <p align="center"><font color="#007952"><input type="submit" value="Submit" name="B1">
    <input type="reset" value="Reset" name="B2"></font>
    </td>
    </tr>
    </form>

    Thanks in advance!
  2. #2
  3. Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Oct 2001
    Location
    New Zealand
    Posts
    1,774
    Rep Power
    24
    You can use:

    document.forms["formname"].action = "pagetogoto"

    to set the page that handles the form.

    So, if you used a button to validate the form, you could do:

    document.forms[0].action = document.forms[0].MinNumofBedrooms.value + ".php"
    document.forms[0].submit()
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    13
    Code:
    <html>
    <head>
    <script type="text/javascript" language="javascript"> 
    
    // form action URLS here, keyed to selected values
    var action = Object();
        action['any'] = 'javascript&#58;alert("any")';
        action['1'] = 'javascript&#58;alert("1")';
        action['2'] = 'javascript&#58;alert("2")';
        action['3'] = 'javascript&#58;alert("3")';
        action['4'] = 'javascript&#58;alert("4")';
        action['5'] = 'javascript&#58;alert("5")';
        action['6'] = 'javascript&#58;alert("6")';
    
    function chkredir(oForm) {
         var oSelect = oForm.MinNumofBedrooms; //get select
         oForm.action = action[oSelect[oSelect.selectedIndex].value]; //plug in selected value to action object
         return true;
    } 
    
    function checkform(oForm) {
         //validation routines here
         return chkredir(oForm);
    }
    
    </script>
    </head>
    <body>
    <form method="POST" onsubmit="return checkform(this)">
    .........
    .........
    <select size="1" name="MinNumofBedrooms">
    <option value="any" selected="selected">Any Number</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    </select>
    You can easily assemble a longer string from more than one select's value, and use that to change the form action, targeting with greater discrimination. This is really server-side stuff, guessing you knew that.

IMN logo majestic logo threadwatch logo seochat tools logo