单击按钮时将单选按钮值存储在数据库中
[英]Store radio button value in database on button click
问题描述
我想在数据库中存储单选按钮的值。 这是我的 3 个文件
主要问题是按钮类型是“按钮”。 如果类型为“提交”，则可以编写 PHP 脚本。 这可以使用 javascript 解决，但我从未使用过它。
<!Doctype html>
<html>
<head>
<title>Audio</title>
</head>
<body>
<p> This is a test system </p>
<audio id="song" src="file/A1.wav" controls></audio>
<form id="submit_value" method="post" action="dbconnect.php">
<input type="radio" id="happy" name="emotion" value="happy">
<label>Happy</label><br/>
<button type="button" onclick="nextAudio(); save();"> NEXT </button>
</form>
<script type="text/javascript" src="audio.js"></script>
</body>
</html>
JavaScript 文件
单击下一步按钮时，它会更改保存在数组中的音频，对于每个音频，我都必须将单选按钮值保存在数据库中
const song = document.querySelector('#song');
audioIndex = 0;
myAudio = ['file/A1.wav', 'file/A2.wav', 'file/A3.wav'];
function nextAudio() {
//alert("in javascript");
audioIndex++;
song.src = myAudio[audioIndex];
}
function save()
{
document.getElementById("myForm").submit();
}
PHP文件
<?php
$hostname= "localhost";
$username= "root";
$password= "";
$dbname="project";
$conn = new mysqli($hostname, $username, $password, $dbname);
if ($conn->connect_error)
{
die("not success". $conn->connect_error);
}
else
{
echo "Connected successfully";
}
if (isset($_POST['emotion']))
{
$emotion = $_POST['emotion'];
}
$sql = "INSERT INTO answers (Id, Emotion) VALUES ('NULL', 'happy')";
if ($conn->query($sql) === TRUE)
{
echo "Inserted";
}
else
{
echo "Error : ". $sql. "<br>".$conn->error;
}
$conn->close();
?>
现在它将转到 save() 函数，但仍未将值存储在数据库中。 它正在重定向到 PHP 页面。
[
4 个解决方案
解决方案1
0 2020-03-17 05:18:01
您可以使用js .submit()方法单击button手动submit表单。 工作代码：
function save(){ //getting id of form and then submit it to server document.getElementById("form").submit(); }
<form id="form" method="post" action="yourpagename"> <input type="radio" id="happy" name="emotion" value="happy"> <label >Happy</label><br/> <button type="button" onclick=" save();"> NEXT </button> </form>
解决方案2
0 2020-03-17 05:24:16
您可以使用 javascript Ajax fetch api 将数据发送到后端。 并在后端使用 php 处理这些数据。
Javascript：
async function nextAudio() {
try {
let response = await fetch('<backend-url>', {
method: "POST",
body: JSON.stringify({
emotion: document.getElementById("happy").checked
}),
headers: {
"content-type": "application/json"
}
});
chck_alert();
} catch (error) {
console.error(error.message);
}
}
HTML：
<audio id="song" src="file/A1.wav" controls></audio>
<form>
<input type="radio" id="happy" name="emotion" value="happy">
<label>Happy</label><br/>
<button type="button" onclick="nextAudio(); "> NEXT </button>
</form>
解决方案3
0 2020-03-17 05:41:44
使用阿贾克斯：
<button type="submit" onclick="nextAudio()" id="submit_button"> NEXT </button>
<script>
$("#submit_button").submit(function() {
var emotion =$('input[name="emotion"]:checked').val();
$.ajax({
url:"url",//give url here of controller or method which you are using to save data
method:"POST",
data:{emotion:emotion},
success:function(data){
//success
}
});
});
</script>
解决方案4
0 2020-03-17 06:39:59
您可以使用Jquery submit具有默认行为的表单。 一个简单的工作片段。
<form method="post" action="nameofpage" id="submit_form"> <input type="radio" id="happy" name="emotion" value="happy" /> <label>Happy</label><br/> <button type="button" onclick="document.getElementById('submit_form').submit()"> NEXT </button> </form>
如何将与单选按钮分组的下拉列表值存储到数据库
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.