Верните URL в исходное состояние после обновления

Question

Я написал эту форму, используя html и PHP на моей веб-странице. Эта форма получает номер в качестве ввода. и добавляет желаемое число к 2. И печатает вывод.

Например, если мы введем число 5 на входе и нажмем кнопку отправки, страница обновится до этого URL: mysite.com/page1/ ? sen = 5 & sub = Submit

И на выходе напечатано число 7.

Пока все хорошо. Но когда мы обновляем sh страницу в этом случае, представленная информация не будет удалена, а URL останется «mysite.com/page1/?sen=5&sub=Submit». И вывод не очищается и по-прежнему остается 7 .

В этом случае я хочу, чтобы страница вернулась в исходное состояние (mysite.com/page1). И вывод очищается.

в чем решение?

<form name="form1" action="" method="GET">
<input type="number" name="sen" placeholder="سن">
<input type="submit" name="sub" placeholder="ثبت">
</form>
<?php if ( isset($_GET['sub'])){
    //$sen1=0;
     $sen1 = $_GET['sen'];
    if (empty($sen1)){
         echo "ooopppss";
    }

else {
echo $sen1 + 2; }
}
?>

Answer 1

Вы можете достичь своей цели, изменив код для сохранения результатов вычислений в переменной cook ie / session и перенаправив на ту же страницу без дополнительных параметров, например:

<form name="form1" action="" method="GET">
<input type="number" name="sen" placeholder="سن">
<input type="submit" name="sub" placeholder="ثبت">
</form>
<?php 

if ( isset($_GET['sub'])){
    $sen1 = $_GET['sen'];
    if (empty($sen1)){
         echo "ooopppss";
    }
    setcookie("result", $sen1 + 2);
    header("Location: " . $_SERVER['PHP_SELF']);
}

echo $_COOKIE['result']; 

?>

Answer 2

Этого легко достичь с помощью Javascript. Вот очень простой пример c.

Вы можете сделать это функцией. Затем вызовите его один раз, чтобы вызвать его на странице refre sh, и, если вы хотите вызвать его для действий кнопки, вы можете использовать атрибут html onclick или прослушиватель событий.

<script>
function clearFormAndParams() {
    // Target each form input and set the value to "".
    document.querySelector("input[name='sen']").value = "";

    // Split the url by the "?" and then set the value to the first half.
    window.location = window.location.href.split("?")[0];
}

clearFormAndParams(); // runs on refresh

var submitButton = document.querySelector("input[name='sub']");
submitButton.addEventListener("click", function() {
    clearFormAndParams();
});

</script>