如何通过单击单选按钮提交此 PHP 投票表单？答案

【问题标题】：How do I submit this PHP poll form on click of a radio button?如何通过单击单选按钮提交此 PHP 投票表单？
【发布时间】：2014-12-02 02:27:50
【问题描述】：

我正在使用 CSS Tricks 的 How To Design and Create a PHP Powered Poll 教程创建自己的投票。

我试图在用户单击其中一个单选按钮选项时提交投票，而不是在用户单击“投票”按钮时提交。

poll.php：

<?php require_once('Connections/conn_vote.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
  $editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}

if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) {
  $insertSQL = sprintf("INSERT INTO poll (id, question) VALUES (%s, %s)",
                       GetSQLValueString($_POST['id'], "int"),
                       GetSQLValueString($_POST['Poll'], "text"));

  mysql_select_db($database_conn_vote, $conn_vote);
  $Result1 = mysql_query($insertSQL, $conn_vote) or die(mysql_error());

  $insertGoTo = "results.php";
  if (isset($_SERVER['QUERY_STRING'])) {
    $insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?";
    $insertGoTo .= $_SERVER['QUERY_STRING'];
  }
  header(sprintf("Location: %s", $insertGoTo));
}

$colname_rs_vote = "-1";
if (isset($_GET['recordID'])) {
  $colname_rs_vote = $_GET['recordID'];
}
mysql_select_db($database_conn_vote, $conn_vote);
$query_rs_vote = sprintf("SELECT * FROM poll WHERE id = %s", GetSQLValueString($colname_rs_vote, "int"));
$rs_vote = mysql_query($query_rs_vote, $conn_vote) or die(mysql_error());
$row_rs_vote = mysql_fetch_assoc($rs_vote);
$totalRows_rs_vote = mysql_num_rows($rs_vote);
?>

<!DOCTYPE html>
<head>
<title>Poll</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
  <form action="<?php echo $editFormAction; ?>" id="form1" name="form1" method="POST">
    <label>
      <input type="radio" name="Poll" value="snoppdogg" id="Poll_0" />
      Snoop Dogg
    </label>
    <label>
      <input type="radio" name="Poll" value="biggie" id="Poll_1" />
      Biggie
    </label>
    <label>
      <input type="radio" name="Poll" value="tupac" id="Poll_2" />
      Tupac
    </label>
    <input type="submit" name="submit" id="submit" value="Vote" />
    <input type="hidden" name="id" value="form1" />
    <input type="hidden" name="MM_insert" value="form1">
  </form>

  <script type="text/javascript">
    $('input[type=radio]').click(function() {
        $(this).closest("form").submit();
    });
  </script>
</body>
</html>

<?php
mysql_free_result($rs_vote);
?>

conn_vote.php：

<?php
# FileName="Connection_php_mysql.htm"
# Type="MYSQL"
# HTTP="true"
$hostname_conn_vote = "localhost";
$database_conn_vote = "poll";
$username_conn_vote = "root";
$password_conn_vote = "root";
//$conn_vote = mysql_pconnect($hostname_conn_vote, $username_conn_vote, $password_conn_vote) or trigger_error(mysql_error(),E_USER_ERROR);
$conn_vote = mysql_connect($hostname_conn_vote, $username_conn_vote, $password_conn_vote) or die('Can\'t create connection: '.mysql_error());
mysql_select_db($database_conn_vote, $conn_vote) or die('Can\'t access specified db: '.mysql_error());
?>

这是 poll.php 的样子：

如果您单击“投票”，这会非常有用，但如果您只是单击单选按钮，则不会。

我还尝试为每个无线电输入添加一个 onchange 事件，但这实际上也没有提交表单。

<input onchange="this.form.submit();" type="radio" name="Poll" value="snoopdogg" id="Poll_0" />

我感觉这与隐藏的输入有关，但我不知道需要更改什么。

关于如何在用户单击单选按钮时提交表单的任何想法？

提前致谢:)

编辑：

我认为这是 PHP 问题，而不是 JavaScript 问题。我已经尝试了所有这些 JavaScript 解决方案，但都没有奏效：

<input onchange="this.form.submit();" type="radio" name="Poll" value="snoopdogg" id="Poll_0" />

和

<input onClick="this.form.submit();" type="radio" name="Poll" value="snoopdogg" id="Poll_0" />

和

$('input').click(function(){
  $('form').submit();
});

和

$('input[type="radio"]').click(function() {
  $("form").submit();
});

和

$('input[type=radio]').click(function() {
    $(this).closest("form").submit();
});

和

$('input').click(function(){
  $.ajax({
    type:'POST',
    url:'results.php',
    data:{radio:info}
    }).done(function(data){
      alert("show that ajax call was successful!");
    });
  });

