PDA

View Full Version : Forms - Submit Actions

dana_aleshire
04-23-2003, 06:53 PM
Hello-
I have read many tutorials and looked at a few posts, one which may have my answer (: Form2Popup, posted bu ShMiL), but I still don't understand.

my question:
I want to have a form in which the contents entered into the text fields appears on a new page. This new page would be accessed after hitting the submit button. What kind of code do I need to do this? I am somewhat familiar with creating forms in HTML and Javascript, but everywhere I look seems to have a 'mailto' action when the user hits submit.

How would I set up that next page where the entered text would appear?
an example of what I am looking for (http://www.madlibs.org/cgi-bin/madlib?hamlet.ml2)

Even a re-direct to a tutorial would be appreciated. Thank you for reading.
Philip M
04-23-2003, 07:20 PM
You will need a server side language to imitate that.
liorean
04-23-2003, 07:24 PM
I think he can do it using location.hash and location.search, but it's a long time since I tried to pass variables between consequent pages, so I don't remember exactly how things are passed.
dana_aleshire
04-23-2003, 07:28 PM
i am (obviously) still looking for answers,
i found this, but i don't think it will hep me:

to long-story
show paragraph1
show paragraph2
show paragraph3
show paragraph4
end

to paragraph1
output (se line1.1 line1.2 line1.3 line1.4 line1.5)
end

to paragraph2
output (se line2.1 line 2.2 line 2.3)
end

to line1.1
question [Name an animal]
make "animal answer
question [Give me an adjective.]
make "adjective1 answer
question [Name a place]
make "place answer
question [Give me another adjective]
make "adjective2 answer
output (se [Once upon a time there was a]
:adjective1
:animal
[who lived in a]
:adjective2
:place
)
end

to line1.2
etc.
end

seen at http://www-courses.cs.uiuc.edu/~cs199lbp/slot-filling.html
cheesebagpipe
04-23-2003, 11:46 PM
Hi Dana.

Here's a simple way of doing this w/o involving cgi/server-side processes. The querystring function is from faqts.com (http://www.faqts.com/knowledge_base/view.phtml/aid/969).

<html>
<head>
<title>Madlibs</title>
</head>
<body bgcolor=#FFFFFF>
<img src="http://www.madlibs.org/images/madlb_sm.gif">
<p>
<br>
<form action="madlib.htm" method="get">
<table border=0>
<tr>
<td align=right>Verb</td>
<td><input type=text name="be" size=36 maxlength=255></td>
</tr>
<tr>
<td align=right>Noun</td>
<td><input type=text name="question" size=36 maxlength=255></td>
</tr>
<tr>
<td align=right>Noun</td>
<td><input type=text name="mind" size=36 maxlength=255></td>
</tr>
<tr>
<td align=right>Plural noun</td>
<td><input type=text name="arrows" size=36 maxlength=255></td>
</tr>
<tr>
<td align=right>Adjective</td>
<td><input type=text name="outrageous" size=36 maxlength=255></td>
</tr>
<tr>
<td align=right>Plural noun</td>
<td><input type=text name="arms" size=36 maxlength=255></td>
</tr>
<tr>
<td align=right>Plural noun</td>
<td><input type=text name="troubles" size=36 maxlength=255></td>
</tr>
<tr>
<td align=right>Verb ending in <i>-ing</i></td>
<td><input type=text name="opposing" size=36 maxlength=255></td>
</tr>
<tr>
<td align=right>Hamlet:</td>
<td><input type="file" name="pic"></td>
</tr>
<tr>
<td><br><br><input type=submit value="Generate Madlib"></td>
</tr>
</table>
</form>
<p>
<br>
</body>
</html>


[madlib.htm]

<html>
<body bgcolor="#ffffff">
<title>Madlibs</title>
<script type="text/javascript" language="javascript">

function parseQueryString (str) {
str = str ? str : location.search;
var query = str.charAt(0) == '?' ? str.substring(1) : str;
var args = new Object();
if (query) {
var fields = query.split('&');
for (var f = 0; f < fields.length; f++) {
var field = fields[f].split('=');
args[unescape(field[0].replace(/\+/g, ' '))] =
unescape(field[1].replace(/\+/g, ' '));
}
}
return args;
}

var madlibs = parseQueryString();

</script>
</head>
<body bgcolor=#FFFFFF>
<img src="http://www.madlibs.org/images/madlb_sm.gif">
<p>
<br>
<script type="text/javascript" language="javascript">

var output = '';
output += 'To be, or not to <i><b>' + madlibs['be'] + '</b></i>, -- ';
output += 'that is the <i><b>' + madlibs['question'] + '</b></i>;<br>';
output += 'Whether \\'tis nobler in the <i><b>' + madlibs['mind'] + '</b></i> to suffer<br>';
output += 'The slings and <i><b>' + madlibs['arrows'] + '</b></i> of ';
output += '<i><b>' + madlibs['outrageous'] + '</b></i> fortune,<br>';
output += 'Or to take <i><b>' + madlibs['arms'] + '</b></i> against a sea of ';
output += '<i><b>' + madlibs['troubles'] + '</b></i>,<br>';
output += 'And by <i><b>' + madlibs['opposing'] + '</b></i> end them.<br><br>';
output += '<span style="font-size:24px;">Hamlet: </span><img align="top" src="' + madlibs['pic'] + '">';
document.write(output);

</script>
</body>
</html>
dana_aleshire
04-24-2003, 12:15 AM
wheee! i think i get it.
thanks so much!

one last question. ;) can i do the same thing with the image that someone can browse on their computer for?
cheesebagpipe
04-24-2003, 12:31 AM
....one last question.:p LOL...Edited the above. *Enjoy.*
dana_aleshire
04-24-2003, 08:22 PM
Thank you so much for all your help.
and your patience:o
I cannot say thank you enoguh.
dana_aleshire
04-24-2003, 09:25 PM
Ahh! I tried to personalize it... what is wrong with my code? what are the rules for writing? any referrals? i feel so lame. Thanks again.

var output = '';
output += 'Once upon a time there was a wonderful person named <i><b>' + insects['username'] + '.';
output += ' + insects['username'] 'was a very' + insects['chardescrip'] + 'individual who loved to' + insects['verb1'] + ';
output += 'One day, while' + insects['username'] + 'was' + insects['verb2'] + 'a giant insect...';
output += '<span style="font-size:14px;">your picture</span><img align="top" src="' + insects['pic'] + '">';
document.write(output);
beetle
04-24-2003, 09:39 PM
I keep an active demo page of my own version of this script.

http://www.peterbailey.net/dhtml/form_preview.htm

Point any get-method form at it and watch what happens

Or, here's a sample link
http://www.peterbailey.net/dhtml/form_preview.htm?FirstName=Peter&LastName=Bailey
cheesebagpipe
04-24-2003, 09:42 PM
I'm over in Marin, maybe I should just drive by...:cool:

Watch out for stuff like this:

output += ' + insects['username'] 'was a very' + insects['chardescrip']

insects['username'] is a variable (object property) so, no quotes, either end...but you need the plus signs to concatenate (paste) it in:

output += insects['username'] + ' was a very ' + insects['chardescrip']

Don't forget spaces where appropriate, and look out for apostrophes (what\\'s up).
dana_aleshire
04-25-2003, 04:52 PM
yay! it works. i am not done, so i won't say that it is resolved. but most importantly i think i understand.
thanks for all your help.

ps.
hah! drive by... have you no hope for me?
dana_aleshire
04-27-2003, 01:40 AM
OK, so I have it working for the most part. But when I try to put images withing the text output it doesn't work. Also, I am having trouble adding multiple images when re-naming them with the values they are associated with.

Does what I said make any sense?
THIS IS THE SCRIPT I WOULD WANT, but when the images are inserted it does not work

<script type="text/javascript" language="javascript">var output= '';
output += 'Once upon a time, there was a wonderful person named ' + insects['username'] + '.<BR>';
output += insects['username'] + ' was a very ' + insects['chardescrip'] + ' individual who loved to ' + insects['verb1'] + '.<BR>';
output += '<span style="font-size:14px;">' + insects['username'] + '</span><img align="top" src="' + insects['pic1'] + '"><BR>';
output += 'One day, while ' + insects['username'] + ' was ' + insects['verb2'] + ' a giant insect ' + insects['verb3'] + ' ' + insects['userpronoun1'] + ' with it\'s ' + insects['insectpart'] + '.<BR>';
output += 'Not realizing what was going on, ' + insects['username'] + ' immediately stopped ' + insects['verb2'] + ' and looked around.<BR>';
output += '"' + insects['exclaim1'] + '!" ' + insects['username'] + ' exclaimed. "Giant ' + insects['adj1'] + ' insects are attacking everywhere!"<BR>';
output += 'At this point, ' + insects['username'] + ' was feeling ' + insects['feeling1'] + ', so ' + insects['userpronoun'] + ' decided to ' + insects['useraction'] + '.<BR>';
output += 'The ' + insects['adj1'] + ' insects were so ' + insects['feeling2'] + ', that they ' + insects['insaction'] + '.<BR>';
output += '"I won\'t let you ' + insects['adj2'] + ' take over ' + insects['place'] + '!" ' + insects['username'] + ' exclaimed, continuing, "' + insects['userquote'] + '"<BR>';
output += '<span style="font-size:14px;">' + insects['place'] + '</span><img align="top" src="' + insects['pic2'] + '"><BR>';
output += 'Hearing this, the insects began to ' + insects['verb4'] + ' away. As they were ' + insects['verb5'] + ' a giant ' + insects['natdis'] + ' occurred and all of the ' + insects['adj2'] + ' insects began to die.<BR>';
output += '<span style="font-size:14px;">' + insects['natdis'] + '</span><img align="top" src="' + insects['pic3'] + '"><BR>';
output += '"' + insects['deathcry'] + '," one cried.<BR>';
output += 'During the ' + insects['natdis'] + ', ' + insects['username'] + ' had fallen over and scraped ' + insects['userpronoun1'] + ' ' + insects['userpart'] + '.<BR>';
output += 'Gettting up, ' + insects['userpronoun'] + ' realized that ' + insects['userpronoun'] + ' was alright. Feeling a little bit ' + insects['feeling3'] + ' after all of this ' + insects['excitement'] + ', ' + insects['username'] + ' decided to go home and ' + insects['verb7'] + '.<BR><BR>';
output += 'THE END.<BR>';
document.write(output);
</script>


thanks for reading
cheesebagpipe
04-27-2003, 02:40 AM
Pretty close!

Now for the (hem) de-bugging:

I assume you did this:

var insects = parseQueryString();

Now you've got your insects object, with its properties named after the form inputs, each containing the values entered on the other page & passed via the querystring. Remember what I said about the apostrophes?

+ insects['userpronoun1'] + ' with it\\'s ' + insects
output += '"I won\'t let you ' + insects

JS doesn't know an apostrophe from the single quotes that you're using to delimit (mark out) the string. Tell it. The way I generally check is to set up a search & replace in my editor with a single quote (search) and a single + backslash (replace). Then click your way through the whole string - usually the enter key does it once the 'find' button has focus...if the highlight doesn't jump from side-to-side (and around each property name), oops! ['replace'].

Can't comment on the image problem w/o seeing the HTML; if the <input type="file" name="pic1"> etc. is in there, should work fine. btw - if you don't have TOOLS>INTERNET OPTIONS>ADVANCED>Display a notification... checked in Internet Explorer, do it - debugging without any help is awful.
dana_aleshire
04-27-2003, 09:58 PM
strange... i had caught the apostrophes before and put in \' ...i wonder why it didn't show up when i pasted. on campus i am writing in BBEdit which changes the colors of the text so it is easy to tell if the script will work or not.

when i insert the image code, the first line works, but when i tried to put in multiple images was when i had the problem.

any ideas?

i can add ONE image to the bottom of the page/ end of the script. but i would like to have more than one and spread through out the text output

the form (http://artstream.ucsc.edu/fdm170a/dana/form1a.html)
the story generated (http://artstream.ucsc.edu/fdm170a/dana/story1a.html)

EDIT - I got it to work!!! I ended up creating new script beginning and end tags for every part. seems to work fine.

THANKS FOR THE HELP!
cheesebagpipe
04-27-2003, 10:07 PM
Hi, Dana...yeah, thought of that after posting - this forum strips out single backslashes (you need to type \\) in certain contexts. The multiple image inputs should work; would need to see what doesn't (condensed, if possible) to make a guess.

cheers, cbp
beetle
04-27-2003, 11:08 PM
I would do this differently. Instead of hard-coding all the data into the output, I'd just put in placeholders, like {} or # or whatever you choose, Then, retrieve all the get data as an array, loop through the string finding your placeholders and filling in with the data

something like

var data = ['Peter','mad','Disney World']; // data from previous page
var story = "<p>{} became very {} one day and decided to go to {}</p>";

var i = 0;
var pattern = /\{\}/;
while ( pattern.test( story ) )
{
story = story.replace( pattern, data[i++] );
}
document.write( story );:thumbsup: