generator form

[711]

I'm completely new to javascript (and forms), and I'm trying to make a form page where user input (via checkboxes and text fields) will be inserted into a line of text at a fixed point (think "mad libs"), and the output is displayed in a multiline text field without reloading the page.

Thanks in advance.

[Twey]

(think "mad libs")

... what?

[jscheuer1]

I remember those from somewhere but not really, I forget what they are. Definitely had heard of them. Anyways, some basic code on how some of this may be done is in this thread:

http://www.dynamicdrive.com/forums/s...ad.php?t=13981

Once you see that and play with it a little, you could probably ask a more specific question that would be easier for one of us to answer.

[djr33]

Mad libs are fill in the blank short stories.
The player is asked to come up with, for example, 2 nouns (1 plural, 1 signular), 3 verbs (in particular tenses), 3 adjectives, 1 animal, and 2 occupations.
The other player (or the same one, if playing by him/herself) inserts those into the prewritten story.
The books are purchased, usually... not a game that you just write your own stories for (though this is entirely possible, but just not how I've played, and it would take too long).

For example:
1 animal: MONKEY
1 adjective: TALL
1 plural noun: POTATOES
"story": There was a MONKEY that had an unusual fascination for TALL POTATOES. [...]



Something like that.



711, the way to do this would generally be to use the value of the field...
<input type="text" id="noun" onChange="story.value=story.value+this.value">
This would result in the value of the "story" field having the value of the textfield added to the end of it when the textfield was changed.

This is clearly a simple example and there are problems, like what if it changes in the wrong order, and such.

The coding shouldn't be too complex, but the logic might be, depending on how complex your story is.


Looking into PHP (a serverside language) might also help, depending on the exact functionality you need.

[Twey]

Something like what's detailed in this thread?

[711]

Something like what's detailed in this thread?

Very much like that, with 3 exceptions:
-The output does not need to be live (meaning: it's fine to have a "generate/create/submit" button)
-The input must be from a text field, not a drop down box
-I need there also to be checkboxes, which if checked, add a string to the "story", and if left unchecked, do not affect the "Story"

Thank you all for your replies.

[djr33]

Javascript IS live. That's the point.
You could have it render onSubmit (an action added to the <form...> tag), or based on a button at the bottom of the form, but be sure to disable sending the form as well.
However, more secure, and more compatible would be doing this with php then.

PHP is server side so it gets the data then does stuff, then outputs html.

It would recieve the filled in form and output html to the user.

PAGE 1:
<form action="next.php">
<input type="text" name="noun">
</form>
PAGE 2:
(next.php, or whatever, just need to match the action above)
<?php
echo "There was a $_GET['noun'].";
?>

That is a VERY simple example, but php is easy to use to manipulate submitted form values.
Also, it's server side, so the server must have php installed, but it outputs just html, so the browser will ALWAYS be compatible, unlike javascript where the user must have it (and the right version for that matter).

NOTE: PHP cannot be live. (AJAX is an exception here, but that is just a fancy name for using javascript to load php in the background, so it's just faking it anyway, and is complex, not very compatible, and not needed here.)

[711]

The end result will be just a tool for personal use, so security is of no matter, and compatability is also of no matter. Also, having an "output" page, would double the time it took to use it, so, that's a very negative aspect.

[djr33]

security IS an issue as a hacker would use your personal use page to get into your website and do bad things.
compatibility.... that's fine. But, php is still totally compatible, so you never have to worry about making it work with the browser, even if that is just your browser (or your two browsers, or your browser and your friend's.....).

Huh? Why would having an output page double the time?
1. Enter info.
2. Click submit.
3. Read.
Either way, the processing time should be a split second and unless your page happens to have a lot of media content, even on a dialup connection, it would be very fast to load.
I'm missing something.

If you don't want output as a different page, I suppose just use javascript with onSubmit in the form tag. Not my recommendation, though.

[711]

By personal tool, I meant to imply it'd be hosted locally, not published anywhere. Which also rules out php (portability). What I must have forgotten to explain is the purpose of this. It'll probably get used several times in a row, so having to hit back and reorient would get very annoying after the third or so use. It's for generating html table rows, based on user input, for insertion into pre-existing tables. Specifically, this table:

<tr><td>[[result of checkbox 1]]</td>
<td>[[result of checkbox 2]]</td>
<td>[[result of checkbox 3]]</td>
<td>[[result of checkbox 4]]</td>
<td>[[result of checkbox 5]]</td>
<td rowspan="2"><img src="[[textfield b input]]"></td></tr>
<tr><td colspan="5">[[textfield a input]]</td></tr>

I removed all sizing and styling for the sake of simplicity, but that's the basic concept of it. So needed would be a form with 5 checkboxes, and 2 textfields (excluding the output textfield). The checkboxes, when checked would insert data into a cell, or if left unchecked, would leave the corresponding cell empty. The textfields are self explanatory.

I figure a little effort now saves a lot of copying and pasting later, right?