The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> directing to pages using the values of several form elements
ColdSweat
post Jul 30 2014, 05:22 PM
Post #1





Group: Members
Posts: 3
Joined: 28-July 14
Member No.: 21,319
Hi,

I have started learning HTML recently and I'd like to create a form that directs you to a new page after you made your choices. Meanwhile it has become clear that I need javascript for this task, and the problem is that I have not learned javascript at all, so I got stuck.

However I've put a simple version together, just to figure out how the implementation works.

Here is the code:

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
  <title>test</title>
</head>
<body>
<form name="nav"> Asian cars
  <select name="Asian">
  <option value="Suzuki">Suzuki</option>
  <option value="Honda">Honda</option>
  </select>
European cars
  <select name="Eurpean">
  <option value="choice_1">Opel</option>
  <option value="choice_2">Fiat</option>
  </select>
  <table style="text-align: left; width: 181px; height: 90px;"
id="table1" border="1" cellpadding="2"
cellspacing="2">
    <tbody>
      <tr>
        <td align="undefined" valign="undefined">
        <select name="list_1"
onchange="document.location.href=
document.nav.list_1.options[document.nav.list_1.selectedIndex].value">
        <option selected="selected">-</option>
        <option value="http://www.cs.tut.fi/~jkorpela/forms/">option_1</option>
        <option value="http://www.google.com">option_2</option>
        </select>
        </td>
        <td align="undefined" valign="undefined"></td>
      </tr>
      <tr>
        <td align="undefined" valign="undefined"></td>
        <td align="undefined" valign="undefined"></td>
      </tr>
      <tr>
        <td align="undefined" valign="undefined"></td>
        <td align="undefined" valign="undefined"></td>
      </tr>
    </tbody>
  </table>
  <input name="colors" value="red" type="radio">red
  <input name="colors" value="white" type="radio">white
  <input name="colors" value="blue" type="radio">blue<br>
</form>
<br>
</body>
</html>


I'd like to have 4 things to be chosen, the first two are in the first two drop down lists, the third one via the radio buttons, and the fourth via a drop down list found in the table. There will be a similar table with a drop down list in each of its cells, and when an option is selected here, the browser should load a page based on the values of the form elements. I'd like to insert these values to a string template which would create the URL in the end where the browser should go , it would make a lot of things easier.

For example the template is x_x_x_x.html, and if the combination of the choices is : Opel,Suzuki,Red,option1 the page to load is opel_suzuki_red_option1.html.

My questions are:

- how exactly do I access these values ( I guess that it goes like, document.nav.colors, document.nav.asian etc..) ?
- how do I put them together into a string to pass it to document.location.href
- how do you open this URL in a new tab ?

Thanks in advance

This post has been edited by ColdSweat: Jul 30 2014, 05:26 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 30 2014, 10:48 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
You need to read up on how to get the values from different form controls. It's a little complicated in some cases. When you have the values you string them together using the + operator and add the underscores you want. Note that what isn't variables needs to be quoted, in this case the underscores and the .html extension, hence you need a lot of + signs.

Here's my take at it. I'm to tired to come up with good variable names, change as you like. I left the alert in so it's easier to check that you get the right values. Delete it when you're satisfied. You have URLs as the values of list_1. I guess that was just for testing.

CODE
function doDa()

{
   var asian = document.nav.Asian.options[document.nav.Asian.selectedIndex].value;
   var euro = document.nav.Eurpean.options[document.nav.Eurpean.selectedIndex].value;
   var opt = document.nav.list_1.options[document.nav.list_1.selectedIndex].value;


   var col = document.nav.colors
   var colval = '';
   var i;
   for (i=0;i<col.length;i++)
   {
      if (col[i].checked)
      {
         colval = col[i].value;
      }
   }


   alert(asian + '\n' + euro + '\n' + opt + '\n' + colval); //Just for checking. Remove when done with it.

   window.location = asian + '_' + euro + '_' + opt + '_' + colval + '.html';
}


You also need this in the HTML.

HTML
<input type="button" value="Go there" onclick="doDa()">



I noticed you've spelt European wrong (Eurpean). That will come back and bite you sooner or later. It sure did me, because I didn't notice the typo and spelled it right. wink.gif

Also there is no align="undefined" and valign="undefined". If you don't want to use align and valign - don't. Just leave them out.
http://htmlhelp.com/reference/html40/tables/td.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 10:58 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC