I'm doing a HTML form, it's meant to create step to pass on a game and I want to be able to enter a number and when for example I enter 5 it instantly show me 5 form to fill and create new step but when I try it doesn't appear how can I do please?
<h3>Insertion des étape :</h3>
<form action="InsertionEtape.php" method="post">
<input type="number" name="quantity" min="1" max="5">
<br>
<?php for ($i=0; $i < $_GET['quantity']; $i++) {
?>
<h5>Nom de l'étape</h5>
<input type="text" name="NomEtape" size="40" maxlength="40">
<br>
<h5> Description de l'étape </h5>
<textarea name="DescriptionEtape" rows="8" cols="80"></textarea>
<br>
<br>
<input type="submit" value="Valider">
<?php
} ?>
</form>
<h3>Insertion des étape :</h3>
<form action="index.php" method="post">
<input type="number" name="quantity" id="quantity" min="1" max="5">
<div id="formcontainer">
</div>
<input type="submit" value="Valider">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
jQuery(function($) {
$("#quantity").bind('keyup mouseup', function () {
var count = $('#quantity').val();
var htmlf = '';
for (i = 0; i < count; i++) {
htmlf += "<h5>Nom de l'étape</h5><br/>";
htmlf += '<input type="text" name="NomEtape_"'+i+' size="40" maxlength="40">';
htmlf += "<h5>Description de l'étape</h5><br/>";
htmlf += '<textarea name="DescriptionEtape_"'+i+' rows="8" cols="80"></textarea>';
htmlf += "<br/>"
}
$("#formcontainer").html(htmlf);
});
});
</script>
Simple Just run the code and you can find yourself easy.
okey I changed to this but an error appeared,
<form action="InsertionEtape.php" method="post">
<input type="number" name="quantity" min="1" max="5">
<br>
<?php for ($i=0; $i < $_GET['quantity']; $i++) {
echo "<h5>Nom de l'étape</h5>";
echo "<input type=\"text\" name=\"NomEtape_".$i."\" size=\"40\" maxlength=\"40\"> <br>";
?>
<h5> Description de l'étape </h5>
<textarea name="DescriptionEtape" rows="8" cols="80"></textarea>
<br>
<br>
<input type="submit" value="Valider">
<?php
} ?>
</form>
Notice: Undefined index: quantity in /***/**********/*****/******/WWW/Page_Administrateur/FormulaireInsertion.php on line 106
Right so it sounds like you want this form to update on page. For this you'll need to use JavaScript. PHP runs server side only, you want this to update on the client side.
Here is a quick example to get you on the right path. I am using jQuery which is a popular Javascript library.
var $group = $('form .group').clone();
$('[name="quantity"]').on('change input keyup cut paste', function() {
var quantity = parseInt($(this).val());
$('form .group').remove();
for (var i = 0; i < quantity; i++) {
$group.clone().insertBefore('form [type="submit"]');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Insertion des étape :</h3>
<form action="InsertionEtape.php" method="post">
<input type="number" name="quantity" value="1" min="1" max="5">
<br>
<div class="group">
<h5>Nom de l'étape</h5>
<input type="text" name="NomEtape[]" size="40" maxlength="40">
<br>
<h5> Description de l'étape </h5>
<textarea name="DescriptionEtape[]" rows="8" cols="80"></textarea>
<br>
</div>
<input type="submit" value="Valider">
</form>
</div>