Passing values of <form> radio buttons to another page for manipulation

Question

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.

Answer 1

First, implement the change mentioned by Pointy - otherwise they won't function as radio buttons, since you can click more than one.

For your question, the short answer is, just using JavaScript, you can't process POST data.

There are a few ways to handle this - take a look at the answers to a similar question here: Client-side html page with Javascript form data that persists when submit . Basically to process everything in JavaScript, you can do one the following:

Convert your form to a GET request, resulting in a long and ugly URL
Use cookies
Use HTML5 local storage

Any of those will be limited in what they can do though, since they all involve client-side processing. If you have any desire to later expand this site (maybe storing the answers in a database and showing each person how he or she compares to others who have taken the quiz) server-side processing is the best answer. You'd do that through a server language such as PHP, Ruby (on Rails), C# (ASP.NET), JSP, ColdFusion, etc.

Passing values of <form> radio buttons to another page for manipulation

Question

1 answers

solution1
0 2013-08-31 17:50:32

Passing values of <form> radio buttons to another page for manipulation

Question

1 answers

solution1 0 2013-08-31 17:50:32

solution1
0 2013-08-31 17:50:32