我的网页有问题。我正在尝试使用图像创建一个调查,并使用表单提交几个单选按钮组。图像每隔15秒从img1.jpg更改为img2.jpg等等,来自单选按钮的数据保存在我的本地数据库中。问题是当图像在img2.jpg上时,当用户点击提交将其保存到数据库时,图像将重置为img1.jpg。我应该怎么做,以便每次提交表单时图像都不会重置?
这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
setInterval(function(){
_path = $('img').attr('src');
_img_id = _path.replace('img/img', '');
_img_id = _img_id.replace('.jpg', '');
_img_id++;
$('img').attr('src', 'img/img' + _img_id + '.jpg');
}, 15000);
});
</script>
</head>
<body id="page-top">
<header>
<div class="header-content">
<div class="header-content-inner">
<h1><img src="img/img1.jpg" alt="image" style="width:738px;height:444px;"></h1>
<hr>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<label>Alignment: </label>
<input type="radio" name="group1" value="5"> 5
<input type="radio" name="group1" value="4"> 4
<input type="radio" name="group1" value="3"> 3
<input type="radio" name="group1" value="2"> 2
<input type="radio" name="group1" value="1"> 1
<hr>
<label>Blend: </label>
<input type="radio" name="group2" value="5"> 5
<input type="radio" name="group2" value="4"> 4
<input type="radio" name="group2" value="3"> 3
<input type="radio" name="group2" value="2"> 2
<input type="radio" name="group2" value="1"> 1
<hr>
<label>Warp: </label>
<input type="radio" name="group3" value="5"> 5
<input type="radio" name="group3" value="4"> 4
<input type="radio" name="group3" value="3"> 3
<input type="radio" name="group3" value="2"> 2
<input type="radio" name="group3" value="1"> 1
<hr>
<label>Overall: </label>
<input type="radio" name="group4" value="5"> 5
<input type="radio" name="group4" value="4"> 4
<input type="radio" name="group4" value="3"> 3
<input type="radio" name="group4" value="2"> 2
<input type="radio" name="group4" value="1"> 1
<hr>
<input type="submit" name="submit" value="Submit">
</form>
</div>
</div>
</header>
<?php
$con = mysqli_connect("localhost","root","","survey");
@ $group1 = ($_POST['group1']);
@ $group2 = ($_POST['group2']);
@ $group3 = ($_POST['group3']);
@ $group4 = ($_POST['group4']);
if(isset($_POST['submit']))
{
mysqli_query($con,"INSERT INTO response (col1,col2,col3,col4)
VALUES ('$group1','$group2','$group3','$group4')");
mysqli_close($con);
}
?>
</body>
</html>
答案 0 :(得分:1)
1.使用以下代码创建名为form-request.php的文件:
<?php
$con = mysqli_connect("localhost","root","","survey");
@ $group1 = ($_POST['group1']);
@ $group2 = ($_POST['group2']);
@ $group3 = ($_POST['group3']);
@ $group4 = ($_POST['group4']);
mysqli_query($con,"INSERT INTO response (col1,col2,col3,col4) VALUES ('$group1','$group2','$group3','$group4')");
mysqli_close($con);
?>
2.这应该是你的索引页面。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
setInterval(function(){
_path = $('img').attr('src');
_img_id = _path.replace('img/img', '');
_img_id = _img_id.replace('.jpg', '');
_img_id++;
$('img').attr('src', 'img/img' + _img_id + '.jpg');
}, 15000);
$('.header-content form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'form-request.php',
data: $('.header-content form').serialize(),
success: function (data) {
console.log(data);
}
});
});
});
</script>
</head>
<body id="page-top">
<header>
<div class="header-content">
<div class="header-content-inner">
<h1><img src="img/img1.jpg" alt="image" style="width:738px;height:444px;"></h1>
<hr>
<form action="home.html" method="post">
<label>Alignment: </label>
<input type="radio" name="group1" value="5"> 5
<input type="radio" name="group1" value="4"> 4
<input type="radio" name="group1" value="3"> 3
<input type="radio" name="group1" value="2"> 2
<input type="radio" name="group1" value="1"> 1
<hr>
<label>Blend: </label>
<input type="radio" name="group2" value="5"> 5
<input type="radio" name="group2" value="4"> 4
<input type="radio" name="group2" value="3"> 3
<input type="radio" name="group2" value="2"> 2
<input type="radio" name="group2" value="1"> 1
<hr>
<label>Warp: </label>
<input type="radio" name="group3" value="5"> 5
<input type="radio" name="group3" value="4"> 4
<input type="radio" name="group3" value="3"> 3
<input type="radio" name="group3" value="2"> 2
<input type="radio" name="group3" value="1"> 1
<hr>
<label>Overall: </label>
<input type="radio" name="group4" value="5"> 5
<input type="radio" name="group4" value="4"> 4
<input type="radio" name="group4" value="3"> 3
<input type="radio" name="group4" value="2"> 2
<input type="radio" name="group4" value="1"> 1
<hr>
<input type="submit" name="submit" value="Submit">
</form>
</div>
</div>
</header>
</body>
</html>
form-request.php应与index.php位于同一目录中。提交表单时,页面不会刷新,只会将数据插入MySQL数据库中。如果您希望在提交表单时发生某些事情,请向我提供相关信息。
答案 1 :(得分:0)
您正在发布表单。在帖子之后,页面重新加载并且正在加载初始图像。 在提交表单时,您需要一种方法将您看到的当前img的名称传递给服务器。 有multiple ways你可以做到这一点。例如,您可以通过将其传递给查询字符串然后检查它来完成此操作。