Question

我的网页有问题。我正在尝试使用图像创建一个调查，并使用表单提交几个单选按钮组。图像每隔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>

Answer 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数据库中。如果您希望在提交表单时发生某些事情，请向我提供相关信息。

Answer 2

您正在发布表单。在帖子之后，页面重新加载并且正在加载初始图像。在提交表单时，您需要一种方法将您看到的当前img的名称传递给服务器。有multiple ways你可以做到这一点。例如，您可以通过将其传递给查询字符串然后检查它来完成此操作。

如何通过重置表单提交来停止javascript函数

2 个答案: