Saturday 31 August 2013

Passing values of radio buttons to another page for manipulation

Passing values of radio buttons to another page for manipulation

I am totally new to HTML and javascript programming. I made a quiz in a on
a website and try to now transfer the values of the radiobuttons to
another website where I want to do data manipulation with the values.
My first page with the quiz looks like this:
<html>
<head>
<title>How ecoconscious are you ?</title>
<style type="text/css">body {margin: 10px;
ol {
padding-left: 50px;
}
</style>
</head>
<body>
<!-------- Quiz Starts Here -------->
<h3>How ecoconscious are you ?</h3>
Hello and thank you for participating in this quiz to determine how
ecoconscious you really are.<br/><br/>Please try to answer these questions
as objective as possible. Please be honest with your answers as this will
make the statistic better!
<form action="http://how-ecoconscious-are-you.webs.com/statistics"
method="post">
<input type="hidden" name="QuizTitle" value="How ecoconscious are you ?"/>
<ol>
<li>What kind of car are you driving ?<br/>
<input type="radio" name="ans1_1" value="1"/>I have a regular car<br/>
<input type="radio" name="ans1_2" value="1"/>I drive a SUV<br/>
<input type="radio" name="ans1_3" value="1"/>I have a hybrid car<br/>
<input type="radio" name="ans1_4" value="1"/>I have a pick-up truck<br/>
<input type="radio" name="ans1_5" value="1"/>I don't have a car<br/><br/>
<p><input type="submit" onclick="this.value='Please wait ...'"
value="Submit!"/></p>
</ol>
</form>
<!-------- Quiz Ends Here -------->
</body>
</html>
When the submit button is clicked one gets forwarded to this page:
<html>
<head>
<script type="text/javascript"
src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var answer1_1, answer1_2, answer1_3, answer1_4, answer1_5;
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Task', 'What kind of car are you driving ?'],
['I have a regular car',answer1_1],
['I drive a SUV',answer1_2],
['I have a hybrid car',answer1_3],
['I have a pick-up truck',answer1_4],
['I do not have a car',answer1_5]
]);
var options1 = {
title: 'What kind of car are you driving ?',
is3D: true,
};
var chart1 = new
google.visualization.PieChart(document.getElementById('1'));
chart1.draw(data1,options1);
}
</script>
</head>
<body>
<div id="1" style="width: 900px; height: 500px;"></div>
</body>
</html>
How can I now make the values of the radiobuttons on the first page be
available on the second page for data manipulation (they are supposed to
build a statistical pie chart depending on the answers of the
participants)? Once the data is transferred, where do I have to make the
manipulation ?
Thanks in advance. Any help is geatly appreciated.

No comments:

Post a Comment