Принудительное обновление страницы + удаление форм

Bebeka · December 12, 2012

Есть страница, с которой юзер вводит разные данные + загружает фотографии (загрузка фоток без перезагрузки страницы).

Так вот, когда юзер всё вводит, загружает фото, он сохраняет данные и попадает на страницу, которую и сам создал введя данные. Но тут есть нюанс, он может нажать на ссылку "ДОБАВИТЬ ЕЩЕ" и пройти всё заново, а может нажать и Backspace, от чего на странице еще сохранились старые введенные данные + скриншоты загруженных фото.

Как сделать чтобы при нажатии на Backspace, скрипт ПРИНУДИТЕЛЬНО страницу обновил, чтобы все значения "встали" по умолчанию.

Спасибо.

rus · December 13, 2012

value="" - т.е. оставить пустым, либо вместо фонового коннекта делать редирект, тогда уж точно не сохранятся.

wwt · December 13, 2012

window.location.reload(bool);

перезагружает текущую страницу, если bool true то документ берется с сервера, если false или не указано то браузер может брать из кеша, в этом обычно и заключается почему запоминаются значения полей ибо берутся из кеша.

Если сохранение данных происходит с помощью ajax, то можно таким образом обновлять страницу после отправки данных и получения положительного ответа. Мне кажется проще всего будет очищать поля форм своим каким то скриптом при загрузке страницы.

Edited December 13, 2012 by wwt

Bebeka · December 13, 2012

rus,

wwt,

СПАСИБО большое за отклик!

но я ребята не понял ваши советы, можете еще детальней объяснить а лучше показатЬ?

кстати, window.location.reload(bool); не работает.... или я как-то не так его на страницу вывел..

wwt · December 13, 2012

rus,
wwt,
СПАСИБО большое за отклик!
но я ребята не понял ваши советы, можете еще детальней объяснить а лучше показатЬ?
кстати, window.location.reload(bool); не работает.... или я как-то не так его на страницу вывел..

вместо bool должно быть булево значение:

true - брать с сервера

false или не указано - может брать из кеша

тоесть:

window.location.reload(true);

Bebeka · December 13, 2012

wwt, сделал, страница обновляется не прекращая)))) как сделать чтобы он делал всего 1 раз?

кстати, этот метод работает на всех браузерах? и как я понял это на JS?

wwt · December 13, 2012

Я же написал когда это можно использовать ))

К примеру вы отсылаете запрос с помощью ajax и получаете ответ и тогда можете обновить страницу этим методом если ответ пришел тот что вам нужен. Если же после отправки формы происходит переход на другую страницу лучше этот метод не использовать.

Bebeka · December 13, 2012

wwt, да.. у меня после у меня переходит на др страницу....(((

а нельзя как нибудь запретить использование кнопки назад? или при переходе "назад" обновлялись значения?

есть же разные тесты и т.п., там при переходе "НАЗАД" значения либо обнуляются, либо "бросают" юзера на другую страницу чтобы он не подменил введенные результаты

wwt · December 13, 2012

wwt, да.. у меня после у меня переходит на др страницу....(((
а нельзя как нибудь запретить использование кнопки назад? или при переходе "назад" обновлялись значения?
есть же разные тесты и т.п., там при переходе "НАЗАД" значения либо обнуляются, либо "бросают" юзера на другую страницу чтобы он не подменил введенные результаты

обнулить историю не получится. В целях безопасности это не дозволено js. Вы можете все данные формы отсылать с помощью ajax , ответом получать к примеру url страницы на которую нужно перейти пользователю. и переходить на этот урл с помощью другого метода location.replace(url) когда переход на страницу делается с помощью него текущая страница не попадает в историю, и при нажатии назад человек не вернется назад.

Второй вариант вы можете проверять форму после загрузки и если там значения отличные от дефолтных менять их на дефолтные, что-то вроди:


window.onload = function(){
if(document.getElementById("name").value != ""){
   document.getElementById("name").value = "";
}
if(document.getElementById("phone").value != ""){
   document.getElementById("phone").value = "";
}
//и так каждое поле
}

Еще есть метод reset() у форм. Но блок где выводятся превьюшки загруженных фоток вам придется тоже очистить, что-то типо:


<html>
<head>
<script>
window.onload = function(){
   document.getElementById("myForm").reset();
   document.getElementById("myPreviews").innerHTML = "";
}
</script>
</head>
<body>

<form id="myForm">
<input type="text" name="name"><br>
<input type="text" name="phone"><br>
</form>
<div id="myPreviews"></div>
</body>
</html>

Edited December 13, 2012 by wwt

Bebeka · December 13, 2012

wwt, идеи хорошие, но друг они не подойдут, т.к. это действия для ONLOAD, а когда юзер нажимает назад, он переходит на пред.страницу БЕЗ её перезагрузки.... поэтому твои методы для мня не рабочие.

wwt · December 13, 2012

wwt, идеи хорошие, но друг они не подойдут, т.к. это действия для ONLOAD, а когда юзер нажимает назад, он переходит на пред.страницу БЕЗ её перезагрузки.... поэтому твои методы для мня не рабочие.

Кстати да что-то я не подумал.

Ну значит вариант с ajax ваше все =)) Отправляйте все данный с его помощью и переадресовывайте потом пользователя с помощью location.replace(), тогда к форме ему придется возвращатся с помощью вашей ссылки.

вот вам тестовый пример на jQuery:

index.php


<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title></title> 
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function(){
//событие на нажатие кнопки go
$("#go").click(function(){
    //объект данных получаемых из полей
    var data_req = {
        name: $("#name").val(),
        phone: $("#phone").val()
    }
    //ajax запрос методом post
    $.post(
        "/page.php",
        data_req,
        //обработчик ответа
        function(data) {
            //проверяем что вернул сервер, если вернул ok значит хорошо
            if(data.status == "ok"){
                alert("Данные отправлены! Адрес для перехода: " + data.url);
                //переадресовываем на другую страницу, адрес получили по результатам запроса.На текущую страницу нельзя будет вернутся кнопкой назад
                window.location.replace(data.url);    
            }
        },
        //ответ ждем в формате json так удобнее
        "json"
    );
});

});

</script>
</head>
<body>
 <form id="test">
   <input id="name" name="name">Имя
   <input id="phone" name="phone">телефон
   <input id="go" type="button" value="go">
</form>
</body>
</html>

page.php


<?php
//проверяем есть ли переменные в массиве POST
if(isset($_POST["name"]) && isset($_POST["phone"])){
   //если есть записываем их в файл
   file_put_contents("test.txt","Имя: ".$_POST["name"]." Телефон: ".$_POST["phone"]);
   //выводм ответ в формате json статус запроса и url
   echo '{"status":"ok","url":"/page.php"}';
}else{
   //если переменных нет в массиве POST выводим то что записывали в файл
   echo file_get_contents("test.txt");
}

Edited December 13, 2012 by wwt

Sign In

Принудительное обновление страницы + удаление форм

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information