传递<表单>单选按钮到另一个页面进行操作

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

本文关键字：另一个 操作 单选按钮 lt 表单 gt 传递      更新时间：2023-09-26

我对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="answers1_1" value="1"/>I have a regular car<br/>
<input type="radio" name="answers1_2" value="1"/>I drive a SUV<br/>
<input type="radio" name="answers1_3" value="1"/>I have a hybrid car<br/>
<input type="radio" name="answers1_4" value="1"/>I have a pick-up truck<br/>
<input type="radio" name="answers1_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>

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

提前谢谢。非常感谢您的帮助。

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

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

有几种方法可以解决这个问题——看看这里类似问题的答案：客户端html页面，其中包含提交时持续存在的Javascript表单数据。基本上，要用JavaScript处理所有内容，可以执行以下操作之一：

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

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

相关文章：