Question

我对HTML和javascript编程完全陌生。我在一个网站上做了一个小测验，现在尝试将radiobuttons的值转移到另一个网站，在那里我想用值进行数据操作。

我的第一页测验如下：

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

我现在如何让第一页上的radiobuttons值可用于数据操作（它们应该根据参与者的答案构建统计饼图）？传输数据后，我在哪里进行操作？

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

Answer 1

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

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

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

将您的表单转换为GET请求，从而产生一个冗长且难看的网址
使用cookies
使用HTML5本地存储

其中任何一个都会受限于他们可以做的事情，因为它们都涉及客户端处理。如果您有兴趣稍后扩展此站点（可能将答案存储在数据库中并向每个人展示他或她与其他参加过测验的人员的比较）服务器端处理是最佳答案。你可以通过PHP，Ruby（在Rails上），C＃（ASP.NET），JSP，ColdFusion等服务器语言来实现这一点。

将<form>单选按钮的值传递给另一个页面进行操作</form>

1 个答案: