Javascript 如何在单击单选按钮时提交此PHP民意测验表单?

Javascript 如何在单击单选按钮时提交此PHP民意测验表单?,javascript,php,jquery,html,forms,Javascript,Php,Jquery,Html,Forms,我正在使用CSS技巧教程创建我自己的投票 我试图让投票在用户单击单选按钮选项时提交,而不是在用户单击“投票”按钮时提交 poll.php: <?php require_once('Connections/conn_vote.php'); ?> <?php if (!function_exists("GetSQLValueString")) { function GetSQLValueString($theValue, $theType, $theDefinedValue = "

我正在使用CSS技巧教程创建我自己的投票

我试图让投票在用户单击单选按钮选项时提交,而不是在用户单击“投票”按钮时提交

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

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

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>

投票
嗅探犬
大人物
图帕克
$('input[type=radio]')。单击(函数(){
$(“#表单”).ajaxSubmit({url:'send.php',键入:'post'})
$(“#表格”)。替换为(“感谢您的投票!”);
});

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);
?>

使用
onClick
而不是
onChange

<input onChange="this.form.submit();" />
对于更流畅的内容,请使用AJAX;)

编辑:我想您的问题在于PHP代码,因为它没有将值插入数据库。但是,表单未提交的原因是您使用了
onChange
而不是
onClick

如果要使用AJAX,需要从输入元素(在本例中为radio输入)获取值。使用AJAX时不必提交表单

例如:

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

不要试图将单选按钮变成它不是的东西,而是使用三个普通按钮。@zzzzBov你可以做到。@zzzzBov我实际上打算最终将单选输入样式设置为传统按钮,所以这是一个很好的建议。但是,我之所以将它们保留为单选按钮,是因为我想让它们具有语义——因为民意测验是一种“选择一个答案”的形式,所以我认为单选按钮是正确的选择。你觉得呢?如果它看起来像一个按钮,而且它的行为像一个按钮,那么它就是一个按钮。我同意Ajax是解决这个问题的方法。你可以做很多很酷的事情,比如在表单提交后隐藏表单,然后显示统计数据。@Rafael我现在什么都用AJAX;)这当然是web开发的未来,特别是随着NoSQL数据库的创建,比如MongoDBThanks,为您提供答案。我尝试了所有这些解决方案,但不幸的是,在我完整的代码环境中,它们都不起作用。单击“投票”将值提交到数据库表中,但单击单选按钮不会。单击单选按钮时没有任何更改。也许我应该详细说明我所说的“提交”是什么意思——我正在寻找一个解决方案,提交表单并将值输入数据库,这是民意测验的预期功能。我认为这是一个PHP问题,因为我已经尝试了所有建议的jQuery/JavaScript脚本,但都没有效果。这是我在上面的HTML中已有的jQuery:$('input[type=radio]')。单击(function(){$(this).closest(“form”).submit();});不幸的是,将“$(this).closest(“form”).submit();”更改为“$(“form”).submit();”没有更改任何内容。@AnnaBlabber我的示例正在我提供的链接中运行。请检查您的代码并重试。我看到它在那里工作,但在完整文件的上下文中它对我不起作用。它不会在我的数据库表中输入任何值,而单击“投票”则会输入值。在尝试了许多“在单选按钮点击时提交表单”脚本的变体之后,没有任何效果,这似乎不是JavaScript的问题,而是PHP的问题。确保在PHP代码中没有使用
if(isset($\u POST['SubmitName']){//insert values in db}
@IsmaelMiguel我没有假设任何东西。她是这么说的。
$('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!");
    });
  });
<!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
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
// Connect info
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "poll";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
?>
<input onChange="this.form.submit();" />
$('input').click(function(){
  $('form').submit();
});
$('input').click(function(){
  $.ajax({
    type:'POST',
    url:'somePage.php',
    data:{radio:info}
    }).done(function(data){
        //show that ajax call was successful!
     });
  });
<input type="radio" id="#tupacRadio" />
//get the value of the radio input
var tupacRadio = $('#tupacRadio').val();
$.ajax({
  data:{value:tupacRadio}
})