如何阻止javascript函数在表单提交时重置

how to stop a javascript function from resetting on form submit

本文关键字：表单提交 何阻止 javascript 函数      更新时间：2023-09-26

我的网页有问题。我试图创建一个调查与图像和使用表单提交与几个单选按钮组。图像每15秒从img1.jpg转换为img2.jpg等等，来自单选按钮的数据保存在我的本地数据库中。问题是，当图像在img1.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>

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数据库中。如果你想在表单提交时发生什么，请提供给我一个信息。

您正在发布表单。发布后，页面重新加载，初始图像被加载。在提交表单时，需要一种方法将当前看到的img的名称传递给服务器。有多种方法可以做到这一点。例如，您可以将它传递给查询字符串，然后检查它是否存在。

相关文章：