CODEWITHSUNDEEP
phphtmlpost
GetOn
GetOn

Reputation: 17

Form submit show div and post data

So I've got a form which need to post data to a hidden div which I want to show when the form is submitted so when the user clicks submit it needs to show the div and the posted results

<div id="lootnumbers">


<form method="post" name="lootNumber" onsubmit="show(); return false;">
    Choose your 2 lucky numbers!
    <input type="number" name="quantity1" min="1" max="5" /><br>
    <input type="number" name="quantity2" min="1" max="5" /><br>
    <input type="submit" value="submit" name="submit" />
</form>
</div>
<div id="loot_dice" style="display:none;">
    <?php $first = $_POST['quantity1'];
          $second= $_POST['quantity2'];

          echo $first;
          echo $second;
    ?>
    <div id="die2" class="dice">0</div>
        <button id="roll" onclick="rollLoot();">Roll Dice</button>
    </div>

and the js file 

function show() {
    var div = document.getElementById("loot_dice");
    if (div.style.display == 'none') {
        div.style.display = '';
    } else {                       
        div.style.display = 'none';
    }
}

Problem is that it does show the div when submitted but it wont post / show the results (I tried using form action 'index.php in which the hidden / shown div is located (the form is also located in index.php)

Upvotes: 0

Views: 1027

Answers (3)

Muriano
Muriano

Reputation: 383

It is because you have inline style for your document. Maybe your function is showing it, but when form is submited and page is reloaded, it becomes invisible again.

You can try something like:

<div id="loot_dice" style="display:<?= if(isset($_POST['quantity1'])) ? 'block' : 'none' ?>;">

Or, like @Bikash says to you, try something like ajax or jQuery to achieve it.

Upvotes: 0

Jayesh Chitroda
Jayesh Chitroda

Reputation: 5049

Try this:

<div id="lootnumbers">
    <form method="post" name="lootNumber" action="">
        Choose your 2 lucky numbers!
        <input type="number" name="quantity1" min="1" max="5" /><br>
        <input type="number" name="quantity2" min="1" max="5" /><br>
        <input type="submit" value="submit" name="submit" />
    </form>
</div>
<?php $style=""; if(empty($_POST)) { $style = 'display:none;'; } ?>
<div id="loot_dice" style="<?php echo $style; ?>">
    <?php 
        if(!empty($_POST)) {
            $first = $_POST['quantity1'];
            $second= $_POST['quantity2'];
            echo $first;
            echo $second;
        }
    ?>
    <div id="die2" class="dice">0</div>
    <button id="roll" onclick="rollLoot();">Roll Dice</button>
</div>

Upvotes: 1

mplungjan
mplungjan

Reputation: 177965

Perhaps you meant this

<form method="post" name="lootNumber">
    Choose your 2 lucky numbers!
    <input type="number" name="quantity1" min="1" max="5" /><br>
    <input type="number" name="quantity2" min="1" max="5" /><br>
    <input type="button" value="show" id="but"/>
</form>
</div>
<div id="loot_dice" style="<?PHP if (!isset($_POST["quantity1"]) || empty($_POST["quantity1"])) echo "display:none" ?>">
    <?php $first = $_POST['quantity1'];
          $second= $_POST['quantity2'];

          echo $first;
          echo $second;
    ?>
    <div id="die2" class="dice">0</div>
        <button id="roll" onclick="rollLoot();">Roll Dice</button>
    </div>


window.onload=function() {
  document.getElementById("but").onclick=function() {
    var form = document.forms[this.form.name];
    var div = document.getElementById("loot_dice");
    div.style.display = div.style.display == 'none'?'':'none';
    setTimout(function() { form.submit(); }, 3000);
  }
}

Upvotes: 0

Related Questions