Conditionals Within A Form

[chop]

With my form, I have the (radio buttons ) that ask "This is a business account" and "This is a personal account". (single select)

 

If the user selects "This is a business account", then I want to ask for the business address and phone number. Else I want to skip these questions.

 

Of course, the php $_POST[] won't work until the submit button is pressed at the end of the form. I can get the Value of the clicked radio button with javascript " onclick="check(this.value)" form within the form using a predefined js function. But, from what I understand, I can't pass the value of the js value to a php variable unless I do a page load first.

 

Maybe the answer is using all js code, forget the php?

 

thanks,

Chop

[Paul Swanson]

What I do for something like this is create the text fields for the business information in a <div> with a CSS style of display:none, When they click the radio button that indicates it is a business account, use javascript to change the display style to 'block.' This will show the fields in the browser. If they click the other button, set the display to 'none.' For validation, you can just use PHP to check which button was selected, and validate the business info fields if they selected business account, but do nothing if they selected personal account.

[chop]

thank you, Paul, that sounds easy. I'll try it

 

chop

[chop]

Well, I'm struggling a bit because I don't know squat about js, really.

 

This is where I am, maybe you can advise:

 

<p id="demo">'<div style="display:block">' </p> 

<script type="text/javascript">
document.getElementById("demo").innerHTML='<div style="display:none">';
</script>

 

thanks

[Paul Swanson]

This is a business account. <input type="radio" name="acct_type" value="business" onclick="javascript:document.getElementById('demo').style.display='block';" />
This is a personal account. <input type="radio" name="acct_type" value="personal" onclick="javascript:document.getElementById('demo').style.display='none';" />
<div id="demo" style="display:none;">Street Address: <input name="wk_addr" type="text" /><br />
City: <input name="city" type="text" /> State: <input name="state" type="text" />
</div>

I believe that should work for you. Alternately, you could toggle the visibility property between hidden and visible, but that method leaves the space the div would take up even when it's hidden. Using display:none removes the space the div would take up.

[chop]

Well, I'm struggling a bit because I don't know squat about js, really.

 

This is where I am, maybe you can advise:

 

<p id="demo">'<div style="display:block">' </p> 

<script type="text/javascript">
document.getElementById("demo").innerHTML='<div style="display:none">';
</script>

 

 

 

Can you send me an example?

 

thanks

[Antonio Conte]

Genius, Paul. Probably gonna do something like this sooner or later.

 

Thanks.

[HartleySan]

Paul Swanson is right, but ideally, you shouldn't mix your JS and HTML. Separate the JS if you know how to do it. It makes things faster and easier to modularize, etc.

 

More specifically, a lighter weight version of what you suggested, chop, would be the following:

 

<p id="demo"><div id="INeedAnIDToo">Content here.</div></p>

<script>

 document.getElementById('INeedAnIDToo').style.display = 'none';

</script>

 

Note: If you use the HTML5 doctype ("<DOCTYPE! html>"), which is backwards compatible with HTML 4.01, you don't need the type attribute in the opening script tag.

 

You could also very easily set up a toggle feature between "block" and "none" by using an onmousedown event, etc.

 

Lastly, if you put the JS in a separate file, your page will load faster.

[chop]

Thank you both for your help. It works perfectly!

 

Being a php programmer, the mixing of code with html is familiar to me so I don't mind Paul's method and ended up using it. Also, there isn't that much "conditional" input that I need. Though, when I have time, I'd like to explore the method of separating the js code as suggested by HartleySan.

 

Great to have these forums. What a life saver.

 

thanks again, Chop

[Paul Swanson]

I agree with HartleySan's contention that it's best to separate HTML and JS. In practice, I use a separate file for most JS and use function calls for events. I felt it would be clearer to the original poster by mixing them in my example.

 

Glad it's working for you, chop.

[HartleySan]

Paul, I agree. I didn't mean to come in here and bash your code. Sorry if it sounded that way. Anyway, in the end it works, and Paul was on the money, so it's all good.