0

我对 HTML 和 javascript 编程完全陌生。我在一个网站上做了一个测验，现在尝试将单选按钮的值传输到另一个我想用这些值进行数据操作的网站。

我的测验第一页是这样的：

<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>

单击提交按钮时，将转发到此页面：

<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>

我现在如何使第一页上的单选按钮的值在第二页上可用以进行数据操作（它们应该根据参与者的答案构建统计饼图）？传输数据后，我必须在哪里进行操作？

提前致谢。非常感谢任何帮助。

4

1 回答 1

0

首先，实现 Pointy 提到的更改 - 否则它们将无法用作单选按钮，因为您可以单击多个。

对于您的问题，简短的回答是，仅使用 JavaScript，您无法处理 POST 数据。

有几种方法可以解决这个问题 - 在这里查看类似问题的答案：Client-side html page with Javascript form data that persists when submit。基本上要处理 JavaScript 中的所有内容，您可以执行以下操作之一：

  1. 将表单转换为 GET 请求，导致 URL 又长又丑
  2. 使用 cookie
  3. 使用 HTML5 本地存储

但是，其中任何一个都将受到限制，因为它们都涉及客户端处理。如果您希望以后扩展此站点（可能将答案存储在数据库中，并向每个人展示他或她与参加测验的其他人的比较），服务器端处理是最好的答案。您可以通过诸如 PHP、Ruby (on Rails)、C# (ASP.NET)、JSP、ColdFusion 等服务器语言来实现。

于 2013-08-31T17:50:32.517 回答