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.
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>
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
Related
i am trying to get $_POST["number"] from <div name="number" class="total"></div> class total is attached with
`
var count = 0;
$('button').click(function(){
count++;
count > 3 || $('.total').append($(this).val());
});`
When i try to get the $_POST["number"] Notice: Undefined index: number in C:\xampp\htdocs\index.php on line 67
EDIT:
If that won't work how i can get that JQuery value inside to that value=""
Thanks to #Barry Thomas for helping me. Here is the fix:
FORM
<form method="POST" action="">
Name <input name="name" type="text"></input> <br /><br />
Number <div id="codebar">
<input type="hidden" name="number" id="form_number" value="">
<div id="div_number" class="total"></div>
</div>
<br>
<input name="submit" type="submit"></input>
</form>
JQUERY
var count = 0;
$('button').click(function(){
count++;
count > 3 || $('.total').text($(this).val());
$('#form_number').val($('#div_number').text());
});
Your code:
<form method="POST" action="">
Name <input name="name" type="text"></input> <br /><br />
Number <div id="codebar">
<input type="hidden" id="form_number" value="">
<div name="number" id="div_number" class="total"></div>
</div>
<br>
<input name="submit" type="submit"></input>
</form>
Move the name="number" on to the input, like so.
<form method="POST" action="">
Name <input name="name" type="text"></input> <br /><br />
Number <div id="codebar">
<input type="hidden" name="number" id="form_number" value="">
<div id="div_number" class="total"></div>
</div>
<br>
<input name="submit" type="submit"></input>
</form>
The form input was missing name="number" so when it posted there was no $_POST['number']
var count = 0;
$('button').click(function(){
count++;
count > 3 || $('.total').text($(this).val());
**$('#form_number').val($('#div_number').text());**
});
i have multiple rows insertion, so, i want to insert them into database.
i am trying to use loop function to send them to a table; but not success. Please anyone help with this?
//Adding New Line Item Function
var i = 1;
function AddNew(){
if (i <=3){ //if you don't want limit, you remove IF condition
i++;
var div= document.createElement('div');
div.innerHTML = '<input type="text" value="'+i+'" name="lineitem_'+i+'" maxlength="2" size="2"> <input type="text" name="materialcode_'+i+'" placeholder="Material Code" maxlength="18" size="18"> <input type="text" name="qty_'+i+'" placeholder="Quantity" maxlength="10" size="10"> <input type="text" name="price_'+i+'" placeholder="Price" maxlength="10" size="10"> <input type="button" onclick="removeItem(this)" value="-">';
document.getElementById('addingitem').appendChild(div);
}
}
function removeItem(div){
//document.getElementById('addingitem').removeChild(div.parentNode);
i--;
var addingitem = document.getElementById('addingitem');
addingitem.removeChild(div.parentNode);
var inputs = addingitem.querySelectorAll('[name^="lineitem_"]');
for (var r = 0; r < inputs.length; r++)
{
var item = inputs[r];
item.value = r + 1;
}
inputs = null;
}
//Validate Number Key
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode
return !(charCode > 31 && (charCode < 48 || charCode > 57));
}
<form method="post" action="make_order.php">
<!--Adding item-->
Item Detail:
<br />
<div id="addingitem">
<input type="text" name="lineitem_1" id="item" value="1" maxlength="2" size="2">
<input type="text" name="materialcode_1" placeholder="Material Code" maxlength="18" size="18">
<input type="text" name="qty_1" placeholder="Quantity" maxlength="10" size="10">
<input type="text" name="price_1" placeholder="Price" maxlength="10" size="10">
<input type="button" name="addnew" id="Add_New()" onClick="AddNew()" value="New Item">
</div>
<br />
<input type="submit" name="makeorder" value="Make Order">
</form>
I have n number of text box (n may be any number) with same name. And
I want to access the value of all the text box of that name.
Ex-:
<form method="post" id="create">
<input type="text" name="user[]" />
<input type="text" name="user[]" />
<input type="text" name="user[]" />
<input type="button" id="newFieldBtn"/>
<input type="submit" name="save" value="save"/>
</form>
jQuery
<script>
jQuery(document).ready(function($) {
$('#newFieldBtn').click(function(){
var code='<input type="text" name="user[]" />';
jQuery('#create').append(code);
</script>
or is there any other way to access the value of the text box. Either
by class or any other property..
<script>
jQuery(document).ready(function($) {
$('#newFieldBtn').click(function(){
var count = document.getElementById('count').value;
count++;
var code = '<input type="text" name="user'+count+'" />';
jQuery('#create').append(code);
document.getElementById('count').value = count;
</script>
and your html like...
<form method="post" id="create">
<input type="hidden" id="count" value="0" name="count">
<input type="button" id="newFieldBtn"/>
<input type="submit" name="save" value="save"/>
</form>
and in your php code...
<?php
if(isset($_POST))
{
$count = $_POST['count'];
for($i=1;$i<=$count;$i++)
{
$user.$i = $_POST['user'.$i];
}
}
?>
Try this one, it will show you the values :
<form action="#" method="post">
<input type="text" name="user[]" />
<input type="text" name="user[]" />
<input type="text" name="user[]" />
<input type="submit" value="submit" >
</form>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
foreach($_POST['user'] as $key => $value)
{
echo $key." has the value = ". $value."<br>";
}
}
?>
See this in action: http://wistudat.be/try/array.php
hello guys? can you help me with this? i want to get the id of the first input and the text value of the second input in a specific p tag
<p class="receiveitem">
<label for="mat_id">Material</label>
<input type="text" id="4"value="GI Coulping" disabled/>
<label for="rec_qty">Quantity</label>
<input type="text" class="rec_qty" />
<input type="button" class="receive" value=Receive />
</p>
<p class="receiveitem">
<label for="mat_id">Material</label>
<input type="text" id="5"value="Vulca Seal" disabled/>
<label for="rec_qty">Quantity</label>
<input type="text" class="rec_qty" />
<input type="button" class="receive" value=Receive />
</p>
<p class="receiveitem">
<label for="mat_id">Material</label>
<input type="text" id="6"value="teflon tape" disabled/>
<label for="rec_qty">Quantity</label>
<input type="text" class="rec_qty" />
<input type="button" class="receive" value=Receive />
</p>
so when i click the receive button that's in the p tag.
it will output someting like
ID: 4 and Value: 10
already have a js.but i can't get it done.
$(document).ready(function(){
$('input#receive').click(function(){
var mat = $('input[type=text]:first').attr('id');
var qty = $('input[type=text]:last').val;
alert(mat + qty);
});
});
and i dont know where to put the this in my variables mat and qty.please help?
Here is a modified approach using the more semantically correct data attributes (which are broadly supported) (building on #Chase's answer) (and a demo)
<p class="receiveitem">
<label for="mat_id">Material</label>
<input name="mat_id" type="text" data-id="4" value="GI Coulping" disabled="disabled"/>
<label for="rec_qty">Quantity</label>
<input type="text" name="rec_qty" />
<input name="rec_qty" type="button" class="receive" value="Receive" />
</p>
<p class="receiveitem">
<label for="mat_id">Material</label>
<input name="mat_id" type="text" data-id="5" value="Vulca Seal" disabled="disabled"/>
<label for="rec_qty">Quantity</label>
<input type="text" name="rec_qty" />
<input type="button" class="receive" value="Receive" />
</p>
<p class="receiveitem">
<label for="mat_id">Material</label>
<input name="mat_id" type="text" data-id="6" value="teflon tape" disabled="disabled"/>
<label for="rec_qty">Quantity</label>
<input type="text" name="rec_qty" />
<input type="button" class="receive" value="Receive" />
</p>
With this JavaScript
$(document).on("click", "input.receive", function () {
var mat = $(this).siblings("[name='mat_id']").data("id");
var qty = $(this).siblings("[name='rec_qty']").val();
alert("mat id: " + mat + " qty val: " + qty);
});
This approach won't abuse the id attribute which is designed for node identification and not data storage.
$(document).on('click', 'input#receive', function(e){
e.preventDefault();
var qty = $(this).prev().prev('input');
alert(qty);
});
You really need to change your markup to use data or unique IDs though.
JS
$(document).ready(function(){
$('.comment').bind("blur focus keydown keypress keyup", function(){recountss();});
$('input.comment_button').attr('disabled','disabled');
$('#form').submit(function(e){
tweet();
});
});
function recountss()
{
var maxlen=280;
var current = maxlen-$('.comment').val().length;
$('.counters').html(current);
if(current<0 || current==maxlen)
{
$('.counters').css('color','#D40D12');
$('input.comment_button').attr('disabled','disabled').addClass('inact');
}
else if (!$.trim($(".comment").val()))
{
$('input.comment_button').attr('disabled','disabled').addClass('inact');
}
else
$('input.comment_button').removeAttr('disabled').removeClass('inact');
if(current<10)
{
$('.counters').css('color','#D40D12');
}
else if(current<20)
{
$('.counters').css('color','#5C0002');
}
else
{
$('.counters').css('color','#C0C0C0');
}
HTML
<form method="post" action="" id="form">
<textarea name="comment" class="comment" id="ctextarea<?php echo $msg_id;?>" ></textarea>
<input type="hidden" name="uid" id="uid" value="<?php echo $uid; ?>"/>
<div class="p"></div>
<input type="submit" value="Comment" id="<?php echo $msg_id;?>" class="comment_button"/>
<span class="counters">
280
</span>
</form>
I using jquery.
I have more than 1 textarea, if I type in textarea-1, it work, button disabled if no any text and recount working good.
But if I type in textarea-2, textarea-3, textarea-N, it can't work.
So how can I do to make all works ?
Thank you.
If each <textarea> has its own maxlen=280, it would be better to change from using class - $('.comment') to id - $('#ctextarea-'+i) on all elements - <textarea>, <button>, <span>, etc.
This is untested, but should help point you in the right direction.
$(document).ready(function(){
var i=1;
var numtextarea = 1;
$('#form').find('textarea').each(function(){numtextarea++;} //find number of <textarea>'s
while(i<numtextarea){ // loop through each <textarea>
$('#ctextarea-'+i).bind("blur focus keydown keypress keyup", function(){recountss(i);});
$('#comment_button-'i).attr('disabled','disabled');
}
});
$('#form').submit(function(e){
tweet();
});
});
function recountss(i)
{
var maxlen=280;
var current = maxlen-$('#ctextarea-'+i).val().length;
$('#counters-'+i).html(current);
if(current<0 || current==maxlen)
{
$('#counters-'+i).css('color','#D40D12');
$('#comment_button-'+i).attr('disabled','disabled').addClass('inact');
}
else if (!$.trim($("#ctextarea-'+i).val())) {
$('#comment_button-'+i).attr('disabled','disabled').addClass('inact');
}
else
$('#comment_button-'+i).removeAttr('disabled').removeClass('inact');
if(current<10)
$('#counters-'+i).css('color','#D40D12');
else if(current<20)
$('#counters-'+i).css('color','#5C0002');
else
$('#counters-'+i).css('color','#C0C0C0');
}
And your form should look like -
<form method="post" action="" id="form">
<textarea name="comment" class="comment" id="ctextarea-1" ></textarea>
<input type="hidden" name="uid" id="uid" value="1"/>
<div class="p"></div>
<input type="submit" value="Comment" id="comment_button-1" class="comment_button"/>
<span id="counters-1">
280
</span>
<textarea name="comment" class="comment" id="ctextarea-2" ></textarea>
<input type="hidden" name="uid" id="uid" value="2"/>
<div class="p"></div>
<input type="submit" value="Comment" id="comment_button-2" class="comment_button"/>
<span id="counters-2">
280
</span>
...
<textarea name="comment" class="comment" id="ctextarea-N" ></textarea>
<input type="hidden" name="uid" id="uid" value="N"/>
<div class="p"></div>
<input type="submit" value="Comment" id="comment_button-N" class="comment_button"/>
<span id="counters-N">
280
</span>
</form>