Показать скрытый div при отправке формы (JavaScript и PHP)

0

Я пытаюсь создать ряд гаданий:

<?php
    $num = rand(1,1000);
    $guess = $_POST["guess"];
?>

<div class="intro">We've generated a random number between 1 and 100. Give us your best guess!</div>

<form action="index.php" method="post">
    <input type="text" name="guess">
    <input type="submit" value="Guess!" onsubmit="showHide()">
</form>

<div class="guess-text">Your guess was <span class="guess-var"><?php echo $guess; ?></span></div>

<div class="echo" id="hidden_div>
<?php
    if ($guess > $random) {
    echo "Sorry, too high! Better luck next number!";
    }

elseif ($guess < $random) {
echo "Sorry, too low! Better luck next number!";
    }

else {
    echo "<script type='text/javascript'>location.href='/youwin.html'</script>";
}
?>
</div>

Я хочу, чтобы div показывал результат

<div class="echo" id="hidden_div">

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

<script type="text/javascript">
    function showHide() {
        var div = document.getElementById("hidden_div");
        if (div.style.display == 'none') {
            div.style.display = '';
        }

        else {
            div.style.display = 'none';
        }
    }
</script>

К сожалению, это только скрывает div. Мне нужна помощь, чтобы убедиться, что div снова появится после того, как будет отправлено предположение. Благодарю.

Теги:
forms
submit

2 ответа

1

Вы можете сделать это, не используя Javascript, делая его более чистым...

<?php if(isset($_POST["guess"]) && $_POST["guess"]!=""){ //only show if 'guess' is posted?>
 <div class="echo" id="hidden_div>

    if ($guess > $random) {
       echo "Sorry, too high! Better luck next number!";
    }

 elseif ($guess < $random) {
 echo "Sorry, too low! Better luck next number!";
    }

 else {
    echo "<script type='text/javascript'>location.href='/youwin.html'</script>";
 }
 ?>
 </div>
<?php } ?>

Другой вариант делает вывод непосредственно в Javascript, поэтому вам не нужно обновлять страницу, чтобы получить ответ.

0

initialy make div как скрытый

<div class="echo" id="hidden_div" style="display:none">
<?php
    if ($guess > $random) {
    echo "Sorry, too high! Better luck next number!";
    }

elseif ($guess < $random) {
echo "Sorry, too low! Better luck next number!";
    }

else {
    echo "<script type='text/javascript'>location.href='/youwin.html'</script>";
}
?>
</div>

нажатие кнопки

<input type="submit" value="Guess!" id="btn" name="btn" onclick="showHide()">

<script type="text/javascript">
    function showHide() {
            document.getElementById("hidden_div").style.display = "block";
    }
</script>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню