Question

我创建了一个工作示例，该示例使用提交按钮将单选按钮的值插入数据库，但是现在我正在寻找不使用提交按钮的插入方法。

我有一个javascript函数，当单击单选按钮时，应执行php。

我已经研究了为什么我无法使其运行，但是我不确定它是否有可能或者是否有更好的方法来实现。下面是我的代码

<html>
<head>
  <title>survey</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="test.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

</head>

<div class="cc-selector">
      <form class="cc-selector" id="form-id"  method="POST">
    <label><input id="happy" type="radio" name="radioAnswer" onclick="doSomething();"></label>
    <label class="drinkcard-cc happy" for="happy"></label>
    <label><input id="sad" type="radio" name="radioAnswer" onclick="doSomething();"></label>
    <label class="drinkcard-cc sad"for="sad"></label>
  </form>
        </div>
        <script type="text/javascript" src="jquery.min.js"></script> 

<script type="text/javascript"> 
function doSomething() { 
    $.get("sample2.php"); 
    return false; 
} 
</script>

</body>
</html>

还有我的php sample2.php

<?php
$con = mysqli_connect("localhost","root","","test");

// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

  if (isset($_POST['radioAnswer'])){
        $radioAnswer = $_POST['radioAnswer'];
        mysqli_query($con,"INSERT INTO survey (radioAnswer) VALUES ('$radioAnswer')");
    }
?>

Answer 1

使用onchange。还有一个开体标签。

<html>
<head>
  <title>survey</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="test.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

</head>
<body>
<div class="cc-selector">
      <form class="cc-selector" id="form-id"  method="POST">
    <label><input id="happy" type="radio" name="radioAnswer" onchange="doSomething();"></label>
    <label class="drinkcard-cc happy" for="happy"></label>
    <label><input id="sad" type="radio" name="radioAnswer" onchange="doSomething();"></label>
    <label class="drinkcard-cc sad"for="sad"></label>
  </form>
        </div>
        <script type="text/javascript" src="jquery.min.js"></script> 

<script type="text/javascript"> 
function doSomething() { 
    $.get("sample2.php"); 
    return false; 
} 
</script>

</body>
</html>

Answer 2

您正在执行GET请求中的数据库插入

首先，这是非常糟糕的做法。

第二，它不能按预期工作，因为GET请求可能被浏览器或代理缓存，

顺便说一句，您的PHP正在读取$ _POST

Answer 3

使用ajax javascript发送请求

function doSomething() { 
    $.ajax(
      {
        type: 'GET',
        data: {'radio1': $('#happy').is(':checked'), 'radio2': $('#sad').is(':checked')}
        url: '/your_php_file_name.php',
        success: function(data){
          console.log("here is the result : " + data);
        }
      }
    );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cc-selector">
      <form class="cc-selector" id="form-id"  method="GET>
    <label><input id="happy" type="radio" name="radioAnswer" onclick="doSomething();"></label>
    <label class="drinkcard-cc happy" for="happy"></label>
    <label><input id="sad" type="radio" name="radioAnswer" onclick="doSomething();"></label>
    <label class="drinkcard-cc sad"for="sad"></label>
  </form>
        </div>

在your_php_file_name.php文件中

<?php
    // your javascript radio button 1 value;
    $happy = $_GET('radio1');
    // your javascipt radio button 2 value ;
    $sad = $_GET('radio2');
    echo 'success';
?>

Answer 4

$。get（）方法使用HTTP GET请求从服务器请求数据。您要做的是使用HTTP POST请求从服务器发送数据。我建议您使用：

    $.post("sample2.php",
{
    name: "Donald Duck",
    city: "Duckburg"
},
function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
});

甚至更好：

    $.ajax({
   url : 'sample2.php',
   type : 'POST', 
   data : 'email=' + email + 'content=' + content,
   dataType : 'html'
});

在https://www.w3schools.com/jquery/ajax_ajax.asp中找到有关$ .ajax的更多详细信息

Answer 5

想出了如何使用onclick方法将我的Php插入下面的sql数据库答案中。

 <form name="form" action="sample2.php" class="cc-selector" method="post" >

       <label class="label">
        <input type="image" name="Opinion" value="Positive" src="happy.png" onclick="document.getElementById('form').submit();"/>

       </label>

       <label class="label">
        <input type="image" name="Opinion" value="Negative" src="sad.png" onclick="document.getElementById('form').submit();"/>
       </label>
      </form>

从onclick执行php脚本插入数据库

5 个答案: