Submit Forms

AndrewWarden · Joined: 05 Jan 2005 Posts: 1

How can I submit values of a dropdown box, textboxes, and textfield to a certain e-mail address directly... also having the message formatted when sent ... the page is getting feedback from visitors..

Example format of the e-mail received:
name:____
e-mail:____
comments:_____

Also, how do I go to a new page on the same window when I hit on submit?

Thanks a lot...

G.

gavinwm · Joined: 11 Jan 2005 Posts: 27

When you submit a form, it will do nothing unless you tell it to.

If you want to gather info and send it in an email you must send the form to a page which can do something with the form. You do this by giving the form an action which is a parameter of the opening form tag, i.e

<form action="page_that_does_stuff_with_form.php">

When you submit the form you are taken to "page_that_does_stuff_with_form.php". This works like an <a> tag except form info can be retrieved by the new page.
You need the new page to be PHP or ASP or Perl, or some language that can process the form. As you can see, my bogus page is PHP

You cannot process a form using javascript or html, you can only use javascript to fool around with the form before you submit it (e.g. form validation).

There are many excellent tutorial on the web which show you how to format form data and send as email.

rasta_artist · Joined: 17 Sep 2004 Posts: 8 Location: CT, USA

question: what about a <option> list......scenario--- a user selects a item from a list and clicks go.....i want that item to be linked to specific url, or page...i've learned that a javascript can do that....like u stated a javascript can work with that request and

can u provide any sorta help with that?

gavinwm · Joined: 11 Jan 2005 Posts: 27

If you want the form to take you to a URL chosen by you from a <select> menu you need to use a little javascript magic.

The way I would do it is as follows:

Do not give the opening <form> tag an "action". That's because javascript will perform the action. Instead, use an onsubmit="javascript:yourJavascriptFunction(); return false;" in the opening <form> tag, e.g.

<form onsubmit="javascript:chooseURL(); return false;">

The "return false" statement allows you to control the form and prevent it from submitting till you say so. You are taken instead to the "chooseURL()" function.

The chooseURL() function wants to find which item you selected from a dropdown menu and send you to the URL. Firstly you gave your <select> tag a name like "bob" or more sensibly "URLchooser", e.g.

<select name="URLchooser">

Now to build the function. I'll show you the code then give a brief explanation of how it works.

function chooseURL() {
var actionToTake = new Array('page1.html','http://www.goodturnip.org','page2.html');
var optionNumber = document.forms[0].URLchooser.selectedIndex;
if(optionNumber == 0) {
return;
} else {
location.href=actionToTake[optionNumber];
}
}

Firstly, make a "new Array()" which will contain the URLs. Each URL must be enclosed by quotes (single or double - doesn't matter but be consistent) and comma separated from the next URL. I've called my array "actionToTake".

var actionToTake = new Array('page1.html','http://www.goodturnip.org','page2.html');

Next, I've created a tasty little variable called "optionNumber" which finds which option you've selected from your <select> menu.

var optionNumber = document.forms[0].URLchooser.selectedIndex;

I've put "forms[0]" but if you have more than one form you will have to amend this. "URLchooser" is referencing the <select> menu within the form. "selectedIndex" returns a number corresponding to the selected item in the dropdown.

Once you've got this invaluable information use a bit of the old if...else.

if(optionNumber == 0) {
return;
}

In other words, if nothing has been selected from the <select> menu, do nothing, quit the function and return to fingernail examination.

Else if something has been selected then do the following:

location.href=actionToTake[optionNumber];

"location.href=" will take you to a page. The bit after the "=" is where you go. "actionToTake[]" is the array, "optionNumber" is the selected number from <select> menu. Stick "optionNumber" into actionToTake[] and you'll be whisked off to "http://www.goodturnip.org", if you selected the second item on the dropdown.

Word of caution: make sure you have the same number of selectable options in the dropdown list as are in the array or you'll get an arrayIndexOutOfBounds exception. If you want an item in the list to go nowhere then just use empty quotes for that item in the array.

There are plenty of other ways to achieve the same results. I like the simplicity of the above function. You could use a switch() block if you like.
That might be good if you kept changing the size of the dropdown.

rasta_artist · Joined: 17 Sep 2004 Posts: 8 Location: CT, USA

Gavinwm!

You are awesome! Thank you so much! I kinda understood , i'll have to spend more time reading what you wrote and experimenting a bit..i dont have time at the moment cause i'm ohn my way to work....

but from what i did research i learned i needed a javascript to achieve my end result. which is similiar to this url>>> http://www.skateboarding.com/skate/photos/0,12616,,00.html

notice the photo section's drop down menu, it even has a search feature....which would be nice, but i'm more concerned about organization through a pull down menu....again thank you, i'll study what you wrote and experiment.! thanks gavinwm

gavinwm · Joined: 11 Jan 2005 Posts: 27

No problem! Especially for someone who's into skating and reggae.

You're correct about needing javascript. That's what my function is - chooseURL(). I forgot to mention this has to be within <script></script> tags.

If you want the dropdown to take you to a popup window instead of a fresh page in the same browser window, you can still use my code with one difference.

Look at the "else { ... } part of the "if...else" block.

Instead of having:

location.href=actionToTake[optionNumber];

do:

window.open(actionToTake[optionNumber],'','width=400,height=400');

window.open(param1,param2,param3) is a javascript command to open a new window. It has three parameters.

param1 = the URL you want the user to go to. In this case it's decided by the user's selection from a dropdown as discussed in my last message (actionToTake[optionNumber]).

param2 = the name for the popup window. You can just put in a pair of single quotes unless you want to reference the window with fancy javascript stuff, in which case you can call it anything you want as long as you use the same name when referencing it.

param3 = how the popup window will look. Here you can set the width and height in pixels, allow toolbars, scrollbars, etc.

Type window.open() into a search engine and you'll get results showing and explaining all the possible options available here.

rasta_artist · Joined: 17 Sep 2004 Posts: 8 Location: CT, USA

gavin....

i'm still trying to figure this out...... i'm very close.....i have another question.... not sure if the code does this yet, but

the way it should work like that sample url i sent you before..... when the user selects an <option> from the list....each <option> will bring the user to a different pop up window.....the code that i hAVe now has a window.open() syntax in it already, so when i added the :

window.open(actionToTake[optionNumber],'','width=400,height=400')

you suggested everything on my page stopped working....

so i assumed they were conflicting....

this is my url: http://www.rossowclothingcompany.com/html_site/vidspics_static.htm

i'm gonna keep working at it..... if you dont mind responding to my request....i'll be much appreciative.

-rasta

rasta_artist · Joined: 17 Sep 2004 Posts: 8 Location: CT, USA

i have it working gavinm thanks Smile