How do I echo different forms for different selected options

Hello there,

Am developing a site where members can add events. On the add_event.php page, the only field is Event Type (which includes Seminar, Wedding, Birthday, etc). The form for Seminar is different from the form for wedding etc. On selecting the type of event they want to add, I want the form for the selected event type to appear below the Event Type field without refreshing or redirecting the page. How do I do it? Can only php scripts do this or i'll need other languages like javascript etc?

Thanks in advance

 

You need javascript

 

^^^ I think some more specifics are needed. Sounds like a job for AJAX - call a JavaScript function on the onChange event handler of the event type dropdown. That function will perform an AJAX call to a PHP file containing the custom form based on the selected type delivered to it in the parameter string. Remember to send a random number along with the call to the PHP file to make sure you get a fresh, un-cached page from the server. Good luck!

 

Yes, you will need to use JavaScript. I don't think any AJAX libraries are necessary like suggested above if it's only a few forms you're dealing with - the forms could be loaded when the page is generated.

You will need to create a form with a drop-down menu (using <select> tags) with the options Seminar, Wedding, Birthday, etc.
In your JavaScript file, you will create a function that is called whenever you select one of the options in the form above. This function will generate a form somewhere on the webpage based on your selection from the drop-down menu. It's pretty simple, do a bit of JavaScript reads.

Remember, any change that happens in the browser without refreshing or redirecting ALWAYS requires JavaScript. You must refresh or redirect to access a PHP script.

 

Yeah, AJAX may be overkill for this. Actually, come to think of it, what might even be easier is to store pre-rendered forms in individual hidden DIV layers. Once the selection is made, make the corresponding div layer visible. Might really be the easiest way to go over all the options.

 

Or you can store the forms' HTML code in JavaScript using variables/arrays/whatever, and based on the user's selection, output the respective HTML code into the div using the innerHTML object etc.