PDA

Click to See Complete Forum and Search --> : contents generator via javascript

hexadecimal_1
07-30-2003, 01:56 AM
damn webpage deleted my entry!

arggggggh... not a good start. Anyway i'm new here so hello to everyone in the forums.

My question is that i'm trying to create a content generator that includes a form to enter values and the output which will be formatted with tables.

I am really new to javascript and i've been looking for tutorials to study how to impliment such a script but all I could find were very complex examples and nothing that was specifically what I was after.

Bascially what would happen is that i'd have a form with a number of options (eg. option 1 = fruit, option 2 = price, drop down option 3 = vendors) stuff like this. Then those values would be passed onto a TEXTAREA and include the formatted html from a VAR i'm guessing. I've tried it with simple stuff but it doesn't work at all.

If anyone could point me to some tutorials to help me understand how to gather info from a form (images, drop down menu option, user text, etc.) I would appreciate it.

Thanks. :)
Lost_comp
07-30-2003, 02:01 AM
you've come 2 the right place 2 seek help. Sorry I can't help U, Im just learning JavaScript but most timesU get the right answers here. :)
xataku_nakusute
07-30-2003, 02:03 AM
i dont know of many sites thatll have easier examples/tutorials....however, if youd like, i could explain them to you if you want
hexadecimal_1
07-30-2003, 02:36 AM
Here is what I want to do.

http://webhome.idirect.com/~darkchyld/generator/generate.gif

Can anyone show me a tutorial where I can figure out how to do such a thing. It's not so much that I want someone to write out the code and just hand it off to me. I want to understand how the code works. What each function does and what it's doing.
xataku_nakusute
07-30-2003, 03:09 AM
<script type="text/javascript">
function fruitbasket()
{
price = document.f.p.value;
color = document.f.c.value;
self.document.write("<html>"+"<body>"+"<table>"+"<tr>"+"<td>"+"Fruit:"+"</td>"+"<td>"+"Price:"+"</td>"+"<td>"+"Color:"+"</td>

"+"<tr>"+"<td>"+document.f.fruit.options[document.f.fruit.selectedIndex].text+"</td>"+"<td>"+price+"</td>"+"<td>"+color+"</td

>"+"</tr>"+"</table>"+"</body>"+"</html>");
}
</script>
<form name="f">
<select name="fruit">
<option>Orange</option>
<option>Apple</option>
<option>Melon</option>
</select>
<br>
<input type=text name=p value="Price">
<input type=text name=c value="Color">
<input type=button onclick="fruitbasket()" value="View Basket">
</form>
xataku_nakusute
07-30-2003, 03:21 AM
<script type="text/javascript">
function fruitbasket()
{

that is the basic beginning of a function in javascript(you might know this already)

price = document.f.p.value;
color = document.f.c.value;

i assign a value to 2 different variables(namely price and color)

price = document.f.p.value;
color = document.f.c.value;

the "document" part tells the function to be called and run on the open document.....

"f" becomes the NAME of our form, thus:

<form name="f">

the "p" specifies the input field, named p
and the same with the "c" except pertaining to a different input field within our form.....

self.document.write("<html>"+"<body>"+"<table>"+"<tr>"+"<td>"+"Fruit:"+"</td>"+"<td>"+"Price:"+"</td>"+"<td>"+"Color:"+"</td>"+"<tr>"+"<td>"+document.f.fruit.options[document.f.fruit.selectedIndex].text+"</td>"+"<td>"+price+"</td>"+"<td>"+color+"</td>"+"</tr>"+"</table>"+"</body>"+"</html>");

this is the tricky part
ill break it down for ya

self.document.write

this tells the script to WRITE whatever is in the ()'s and apply it to the DOCUMENT's own SELF(NOTE: to make the output open in a new window, replace SELF.DOCUMENT.WRITE with WINDOW.OPEN().DOCUMENT.WRITE)

all of the text within the proceeding ()'s is the HTML markup that will be applied to your new page
everything within ""'s is either HTML markup, or plain text.
everything that is excluded from ""'s is JavaScript markup
we use the + to concatenate two items together, or plainly, join two items together

document.f.fruit.options[document.f.fruit.selectedIndex].text

this means to go to form "f", then to select "fruit", then to the option that is selected, and return the output as the text written within the <option> and </option> tags

hope that helps you a bit