JavaScript/PHP/MySql - Survey Web App - Dynamic radio buttons with questions

This site is best viewed in a modern browser with JavaScript enabled.

JavaScript/PHP/MySql - Survey Web App - Dynamic radio buttons with questions

icochea1

Hello I am trying to create a survey web app.

The way I see is that I will add the questions to the MySql Database and what I want is that through Javascript to create radio buttons with those questios so pretty much it should be like:

Radio button (Javascript) - Question (PHP/MySQL)

At the same time I need to see how many answers there are for that question since its gonna be multiple choice so through JavaScript I need to create a dynamic quantity of radio buttons.

Any idea how I can do this?

aubenefit

If you use joomla CMS, you can use many extensions for survey. they are popular.

icochea1

Hi thank you for your response. I need to create my own CMS tool so I cannot use Joomla.

Up until now I have the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Touch - Survey</title>

<?php
$someVar = 10;
$username = "Snib";
?>
<script type="text/javascript">
var radioNum = 1;
var x=0;
var javaScriptVar = "<?php echo $someVar; ?>";
var sStr = "My name is <?php echo $username ?>.";
function addRadio()
{

	for(x=0;x<javaScriptVar;x++)
 	{
		var radio = document.createElement("input");
		radio.id = "radio" + radioNum; //Gotta love that loosley typed implicit conversion!!!!
	 	radio.setAttribute("type", "radio");
		radio.setAttribute("name", "radios");
		radio.value = "myvalue";
		//radio.setAttribute("onclick", function(){alert(this.value);});
		document.getElementById("divRadiolist").appendChild(radio);
		radioNum++;
		document.body.innerHTML+=sStr;
	}
}
</script>
</head>
<body>
<form id="form1" method="POST" action="#">
<input type="button" id="btnAddRadio" value="Add radio" onclick="addRadio();" />
<div id="divRadiolist"></div>
</div>
</form>
</body>
</html>

It seems that the text is just showing below the radio buttons. Any reason why?

Padonak

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 <head runat="server">
 <title>Touch - Survey</title>

 <?php
 $someVar = 10;
 $username = "Snib";
 ?>

 <script type="text/javascript">
 var radioNum = 1;
 var x=0;
 var javaScriptVar = "<?php echo $someVar; ?>";
 //var sStr = "My name is <?php echo $username ?>.";
 function addRadio()
 {
 for(x=0;x<javaScriptVar;x++)
 {
 var radio = document.createElement("input");
 radio.id = "radio" + radioNum; //Gotta love that loosley typed implicit conversion!!!!
 radio.setAttribute("type", "radio");
 radio.setAttribute("name", "radios");
 radio.value = "myvalue";
 //radio.setAttribute("onclick", function(){alert(this.value);});
 document.getElementById("divRadiolist").appendChild(radio);
 radioNum++;
 //document.body.innerHTML+=sStr;
 }
 }

 window.onload=function(){
 var sStr = document.createElement('h1');
 sStr.innerHTML="My name is <?php echo $username ?>.";
 document.getElementById('form1').insertBefore(sStr,document.getElementById('btnAddRadio'));
 }
 </script>
 </head>
 <body>
 <form id="form1" method="POST" action="#">
 <input type="button" id="btnAddRadio" value="Add radio" onclick="addRadio();" />
 <div id="divRadiolist"></div>
 </div>
 </form>
 </body>
 </html>