“提交”是指我希望它提交表单，将值输入数据库，然后进入results.php页面，这是目前“投票”按钮的功能。

【问题讨论】：

不要试图将单选按钮变成原来的样子，而是使用三个普通按钮。
@zzzzBov 你可以做到。
@zzzzBov 我实际上打算最终将无线电输入设置为传统按钮，所以这是一个很好的建议。但是，我将它们保留为单选按钮的原因是因为我想要语义化——因为投票是一种“选择一个答案”的形式，我认为单选按钮是正确的选择。你怎么看？
如果它看起来像一个按钮，并且行为像一个按钮，那么它就是一个按钮。

标签： javascript php jquery html forms

【解决方案1】：

使用onClick 而不是onChange。

<input onChange="this.form.submit();" />

也可以使用jQuery onClick 提交表单：

$('input').click(function(){
  $('form').submit();
});

对于更流畅的东西，使用 AJAX ;)

$('input').click(function(){
  $.ajax({
    type:'POST',
    url:'somePage.php',
    data:{radio:info}
    }).done(function(data){
        //show that ajax call was successful!
     });
  });

AJAX DEMO

编辑：我猜你的问题出在你的 PHP 代码上，因为它没有将值插入到数据库中。您的表单未提交的原因是因为您使用了onChange 而不是onClick。

如果您想使用 AJAX，您需要从输入元素（在本例中为单选输入）中获取值。使用 AJAX 时不必提交表单。

例如：

<input type="radio" id="#tupacRadio" />
//get the value of the radio input
var tupacRadio = $('#tupacRadio').val();

然后一旦你调用 AJAX：

$.ajax({
  data:{value:tupacRadio}
})

【讨论】：

我同意 Ajax 是通往这里的道路。您可以做很多很酷的事情，例如在提交表单后隐藏表单并在之后显示统计数据。
@Rafael 我现在对所有事情都使用 AJAX ;)
这无疑是 Web 开发的未来，尤其是随着 MongoDB 这样的 NoSQL 数据库的创建
感谢您的回答。我尝试了所有这些解决方案，但不幸的是，它们都不能在我的完整代码的上下文中工作。单击“投票”会将值提交到数据库表中，但单击单选按钮不会。单击单选按钮时没有任何变化。也许我应该详细说明“提交”的含义——我正在寻找一种提交表单并将值输入数据库的解决方案，这是投票的预期功能。我相信此时这是一个 PHP 问题，因为我尝试了所有建议的 jQuery/JavaScript 脚本都无济于事。

【解决方案2】：

HTML 文档

<!DOCTYPE html>
<html>
  <head>
    <title>Poll</title>
  </head>

  <body>
    <form id="form">
      <label> Snoop Dogg
        <input type="radio" name="Poll" value="snoop" id="Poll_0" />
      </label>
      <label>
        <input type="radio" name="Poll" value="biggie" id="Poll_1" /> Biggie
      </label>
      <label>
        <input type="radio" name="Poll" value="tupac" id="Poll_2" /> Tupac
      </label>
    </form>

    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="http://malsup.github.io/min/jquery.form.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $('input[type=radio]').click(function() {
        $("#form").ajaxSubmit({url: 'send.php', type: 'post'})
        $("#form").replaceWith("<h2>Thank you for your vote!</h2>");
      });
    </script>
  </body>
</html>

发送.PHP

<?php
require('connection.php');

// Radio 
$poll = $_POST['Poll'];

// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

function pollQuery($value) {
  $sql = "";
  if ($value == "snoop") {
    $sql = "UPDATE poll SET snoop = snoop + 1 WHERE id = 1";
    return $sql;
  } elseif ($value == "biggie") {
    $sql = "UPDATE poll SET biggie = biggie + 1 WHERE id = 1";
    return $sql;
  } else {
    $sql = "UPDATE poll SET tupac = tupac + 1 WHERE id = 1";
    return $sql;
  }
}

if ( isset($poll) ) {
  // Run Query
  $conn->query( pollQuery($poll) );
}

$conn->close();
?>

连接.PHP

<?php
// Connect info
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "poll";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
?>

【讨论】：

这是我在上面的 HTML 中已有的 jQuery：不幸地改变了“$(this).closest("form").submit();"到 "$("form").submit();"没有改变任何东西。
@AnnaBlabber 我的示例在我提供的链接中工作。检查您的代码，然后重试。
我看到它在那里工作，但在我的完整文件的上下文中它不适合我。它没有在我的数据库表中输入任何值，而单击“投票”会输入值。在尝试了许多“在单选按钮单击时提交表单”脚本的变体无济于事后，看来这不是 JavaScript 的问题，而是 PHP 的问题。
确保您的 php 代码中没有使用 if(isset($_POST['SubmitName'])) { // insert values in db}
@IsmaelMiguel 我没有假设任何事情。她是这么说的。