Question

我正在使用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的样子：

enter image description here

如果您单击“投票”，这会很有效，但如果您只是单击一个单选按钮则不行。

我还尝试在每个无线电输入中添加一个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页面，这是当前“投票”按钮的功能。

Answer 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}
})

Answer 2

HTML DOC

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

SEND.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();
?>

CONNECTION.PHP

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

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

如何通过单击单选按钮提交此PHP民意调查表单？

2 个答案: