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 · Accepted Answer · 2015-10-24 09:12:52Z

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.
I've changed my answer with the two files which are working here. Please try them and tell us if you have succeeded.

Community · Accepted Answer · 2017-05-23 12:14:41Z

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, 2017 at 12:14

CommunityBot

11 silver badge

answered Oct 24, 2015 at 8:11

The fourth bird

165k16 gold badges61 silver badges75 bronze badges

Collectives™ on Stack Overflow

how to stop a javascript function from resetting on form submit

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related