Need HTML help...

[jonnyGURU]

Ok... I'm trying to make a form for people trying to submit info to me.

I would like to have a textarea appear only based on the condition that the previous element of the form is answered a certain way.

For example, if I ask "Do you want more information about IP Office?" and there's a radio button for "Yes" and "No," normally I would have "If no, please explain what product you would like more information on." as the next form element.

What I would like to do is leave the text and textarea field "invisible" for those who answered "yes." If they answer "yes," the field is going to be left blank anyway. If they answer "no," I would like the textarea to appear so they can fill it out.

I know I can do it if they were two seperate forms. Submit the first part and then create a second form on the fly based on the results of the first, but I want this to be seamless and all submit in one form.

Any takers?

 

[Rip the Jacker]

http://www.tizag.com/htmlT/forms.php

??

 

[jonnyGURU]

That's a gentle tutorial on how to use forms. Thanks, but I already know how to make a form.

What I'm looking for will require a bit of javaScript, I'm sure.

I want certain form elements to not appear until other form elements are true. Perhaps with a document.write or something.

 

[bchalker]

Actually, flash works quite well handing forms and such...with PHP as the backend. Flash itself can have the "if then" conditional aspects of the form.

 

[kamper]

var tbox = document.getElementById('yourboxesname');
var radbutton = document.getElementById('yourradbuttonsname');
if (radbutton.value == 'yes') {
__tbox.style.visible = 'false';
} else {
__tbox.style.visible = 'true';
}

That's the gist of it. The syntax is proably a little off, I haven't done it in a while.

 

[hopejr]

I did something similar for work the other day, but I just disabled the form element instead

BTW, I think it's style.visibility="hidden" and style.visibility="visible".

 

[kamper]

http://www.w3schools.com/css/pr_class_visibility.asp

You are correct sir. Thanks.

 

[Templeton]

Probably want to use display instead of visibility, toggle between display:none and display:block. Can update the state by attaching an onChange to the radio button.
here's a javascript function to toggle display back and forth:

 

[jonnyGURU]

I'lll post what I have in the morning. What you all are submitting makes sense to me, but it's hard for me to picture it in context with what I'm doing.

Thanks for the input!!

 

[hopejr]

display is good, but it also leaves spaces where the element would be. If it was a large textarea, there would be a large gap in the form.

 

[Beau]

Originally posted by: hopejr
display is good, but it also leaves spaces where the element would be. If it was a large textarea, there would be a large gap in the form.

no, that's visibility:hidden. Display:none hides the space it takes up.

 

[hopejr]

oh, my bad.

 

[jonnyGURU]

Ok... Here's what I have:

if (location.search.length > 0)
DataPassed = unescape(location.search.substring(1));
document.write("<input type=\"hidden\" name=\"SourcePage\" value=\""+DataPassed+"\">")

Now, what I want to avoid is if someone clicked on a link that passed something through the URL that DIDN'T pertain to what they want information about (the reason they're submitting the form) that they have a text area to explain what they are requesting information about.

So the next part of my form asks:

document.write("Are you interested in information about "+DataPassed+"?")
document.write("<br>")
document.write("<input type=\"radio\" name=\"Interested in "+DataPassed+"\" value=\"Yes\" checked> Yes ")
document.write("<input type=\"radio\" name=\"Interested in "+DataPassed+"\" value=\"No\"> No ")

Of course, this is still in the same SCRIPT because I'm still working with "DataPassed" here.

If they answer "Yes", I want to proceed to the rest of the form. If they answer "No" I want them to have an opportunity to explain what they do want information on.

Example:

URL is form.html?widget because they came from the Widget page. The value of "DataPassed" is now "Widget." This value is submitted as "SourcePage," which is fine.

I then want to ask, "Are you interested in information about Widges?"

If they say "Yes," then I just proceed to the "Enter name, Enter address....," etc.

If they say "No," I want a textarea to appear with the caption of "If no, please enter what product you are looking for information on:"

There, they can type in things like, "I was looking at your Widgets, but really I was interested in your Whatchamacallits."

Get it?

 

[hopejr]

Should be using onclick and onchange attributes.

 

[jonnyGURU]

What am I onclicking? They haven't submitted the form yet?

 

[hopejr]

you have onsubmit and onclick confused. Whenever a form element is clicked, the onclick method is called.
post your code up, and I'll see if I can get it working for u, and I'll post it back. Is that ok? (BTW, I'll explain everything if you want).

EDIT: This might help you - Javascript is not procedural, instead it's event driven. Clicking on an element creates an event that is serviced by the script inside the onclick attribute. It appears to me from what you've already posted that your trying to use Javascript as a procedural language, when in fact it isn't.

 

[jonnyGURU]

I think I know what you're saying about onClick. So if they click a radio button, that'll get a response from an onclick?

Well, I'd gladly post my code and welcome the help, but my code isn't much right now since I can't figure out how to make this work.

This is what I'm using for now (this includes what I posted above)....


<form name="RequestInfo" action="whatever" enctype="text/plain" method="post">
<p>
<script language="JavaScript">
<!--
if (location.search.length > 0) {
DataPassed = unescape(location.search.substring(1));
document.write("<input type=\"hidden\" name=\"SourcePage\" value=\""+DataPassed+"\">")
document.write("Are you interested in information about "+DataPassed+"?")
document.write("<br>")
document.write("<input type=\"radio\" name=\"Interested in "+DataPassed+"\" value=\"Yes\" checked> Yes ")
document.write("<input type=\"radio\" name=\"Interested in "+DataPassed+"\" value=\"No\"> No ")
document.write("<br><br>")
document.write("If no, please enter what it is you would like more information about:<br>")
}
else {
document.write("What kind of information are you requesting us to contact you about?<br>")
}
//-->
</script>
<textarea name="RequestedInfo" cols=35 rows=4 ></textarea>
</form>


You can see that I'm using the textarea no matter what and just changing the caption based on something passing through the URL or not. What I would like is for that textarea to not even show up unless they answer "no" to the "Is this what you want more information on?" radio button (or if nothing is passed through the URL.)

 

[hopejr]

the following code works:

 

[hopejr]

I've put the textarea in both branches of the if statement, so that it will work how you want. Having it outside of the if statement is what made it appear anyway. Now clicking on "No" makes the textarea and it's prompt appear. Clicking "Yes" makes them disappear. To have them hidden initially, I put their style to "display: none;". The javascript at the beginning of the code is called by onclick.

 

[jonnyGURU]

Hmm... I can see how that's supposed to work, but when I click the "No" radio button, the textarea doesn't appear below it.

 

[hopejr]

Hmmm, I tested it in FF1.0 Mac and Safari 1.2.4 and it worked. I'll just fire up my PC and try it on IE6.

EDIT: just realised i didn't test in Safari. It doesn't work at all in there. I'll try something else quickly.

 

[hopejr]

This code works in IE6, FF1 and Safari. I used a div to surround the elements and then hid the div.

 

[jonnyGURU]

That worked!

Guess it liked those DIV's better than SPAN's, which is kind of backwards, but oh well.

Thanks very much. It works beautifully!!!

 

[hopejr]

No Problem