how to stop a javascript function from resetting on form submit

Question

I have a problem with my web page. I am trying to create a survey with an image and using form submit with several radio button groups. The image changes every 15 secs from img1.jpg to img2.jpg and so on and so forth and the data from the radio buttons are saved in my local database. The problem is when the image is on img2.jpg and when the user clicked submit to save it to database, the image resets to img1.jpg. What should I do so that the image doesn't reset every time on form submit?

Here is my code:

<!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>

Viktor Maksimov · Answer 1 · 2015-10-24T09:12:52.940

1.Create file called form-request.php with the following code:

<?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.This should be your index page.

<!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 should be in the same directory as index.php. When submitting the form the page will not refresh nothing will happen only the data will be inserted in the MySQL database. If you want something to happen when the form is submitted please provide me an information for it.

This is the way your files and code (using Ajax) should be working. I will check again my code and I will try to help you. — Viktor Maksimov, Oct 24 '15 at 08:47
I've changed my answer with the two files which are working here. Please try them and tell us if you have succeeded. — Viktor Maksimov, Oct 24 '15 at 09:13

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

You are posting the form. After the post, the page reloads and the initial image is being loaded. You need a way to pass the name of the current img that you are seeing to the server when submitting the form. There are multiple ways you can do this. For example, you can do this by passing it to the query string and then check for it.

edited May 23 '17 at 12:14

Community

1
1

answered Oct 24 '15 at 08:11

The fourth bird

154,723
16
55
70

how to stop a javascript function from resetting on form submit

2 Answers2