PDA

View Full Version : generator form



711
10-16-2006, 02:58 AM
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
10-16-2006, 05:08 AM
(think "mad libs")... what?

jscheuer1
10-16-2006, 07:24 AM
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/showthread.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
10-16-2006, 08:20 AM
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
10-16-2006, 04:14 PM
Something like what's detailed in this thread (http://www.dynamicdrive.com/forums/showthread.php?t=11106)?

711
10-17-2006, 02:27 AM
Something like what's detailed in this thread (http://www.dynamicdrive.com/forums/showthread.php?t=11106)?
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.:D

djr33
10-17-2006, 03:58 AM
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
10-17-2006, 06:35 AM
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
10-17-2006, 07:08 AM
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
10-17-2006, 07:45 AM
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?

djr33
10-17-2006, 08:08 AM
You could use a recursive php setup where it goes to itself and only generates the text if the form had been sent (easy with if statements)
But.... now I get why php and security aren't issues.

Well.. sure... use javascript, then.

711
10-17-2006, 12:54 PM
You could use a recursive php setup where it goes to itself and only generates the text if the form had been sent (easy with if statements)
But.... now I get why php and security aren't issues.

Well.. sure... use javascript, then.That's where I need the help. :p :D I can't code javascript to save my life.

djr33
10-17-2006, 12:59 PM
Learn :)

<html>
<head>
<script.......>
function createtext() {
story.value= "There once was a "+
animal1.value+
"and he had a "+
noun1.value+
"the end";
}
</script>
</head>
<body>
<form onSubmit="return createtext()">
<textarea id="story"></textarea>
<input type="text" id="animal1"><br>
<input type="text" id="noun1"><br>
....more....
<input type="submit">
</form>
</body>
</html>


Untested, should work... something like that... easy to customize.

Additionally, using
<input type="reset" onClick="createtext()">
would reset the form (might be what you want) and do the textarea with the results. Not sure which order it goes in, though.

711
10-18-2006, 05:13 AM
That does work... sort of... it displays the text, but then it just disappears, test it. >.> (and how would I incorporate checkboxes?)

But that is by far the best answer I've seen yet. =D

djr33
10-18-2006, 06:18 AM
Ah.
Change these two lines:
<form onSubmit="return false;">
......
<input type="button" onClick="createtext();" value="submit">

The first didn't work.... it submitted (to itself), reloading the page. I thought return function() would return the value of the function instead, but the form was sent anyway. Not sure why.

Now...
the first line is the form just telling it to return false... not return the submit.... so it won't send. (To avoid the enter key)

The submit button is no long of type="submit", so it won't try to submit, and it is set to onClick="createtext();" so it runs the javascript.

That's it.


Checkboxes? What would they do? Like... turn an answer on or off?

Generally...
(within javascript)
if (box.checked == 1) {
story.value = "hi";
}

ASSUMING:
<input type="checkbox" id="box">



Question for the JS experts: why does ID work with JS, and name work with php and other submitted forms? Should we use both, or is there a better procedure?

711
10-18-2006, 09:15 AM
Yes, spot on with what the checkboxes are supposed to do.

The correction works (though the onSubmit argument in the form tag is redundant, as there is no submit button anymore). You've been really helpful so far, so I guess just one more question, how do I get "hi" to insert at a specific point in the text? As it is with just those lines inserted, it doesn't do anything with the result.

tech_support
10-18-2006, 09:34 AM
You could change:

story.value = "hi";

to:

document.getElementById("txtId").innerHTML = "hi"

and you put <div id="txtId"></div> wherever you want it.

711
10-18-2006, 09:50 AM
Perhaps you could expand on that a little more? I don't see what you're getting at.

(and despite what your sig says, I thought I'd ask; would you mind if we moved over to live conversation via msn?)

tech_support
10-18-2006, 09:51 AM
Sure.

711
10-18-2006, 10:10 AM
Okay, peter had to go before we could get into a discussion.

The code now looks like this:
<html>
<head>
<script type="text/javascript">
function createtext() {
story.value= "There once was a "+
animal.value+
" and he had a "+
noun.value+
" the end";
}

if (box.checked == 1) {
story.value = "hi";
}
</script>
</head>
<body>
<form>
Animal<input type="text" id="animal"><br>
Noun<input type="text" id="noun"><br>
hi<input type="checkbox" id="box"><br>
<input type="button" onClick="createtext();" value="submit"><br>
<textarea id="story"></textarea>
</form>
</body>
</html>The text fields are fully functional, and everything works but the checkbox. I don't see what there is to make "hi" appear in the textarea.

tech_support
10-18-2006, 10:55 AM
<html>
<head>
<script type="text/javascript">
function createtext() {
story.value= "There once was a "+
animal.value+
" and he had a "+
noun.value+
" the end";
}

if (box.checked == 1) {
document.getElementById('story').value = "hi"
}
</script>
</head>
<body>
<form>
Animal<input type="text" id="animal"><br>
Noun<input type="text" id="noun"><br>
hi<input type="checkbox" id="box"><br>
<input type="button" onClick="createtext();" value="submit"><br>
<textarea id="story"></textarea>
</form>
</body>
</html>

Twey
10-18-2006, 07:40 PM
Well, with a little modification to the code in the thread I posted:
<script type="text/javascript">
window.onload = function() {
for(var i = 0, f = document.forms; i < f.length; ++i)
if(f[i].onchange && f[i].onchange.toSource().toLowerCase().indexOf('selectprintf'))
for(var j = 0, e = document.forms[i].elements; j < e.length; ++j)
if(e[j].tagName.toLowerCase == "select")
e[j].onchange = f[i].onchange;
};

function selectPrintf(frm, opEl, opStr /*, selectOneName, selectTwoName, selectThreeName, ... */) {
for(var i = 3, el; i < arguments.length && el = frm.elements[arguments[i]]; ++i)
if((typeof el.checked === "undefined" || el.checked) && typeof el.value !== "undefined")
opStr = opStr.replace(/%s/, el.value);
frm.elements[opEl].value = opStr;
}
</script>... it should handle both checkboxes and selects nicely.

711
10-18-2006, 10:08 PM
peter, same problem, it just doesn't display "hi", ever.

Twey, I have no idea how I'd either implement, or customize that.

tech_support
10-19-2006, 01:23 AM
Try this:



<html>
<head>
<script type="text/javascript">
function createtext() {
story.value= "There once was a "+
animal.value+
" and he had a "+
noun.value+
" the end";

if (box.checked == 1) {
document.forms['form1'].elements['story'].value = "hi"
}
}
</script>
</head>
<body>
<form name='form1'>
Animal<input type="text" id="animal"><br>
Noun<input type="text" id="noun"><br>
hi<input type="checkbox" id="box"><br>
<input type="button" onClick="createtext();" value="submit"><br>
<textarea id="story" name="story"></textarea>
</form>
</body>
</html>


Edit: Typo

711
10-19-2006, 02:45 AM
OKay, peter, it's starting to work, but the "hi" replaces the story, instead if getting inserted into the story.

djr33
10-19-2006, 04:23 AM
then use story.value+"hi"

Just look at the current syntax and immitate it. It's not any harder than what you're seeing :)

711
10-19-2006, 05:18 AM
Okay, I changed around a couple things, added a hidden field and an else whaddayacallit and it worked. there were a couple problems, but from what I've learned in this thread, I was able to play with it and get it working. Thanks for all your help, guys, here's the working code:


<script type="text/javascript">
function createtext() {
if (box.checked == 1) {document.forms['form1'].elements['hi'].value = "hi";}
else {document.forms['form1'].elements['hi'].value = " ";}
story.value= "There once was a "+animal.value+" with a "+noun.value+" the end "+hi.value; }
</script>

<form name='form1'>
<input type="hidden" id="hi">
Animal<input type="text" id="animal"><br>
Noun<input type="text" id="noun"><br>
hi<input type="checkbox" id="box"><br>
<input type="button" onClick="createtext();" value="submit"><br>
<textarea id="story" name="story"></textarea>

tech_support
10-19-2006, 06:22 AM
Just look at the current syntax and immitate it. It's not any harder than what you're seeing :)

Sorry. I tend to do things the complicated way. Not lazy (efficient) like you ;)

You could change document.forms['form1'].elements['hi'].value = "hi"; to document.forms['form1'].elements['hi'].value+="hi"; if you wanted to add the value to the current textarea instead of clearing it (I think...)

djr33
10-19-2006, 06:38 AM
I think the + issue is fixed already, from looking at his code.

Don't worry, I wasn't saying your code was wrong or too much, just that 711 should be able to start based on what we've posted and learn from there.

tech_support
10-19-2006, 06:40 AM
Oh ok.

711
10-19-2006, 10:37 AM
Yeah, I'd already applied the above code to the real application before posting, and there wasn't a single problem, which I found very surprising (and thoroughly gratifying). SO this can be considered a complete success.

Thanks to (in order of appearance) Twey, John, djr33 and Peter.

djr33
10-19-2006, 12:29 PM
Glad it worked for you.
Good luck.

Twey
10-19-2006, 07:28 PM
Twey, I have no idea how I'd either implement, or customize that.It says very clearly in the thread I posted :) Just use text boxes and check boxes instead of selects.