I have 1 row of a HTML table with all days of the week and the weeknumber.
These inputs are all empty.
You may fill in every input and it will update the query.
It works for x rows because I am using array names and working with 'for each id update the query'.
Now I created a button that appends HTML to its content with javascript.
Dynamically adding inputs.
However, when I submit these inputs and submit the form, the inputs will not be read, so it won't be updated into the database.
I made sure the
<tbody id="input_fields_wrap">
</tbody>
are inside the <form></form>
(In the tbody inputs will be added by the button).
I made sure all inputs are array.
Here are the steps in screenshots:
For your extra information: Iam using 1 row precoded in the HTML. If I used 5 for example instead of 1 precoded row, it is working too.
Only the dynamically javascripted added attributes aren't working.
So this is the precoded HTML (its just there)
<div class="col-xs-2" >
<td><input type="text" name="wk[]" class="form-control" value="<?php if ($week_sel_get) { echo $week_sel_get; }else{ echo $week_show; } ?>" placeholder="0" maxlength="2" <?php if ($week_sel_get) { echo 'style="background:#efefef"'; } ?> /></td>
<td><input type="text" class="form-control" name="m[]" value="" placeholder="00:00 - 00:00" <?php if ($day_sel_get == 'maandag') { echo 'style="background:#efefef"'; } ?> /></td>
<td><input type="text" class="form-control" name="d[]" value="" placeholder="00:00 - 00:00" <?php if ($day_sel_get == 'dinsdag') { echo 'style="background:#efefef"'; } ?> /></td>
<td><input type="text" class="form-control" name="w[]" value="" placeholder="00:00 - 00:00" <?php if ($day_sel_get == 'woensdag') { echo 'style="background:#efefef"'; } ?> /></td>
<td><input type="text" class="form-control" name="d[]" value="" placeholder="00:00 - 00:00" <?php if ($day_sel_get == 'donderdag') { echo 'style="background:#efefef"'; } ?> /></td>
<td><input type="text" class="form-control" name="v[]" value="" placeholder="00:00 - 00:00" <?php if ($day_sel_get == 'vrijdag') { echo 'style="background:#efefef"'; } ?> /></td>
<td><input type="text" class="form-control" name="za[]" value="" placeholder="00:00 - 00:00" <?php if ($day_sel_get == 'zaterdag') { echo 'style="background:#efefef"'; } ?> /></td>
<td><input type="text" class="form-control" name="zo[]" value="" placeholder="00:00 - 00:00" <?php if ($day_sel_get == 'zondag') { echo 'style="background:#efefef"'; } ?> /></td>
</div>
And just below is this:
<tbody id="input_fields_wrap">
</tbody>
Then the add fields button:
<div class="col-md-2" style="float:right; padding-top:10px; padding-bottom:20px;">
<input type="button" class="btn btn-success btn-gradient dark btn-block" id="add_field_button" value="Meer velden +">
</div>
And the javascript code:
<script type="text/javascript">
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $("#input_fields_wrap"); //Fields wrapper
var add_button = $("#add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<tr><div class="col-xs-2" ><td><input type="text" name="wk[]" class="form-control" value="" placeholder="0" /></td><td><input type="text" class="form-control" name="m[]" value="" placeholder="00:00 - 00:00" /></td><td><input type="text" class="form-control" name="d[]" value="" placeholder="00:00 - 00:00" /></td><td><input type="text" class="form-control" name="w[]" value="" placeholder="00:00 - 00:00" /></td><td><input type="text" class="form-control" name="d[]" value="" placeholder="00:00 - 00:00" /></td><td><input type="text" class="form-control" name="v[]" value="" placeholder="00:00 - 00:00" /></td><td><input type="text" class="form-control" name="za[]" value="" placeholder="00:00 - 00:00" /></td><td><input type="text" class="form-control" name="zo[]" value="" placeholder="00:00 - 00:00" /></td></div></tr> '); //add input box
}
});
});
</script>
And this is what the blue button does (submit form):
if (isset($_POST['submit_addr'])) {
$count = count($_POST['wk']); // Hoeveel ids?
$idusers_r = $_POST['idusers_r'];
$wk_post = $_POST['wk'];
$maandag = $_POST['m'];
$dinsdag= $_POST['d'];
$woensdag= $_POST['w'];
$donderdag= $_POST['d'];
$vrijdag= $_POST['v'];
$zaterdag= $_POST['za'];
$zondag = $_POST['zo'];
for($i=0;$i<$count;$i++){ // Voor elke id een loop
if ($wk_post[$i] !== '') {
$sql1="INSERT INTO rooster (idusers, week, maandag, dinsdag, woensdag, donderdag, vrijdag, zaterdag, zondag) VALUES ('$idusers_r','$wk_post[$i]','$maandag[$i]','$dinsdag[$i]','$woensdag[$i]','$donderdag[$i]','$vrijdag[$i]','$zaterdag[$i]','$zondag[$i]')"; //Let's update
$row_Recordset1=mysqli_query($conn, $sql1); // Run query
}
}
}
This is the whole form:
<form action="" method="post" >
<input type="hidden" name="idusers_r" value="<? echo $iduser; ?>">
<?php
$week_show = $week;
if ($_GET['day_sel'] || $_GET['week_sel']) {
$day_sel_get = $_GET['day_sel'];
$week_sel_get = $_GET['week_sel'];
}
?>
<tr>
<div class="col-xs-2" >
<td><input type="text" name="wk[]" class="form-control" value="<?php if ($week_sel_get) { echo $week_sel_get; }else{ echo $week_show; } ?>" placeholder="0" maxlength="2" <?php if ($week_sel_get) { echo 'style="background:#efefef"'; } ?> /></td>
<td><input type="text" class="form-control" name="m[]" value="" placeholder="00:00 - 00:00" <?php if ($day_sel_get == 'maandag') { echo 'style="background:#efefef"'; } ?> /></td>
<td><input type="text" class="form-control" name="d[]" value="" placeholder="00:00 - 00:00" <?php if ($day_sel_get == 'dinsdag') { echo 'style="background:#efefef"'; } ?> /></td>
<td><input type="text" class="form-control" name="w[]" value="" placeholder="00:00 - 00:00" <?php if ($day_sel_get == 'woensdag') { echo 'style="background:#efefef"'; } ?> /></td>
<td><input type="text" class="form-control" name="d[]" value="" placeholder="00:00 - 00:00" <?php if ($day_sel_get == 'donderdag') { echo 'style="background:#efefef"'; } ?> /></td>
<td><input type="text" class="form-control" name="v[]" value="" placeholder="00:00 - 00:00" <?php if ($day_sel_get == 'vrijdag') { echo 'style="background:#efefef"'; } ?> /></td>
<td><input type="text" class="form-control" name="za[]" value="" placeholder="00:00 - 00:00" <?php if ($day_sel_get == 'zaterdag') { echo 'style="background:#efefef"'; } ?> /></td>
<td><input type="text" class="form-control" name="zo[]" value="" placeholder="00:00 - 00:00" <?php if ($day_sel_get == 'zondag') { echo 'style="background:#efefef"'; } ?> /></td>
</div>
</tr>
<tbody>
<tbody id="input_fields_wrap">
</tbody>
</table>
<div class="col-md-2" style="float:right; padding-top:10px; padding-bottom:20px;">
<input type="button" class="btn btn-success btn-gradient dark btn-block" id="add_field_button" value="Meer velden +">
</div>
<div class="col-md-2" style="float:left; padding-top:10px; padding-bottom:20px;">
<input type="submit" class="btn btn-primary btn-gradient dark btn-block" name="submit_addr" value="Voeg toe">
</div>
</form>
What am I doing wrong?
Thanks for reading
Thanks to PalDev a simple solution.
Never thought about it.
This is my new javascript:
$(document).ready(function() {
var add_button = $("#add_field_button"); //Add button ID
var remove_button = $("#remove_field_button"); //Add button ID
$("#remove_field_button").hide();
$("#input_fields_wrap").hide();
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
$("#input_fields_wrap").show();
$("#add_field_button").hide();
$("#remove_field_button").show();
});
$(remove_button).click(function(e){ //on add input button click
e.preventDefault();
$("#input_fields_wrap").hide();
$("#remove_field_button").hide();
$("#add_field_button").show();
});
});
I created a simple while for showing 3 more inputs by default. And hiding them once the page is loaded
<tbody id="input_fields_wrap">
<?php
$max_items = 0;
while ($max_items < 3) {
$max_items = $max_items +1;
?>
<tr>
<div class="col-xs-2" >
<td><input type="text" name="wk[]" class="form-control" value="" placeholder="0" maxlength="2" /></td>
<td><input type="text" class="form-control" name="m[]" value="" placeholder="00:00 - 00:00" /></td>
<td><input type="text" class="form-control" name="d[]" value="" placeholder="00:00 - 00:00" /></td>
<td><input type="text" class="form-control" name="w[]" value="" placeholder="00:00 - 00:00" /></td>
<td><input type="text" class="form-control" name="d[]" value="" placeholder="00:00 - 00:00" /></td>
<td><input type="text" class="form-control" name="v[]" value="" placeholder="00:00 - 00:00" /></td>
<td><input type="text" class="form-control" name="za[]" value="" placeholder="00:00 - 00:00" /></td>
<td><input type="text" class="form-control" name="zo[]" value="" placeholder="00:00 - 00:00" /></td>
</div>
</tr>
<? } ?>
</tbody>
Now the buttons just hide and shows the content.
Thanks for helping
Related
This is my form which is inside a foreach loop
I want to display the product of two input which is the "qty" and "uprice"
but the only result I get is the first row I inputed.
Form
<tbody>
<?php foreach($_POST['porder'] as $porder): ?>
<tr>
<td>
<input type="text" id="itemnum" name="itemnum" max=999 class="form-control form-control-line">
</td>
<td>
<?php echo $porder ; ?>
</td>
<td>
<input style="text-transform:uppercase" type="text" id="rev" name="rev" class="form-control form-control-line" required>
</td>
<td>
<input style="text-transform:uppercase" type="text" id="desc" name="desc" class="form-control form-control-line" required>
</td>
<td>
<input type="number" id="qty<?=$porder?>" name="qty[]" min="1" class="form-control form-control-line" onkeyup="compute('<?=$porder?>')" required>
</td>
<td>
<input type="number" id="uprice<?=$porder?>" name="uprice[]" min="1" class="form-control form-control-line" onkeyup="compute('<?=$porder?>')" required>
</td>
<td>
<input type="number" id="amount<?=$porder?>" name="amount[]" onkeyup="stotal('<?=$porder?>')" class="form-control form-control-line" >
</td>
</tr>
<?php endforeach ?>
<tr>
<td colspan="5" ></td>
<td><strong>Total
</td>
<td>
<input type="number" id="total" name="total" class="form-control">
</td>
</tr>
Java Script
<script>
function compute() {
var txtFirstNumberValue = document.getElementById('qty').value;
var txtSecondNumberValue = document.getElementById('uprice').value;
var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
document.getElementById('amount').value = result;
}
}
</script>
Total
this is the code I use to compute the total amount but it didn't show the result.
var amount = document.getElementsByName('amount[]').value;
var sum = 0;
for (var i = 0; i <amount.length; i++) {
var input_value=amount[i];
sum +=parseInt(input_value.value);
document.getElementById('total').value = sum;
}
</script>
Change your code to below this code. You will get the correct result. '$product_id' means your product id from your database table. that is auto incremented.
Form
<tbody>
<?php foreach($_POST['porder'] as $porder): ?>
<tr>
<td>
<input type="text" id="itemnum" name="itemnum" max=999 class="form-control form-control-line">
</td>
<td>
<?php echo $porder ; ?>
</td>
<td>
<input style="text-transform:uppercase" type="text" id="rev" name="rev" class="form-control form-control-line" required>
</td>
<td>
<input style="text-transform:uppercase" type="text" id="desc" name="desc" class="form-control form-control-line" required>
</td>
<td>
<input type="number" id="qty<?=$product_id?>" name="qty" min="1" class="form-control form-control-line" onkeyup="compute(<?=$product_id?>)" required>
</td>
<td>
<input type="number" id="uprice<?=$product_id?>" name="uprice" min="1" class="form-control form-control-line" onkeyup="compute(<?=$product_id?>)" required>
</td>
<td>
<output type="number" id="amount<?=$product_id?>" name="amount" class="form-control form-control-line" >
</td>
</tr>
<?php endforeach ?>
Javascript Code
<script>
function compute(id) {
var txtFirstNumberValue = document.getElementById('qty'+id).value;
var txtSecondNumberValue = document.getElementById('uprice'+id).value;
var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
document.getElementById('amount'+id).value = result;
}
}
</script>
var qty = document.getElementsByName('qty[]');
for (var i = 0; i <qty.length; i++) {
var input_value=qty[i];
alert("First Index of Array : qty["+i+"].value= "+input_value.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="qty[]" id="qty1" type="number" value="1">
<input name="qty[]" id="qty2" type="number" value="3" >
<input name="qty[]" id="qty3" type="number" value="4" >
var qty = document.getElementsByName('qty[]');
var sum = 0;
for (var i = 0; i <qty.length; i++) {
var input_value=qty[i];
alert("First Index of Array : qty["+i+"].value= "+input_value.value);
sum +=parseInt(input_value.value);
}
alert("Sum is "+sum);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="qty[]" id="qty1" type="number" value="1">
<input name="qty[]" id="qty2" type="number" value="3" >
<input name="qty[]" id="qty3" type="number" value="4" >
It will fix your problem. Change the value of input, you will get the result.
function calc(){
var qty = document.getElementsByName('qty[]');
var sum = 0;
for (var i = 0; i <qty.length; i++) {
var input_value=qty[i];
// alert("First Index of Array : qty["+i+"].value= "+input_value.value);
var signle_value_input = input_value.value;
if(signle_value_input.length!=0)
sum +=parseInt(input_value.value);
}
$("#sum").html("Sum is "+sum);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sum"></div>
<input name="qty[]" id="qty1" type="number" value="" onkeyup="calc()">
<input name="qty[]" id="qty2" type="number" value="" onkeyup="calc()">
<input name="qty[]" id="qty3" type="number" value="" onkeyup="calc()" >
I Have a form with field ABA11,ABA12,ABA13........Which is used to update the data. In this form all the field should be remained in disabled mode except the first field ABA11 initially.once the ABA11 field is filled then only ABA12 will be enabled to enter data.Once the data is entered and it is saved in data base after that this filled should also be in disable mode.And this process to be continued for other field
<?php
$status11=disabled;
if(htmlentities($result->aba11)==null){
$status11=enabled;
}
?>
<td><input type="datetime-local" name="aba11" id="aba11" value="<?php echo htmlentities($result->aba11);?>" class="form-control" <?php echo $status11?> ></td>
<?php
$status12=disabled;
if(htmlentities($result->aba11)!=null and htmlentities($result->aba12)== null ){
$status12=enabled;
}
?>
<td><input type="datetime-local" name="aba12" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba12);?>" class="form-control" <?php echo $status12?>></td>
<td><input type="text" name="aba13" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba13);?>" class="form-control"></td>
</tr>
<tr>
<th class= "col-md-1.5" align="centre">0.0.1M NaOH</th>
<th class= "col-md-2" align="centre">60 Degree C</th>
<td><input type="datetime-local" name="aba21"onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba21);?>" class="form-control" ></td>
<td><input type="datetime-local" name="aba22" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba22);?>" class="form-control" ></td>
<td><input type="text" name="aba23" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba23);?>" class="form-control" ></td>
</tr>
<tr>
<th class= "col-md-1.5" align="centre">0.5M HCL</th>
<th class= "col-md-2" align="centre">60 Degree C</th>
<td><input type="datetime-local" name="aba31" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba31);?>" class="form-control" ></td>
<td><input type="datetime-local" name="aba32" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba32);?>" class="form-control" ></td>
<td><input type="text" name="aba33" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba33);?>" class="form-control"></td>
</tr>
<tr>
<th class= "col-md-1.5" align="centre">Freeze Drying</th>
<th class= "col-md-2" align="centre"> </th>
<td><input type="datetime-local" name="aba41" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba41);?>" class="form-control" ></td>
<td><input type="datetime-local" name="aba42" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba42);?>" class="form-control" ></td>
<td><input type="text" name="aba43" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba43);?>" class="form-control"></td>
</tr>
</table>
I tried it with the using if condition but i am not able to achieve it.Kindly suggest any clue or my mistake in this.I have entered the if condition only aba12.
I have modified part of your code to do it. First of all, there is no way you can do it with PHP because it is executed before the page is loaded in the server side, so you will need to use javascript for this.
I have removed the PHP code for enabling/disabling the input elements. I made the solution just for the two first elements (you will have to do it for the rest, so when you get to the page, your aba11 is enabled and the rest are disabled.
Once you set an input in aba11 (as you have an event oninput), it calls the javascript function disable_items with a number (this number indicates wich of the fields we are working on.
The javascript function disables the actual element and enables the next one.
<td><input type="datetime-local" oninput="disable_items(1)" name="aba11" id="aba11" value="<?php echo htmlentities($result->aba11);?>" class="form-control" <?php echo $status11?> ></td>
<td><input type="datetime-local" disabled oninput="disable_items(2)" name="aba12" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba12);?>" class="form-control" <?php echo $status12?>></td>
<td><input type="text" disabled name="aba13" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba13);?>" class="form-control"></td>
</tr>
<tr>
<th class= "col-md-1.5" align="centre">0.0.1M NaOH</th>
<th class= "col-md-2" align="centre">60 Degree C</th>
<td><input type="datetime-local" disabled name="aba21"onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba21);?>" class="form-control" ></td>
<td><input type="datetime-local" disabled name="aba22" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba22);?>" class="form-control" ></td>
<td><input type="text" disabled name="aba23" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba23);?>" class="form-control" ></td>
</tr>
<tr>
<th class= "col-md-1.5" align="centre">0.5M HCL</th>
<th class= "col-md-2" align="centre">60 Degree C</th>
<td><input type="datetime-local" disabled name="aba31" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba31);?>" class="form-control" ></td>
<td><input type="datetime-local" disabled name="aba32" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba32);?>" class="form-control" ></td>
<td><input type="text" disabled name="aba33" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba33);?>" class="form-control"></td>
</tr>
<tr>
<th class= "col-md-1.5" align="centre">Freeze Drying</th>
<th class= "col-md-2" align="centre"> </th>
<td><input type="datetime-local" disabled name="aba41" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba41);?>" class="form-control" ></td>
<td><input type="datetime-local" disabled name="aba42" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba42);?>" class="form-control" ></td>
<td><input type="text" disabled name="aba43" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba43);?>" class="form-control"></td>
</tr>
</table>
<script>
function disable_items(option) {
if (option==1){
document.getElementById("aba11").disabled=true;
document.getElementById("aba12").disabled=false;
}
if (option==2){
document.getElementById("aba12").disabled=true;
document.getElementById("aba13").disabled=false;
}
}
</script>
Hi I am using codeigniter framework. I am having a javascript to to create a table row dynamically when I click a button.
I need to have a dropdown inside a table cell that is added dynamically. Here is the code I tried so far.
function displayResult() {
<?php
$attributes = array('class' => 'form-horizontal', 'id' => '');
$options_employee = array('' => "Select");
foreach ($employee as $row)
{
$options_employee[$row['first_name']] = $row['first_name'];
}
?>
var something='<?php echo form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"');?>';
alert(something);
var row = document.getElementById("test").insertRow(-1);
row.innerHTML = '<td><div>'+something+'</div></td><td><input type="text" name="start_time[]" value="" style="width:35px;"/></td><td><input type="text" name="pid[]" style="width:35px;"/></td><td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td><td><input type="text" class="type" value="" style="width:45px;"/></td><td><input type="text" class="qty_prch" value="" style="width:45px;"/></td><td><input type="text" class="qty_used" value="" style="width:45px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td>';
}
When button is clicked I call this displayResult(). I am getting 2 errors in my console.
1.Uncaught SyntaxError: Unexpected token ILLEGAL
2.Uncaught ReferenceError: displayResult is not defined
Can someone help me? Please help me fix this code.
function displayResult() { <? php
$attributes = array('class' => 'form-horizontal', 'id' => '');
$options_employee = array('' => "Select");
foreach($employee as $row) {
$options_employee[$row['first_name']] = $row['first_name'];
}
?>
var something = '<?php echo form_dropdown('
employee ', $options_employee, set_value('
employee[]
'), '
class = "span2"
');?>';
alert(something);
var row = document.getElementById("test").insertRow(-1);
row.innerHTML = '<td><div>' + something + '</div></td><td><input type="text" name="start_time[]" value="" style="width:35px;"/></td><td><input type="text" name="pid[]" style="width:35px;"/></td><td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td><td><input type="text" class="type" value="" style="width:45px;"/></td><td><input type="text" class="qty_prch" value="" style="width:45px;"/></td><td><input type="text" class="qty_used" value="" style="width:45px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td>';
}
<div id="form">
<!-- div form starts here.its for add table -->
<table id="test">
<thead>
<tr>
<td style="width:80px;">
employee
</td>
<td style="width:35px;">
start time
</td>
<td style="width:35px;">
id
</td>
<td style="width:145px;">
Description
</td>
<td style="width:45px;">
Type
</td>
<td style="width:45px;">
qty prch
</td>
<td style="width:45px;">
qty used
</td>
<td style="width:70px;">
Price
</td>
<td style="width:70px;">
discount
<td style="width:70px;">
Tax
</td>
<td style="width:70px;">
Total
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<?php echo form_dropdown( 'employee', $options_employee, set_value( 'employee[]'), 'class="span2"');?>
</td>
<td>
<input type="text" name="start_time[]" value="" style="width:35px;" />
</td>
<td>
<input type="text" name="pid[]" value="" style="width:35px;" />
</td>
<td>
<input type="text" name="description[]" class="description" value="" style="width:145px;" />
</td>
<td>
<input type="text" name="type[]" class="type" style="width:45px;" />
</td>
<td>
<input type="text" name="qty_prch[]" class="qty_prch" style="width:45px;" />
</td>
<td>
<input type="text" name="qty_used[]" class="qty_used" style="width:45px;" />
</td>
<td>
<input type="text" name="price[]" class="price" style="width:70px;" />
</td>
<td>
<input type="text" name="discount[]" class="discount" style="width:70px;" />
</td>
<td>
<input type="text" name="tax[]" class="tax" style="width:70px;" />
</td>
<td>
<input type="text" name="total[]" class="total" style="width:70px;" />
</td>
</tr>
</tbody>
</table>
<div id="add_row">
<button onClick="displayResult()" class="add_r"></button>
</div>
This works fine for me. Thank you all for your support !!
function displayResult() {
<?php
$attributes = array('class' => 'form-horizontal', 'id' => '');
$options_employee = array('' => "Select");
foreach ($employee as $row)
{
$options_employee[$row['first_name']] = $row['first_name'];
}
$dropdown = form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"');
?>
var complex = <?php echo json_encode($dropdown); ?>;
var row = document.getElementById("test").insertRow(-1);
row.innerHTML =
'<td><div>'+complex+'</div></td>'+
'<td><input type="text" name="start_time[]" value="" style="width:35px;"/></td>'+
'<td><input type="text" name="pid[]" style="width:35px;"/></td>'+
'<td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td>'+
'<td><input type="text" class="type" value="" style="width:45px;"/></td>'+
'<td><input type="text" class="qty_prch" value="" style="width:45px;"/></td>'+
'<td><input type="text" class="qty_used" value="" style="width:45px;"/></td>'+
'<td><input type="text" value="" style="width:70px;"/></td>'+
'<td><input type="text" value="" style="width:70px;"/></td>'+
'<td><input type="text" value="" style="width:70px;"/></td>'+
'<td><input type="text" value="" style="width:70px;"/></td>';
}
Change your single ' to double "
your code is var something='<?php echo form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"');?>';
because when javascript start reading this line
var something='<?php echo form_dropdown('employee' it seems statement end here ('e near ' after dropdown('
you should use something like that
var something='<?php echo form_dropdown("employee", $options_employee, set_value("employee[]"), \'class="span2"\');?>';
sorry for my bad english
In your code Snippet on the first line :
function displayResult() { <? php
there is a space between <? and php
Remove that and retry.
I have a form that is filled with an database output. Before processing it the user can change the values when required.
How can I remove all entries with on click from column 'Aantal'
<tr>
<td><img border="0" align="center" src="<?php echo $config['prod_image'].$image_fld[$i].'/'.$image_name[$i].$config['prod_image_type']; ?>" /></td>
<td><input type="text" name="aantal[]" size="2" value="<?php echo $aantal[$i]; ?>" <?php if($error_aantal[$i] == 'ja'){ $error_omschr = $error_omschr_aantal[$i]; include('includes/errors/input_error.php'); } ?></td>
<td><input type="text" name="productnaam[]" size="35" value="<?php echo $productnaam[$i]; ?>" style="background-color: #e7e7e9" readonly="readonly" /></td>
<td><input type="text" name="afmeting[]" size="15" value="<?php echo $afmeting[$i]; ?>" style="background-color: #e7e7e9" readonly="readonly" /></td>
<td><input type="text" name="kwaliteit[]" size="15" value="<?php echo $kwaliteit[$i]; ?>" style="background-color: #e7e7e9" readonly="readonly" /></td>
<td align="center">
<input type="radio" name="garantie[<?php echo $i ?>]" <?php if ("nee" == $garantie[$i]) { echo 'checked="checked"'; } ?> value="nee">
<input type="radio" name="garantie[<?php echo $i ?>]" <?php if("ja" == $garantie[$i]) { echo 'checked="checked"'; } ?> value="ja">
<?php if($error_garantie[$i] == 'ja'){
$error_omschr = $error_omschr_garantie[$i]; include('includes/errors/input_error.php');
} ?>
</td>
</tr>
I hope I understood you correctly:
In your php file, that handles the form, make sure you're adding a class attribute to that column.
Also you should add a button or an element that clicking on it will trigger the hiding action.
For instance:
<td><input type="text" class="aantal" name="aantal[]" size="2" value="<?php echo $aantal[$i]; ?>" <?php if($error_aantal[$i] == 'ja'){ $error_omschr = $error_omschr_aantal[$i]; include('includes/errors/input_error.php'); } ?></td>
Later on:
<button id="myHidingButton">Click to hide aantal inputs.</button>
Then, using JS you can write:
var button = document.getElementById("myHidingButton"); //The button.
button.addEventListener("click",function(e){ //The onClick event.
//Get the element with the `aantal` class name and define the `i` variable.
var colToHide = document.getElementsByClassName('aantal'), i;
//Loop through all the aantal elements and hide them.
for (var i = 0; i < colToHide.length; i ++) {
colToHide[i].style.display = 'none';
}
},false);
To remove all aantal entries when pressing a button:
// Using jQuery
$("#reset_btn").click(function() {
$("input[name='aantal[]']").val("0");
});
// pure javascript
document.getElementById("reset_btn").addEventListener("click", function() {
Array.prototype.forEach.call(document.querySelectorAll("input[name='aantal[]']"), function(node) {
node.value = "0";
});
}, false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="aantal[]" size="2" value="1" />
<input type="text" name="aantal[]" size="2" value="2" />
<input type="text" name="aantal[]" size="2" value="3" />
<button id="reset_btn">Reset</button>
<script type="text/javascript"</script>
function reset_aantal()
{
var i, totaal = 0;
var elems = document.getElementsByName('aantal[]');
var l = elems.length;
for(i=0; i<l; i++)
{
document.getElementsByName('aantal[]')[i].value = '';
}
}
</script>
I want to compare the input value of the user and the value in the database. If the input value of the user is higher than the database value , the alert window will inform the user that the quantity he want is not enough.
how can i do this?
here is my html and php code
<div class="text">Enter Product Name Here: </div> <br/>
<form action="addorder.php" method="post" name="abc">
BEER
Pizza
Egg Pie
Ice Tea
Combo
</div> <br/> <br/>
<?php
if (isset($_GET['id']))
{
$con = mysql_connect('localhost','root',"");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("inventory", $con);
$member_id = $_GET['id'];
$result = mysql_query("SELECT * FROM productlist WHERE id = $member_id");
$row = mysql_fetch_array($result);
$name=$row["pdesc"];
$qty_left=$row["pleft"];
$price=$row["pprice"];
$id=$row["id"];
$prcoede=$row["pcode"];
mysql_close($con);
}
?>
<div class="order">
<table>
<tr>
<td><label>Product Name</label></td>
<td><label>Product Price </label></td>
<td><label>Quantity Left </label></td>
</tr>
<tr>
<td><input name="PNAME" type="text" id="pname" value="<?php echo #$name ?>" size="20" readonly="readonly" /></td>
<td><input name="PPRICE" id="PPRICE" type="text" value="<?php echo #$price ?>" readonly="readonly" /></td>
<td><input name="AQTY" type="text" value="<?php echo #$qty_left ?>" size="20" readonly="readonly"/></td>
<td><input name="id" type="hidden" value="<?php echo $id; ?>" readonly="readonly" /></td>
<td><input name="procode" type="hidden" value="<?php echo $prcoede; ?>" readonly="readonly" /></td>
<td><input name="less" type="hidden"/></td>
</tr>
<tr><td></td></tr><tr><td></td></tr>
<tr><td></td></tr><tr><td></td></tr>
<tr class="space">
<td><label>Reciept Code</label></td>
<td><label>Quantity</label></td>
<td><label>Amount</label></td>
</tr>
<tr>
<td><input name="CODE" type="text" id="CODE" value="<?php echo $_SESSION['SESS_MEMBER_ID']; ?>" size="20" readonly="readonly"/></td>
-------> <td><input name="QTY" id="QTY" type="text" onkeyup="multiply()" onkeypress="return checkIt(event)" size="20" /></td>
<?php
$con = mysql_connect("localhost","root", "");
mysql_select_db("inventory");
$qty = $_POST['QTY'];
$a = "SELECT pleft from productlist WHERE pdesc = $qty ";
$results = mysql_query($a);
if ($qty > $a)
{
echo '<script type="text/javascript">';
echo 'alert("WARNING: Product not enough ");';
echo 'window.location.href = "auto.php";';
echo '</script>';
}
?>
<td><input name="TOTAL" id="TOTAL" type="text" size="20" readonly="readonly"/></td>
</tr>
<tr>
<td>
<div class="cart">
<input name="submit" type="submit" value="Add to Cart" id="xx" style="cursor:pointer; margin-left: 230px; margin-top: 20px;" />
</div>
</td>
</tr>
</table>
</div>
</form>
</form>
<form action="addorder.php?id=<?php echo $_GET['id'] ? $_GET['id'] : 0?>" method="post" name="abc">
BEER
Pizza
Egg Pie
Ice Tea
Combo
<td><input name="QTY" id="QTY" type="text" onkeyup="multiply()" onkeypress="return checkIt(event)" size="20" /></td>
<?php
if( !empty($_POST['QTY'])){
$con = mysql_connect("localhost","root", "");
mysql_select_db("inventory");
$qty = $_POST['QTY'];
$a = "SELECT pleft from productlist WHERE pdesc = $qty wherer productlist.id = ".$_GET['id'];
$results = mysql_query($a);
$row = mysql_fetch_assoc( $results);
if ($qty > $row[0]['pleft'])
{
echo '<script type="text/javascript">';
echo 'alert("WARNING: Product not enough ");';
echo 'window.location.reload()';
echo '</script>';
}else{
/**
Do what ever you want
*/
}
}
?>
check your productlist table has a column named id