Anyway, here’s my problem: When the user decides to create a survey, she can click on the button “Create survey”. Once clicked, a textfield named “Survey title” with an OK-button associated to it, and another button “Add survey topic” will appear*. If the user clicks “Add survey topic”, another textfield named “survey topic” with an “add survey topic”- and OK-button associated to it, plus a button named “Add question to topic” will appear. Thus, as the user clicks, the page should display more and more options in the same page.
My failed solution: I made each “level of options” as PHP-functions that could be invoked as soon as some HTML-variable was detected (using isset) everytime the user clicked on a button. I made all buttons of type ‘submit’ so that the page would be refreshed itself (using $_SERVER[‘PHP_SELF’]). But it doesn’t look like a viable solution to me cause the page will look messed up or have undesired behaviour.
This is why I have come to you guys. I am wondering how to add more and more options (more and more html-code?) in the same page as the user clicks on the buttons. The JavaScript below is an attempt of solving it using JavaScript instead of PHP, but I don't think it's much better than using pHP.
*: The idea of “survey topic” is that the user can then have multiple questions to one particular topic in the entire survey. Example: The survey title might be named “Best soft drink”, and one of the survey topic could be “Preferred flavour type” in which there may be questions such as “Which flavour do you like” and “Do you have any suggestions for other flavours?”
Code: Select all
<html>
<head>
<script language="JavaScript" type="text/javascript">
function create_survey()
{
window.document.write("<p><input type='text' name='text_survey'></p>");
window.document.write("<p><input type='button' name='button_topic' value='Add topic' onclick='add_topic()'></p>");
}
function add_topic()
{
document.write("<form name='anotherForm'>");
document.write("<p><input type='text' name='text_topic'></p>");
document.write("</form>");
//alert("Hello World");
}
</script>
</head>
<body>
<form name='myForm'>
<input type='button' name='button_survey' value='Create survey' onclick='create_survey()'>
</form>
</body>
</html>