как остановить функцию javascript от сброса на форму submit

У меня проблема с моей веб-страницей. Я пытаюсь создать опрос с изображением и использовать форму submit с несколькими группами переключателей. Изображение меняется каждые 15 секунд от img1.jpg до img2.jpg и т. Д. И т. Д., А данные с переключателей сохраняются в моей локальной базе данных. Проблема заключается в том, что изображение находится на img2.jpg, и когда пользователь нажал кнопку submit, чтобы сохранить его в базе данных, изображение сбрасывается на img1.jpg. Что я должен делать, чтобы изображение не сбрасывалось каждый раз при отправке формы?как остановить функцию javascript от сброса на форму submit

Вот мой код:

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

источник

2015-10-24 marse

Вы отправляете форму. После сообщения перезагружается страница и загружается начальное изображение. Вам нужно указать способ передачи имени текущего img, которое вы видите на сервере при отправке формы. Есть multiple ways, вы можете это сделать. Например, вы можете сделать это, передав его в строку запроса и затем проверив его.

источник

2015-10-24 08:11:29

1.Create файл называется формой-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. Если вы хотите, чтобы что-то произошло, когда была отправлена форма, предоставьте мне информацию для нее.

источник

2015-10-24 08:16:12

Я не могу заставить его работать – marse

Это должно быть так, как должны работать ваши файлы и код (с использованием Ajax). Я снова проверю свой код, и я постараюсь вам помочь. –

Я изменил свой ответ на два файла, которые работают здесь. Пожалуйста, попробуйте их и сообщите нам, если вы преуспели. –

как остановить функцию javascript от сброса на форму submit

ответ

Смежные вопросы