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>
Related
I have created a form that has several fields. Among those fields are several weight fields. I have a ScaleInWeight, ScaleOutWeight, BOLWeight, ScaleWeight, and ScaleDiff. The first three are weights that are either entered or captured from the scale. The ScaleWeight is the difference between the ScaleInWeight and ScaleOutWeight, and the ScaleDiff is the difference between the BOLWeight and ScaleWeight. There are several other fields as well, but they don't matter for this, here is my form:
<form action="ScaleTimes.php" method="POST" enctype="multipart/form-data">
<table id="getApt" class="center">
<tr>
<td><input type="submit" class="OrderButton" name="findApt" value="Find"></td>
<td>Appointment Number<br><input type="text" name="AptNo" value="<?php if(isset($_POST['AptNo'])){ echo $_POST['AptNo'];} ?>" required autofocus="true"></td>
<td>Appointment Date<br><input type="date" name="AptDate" value="<?php if(isset($_POST['AptDate'])){ echo $_POST['AptDate'];} ?>"></td>
<td>Appointment Period<br>
<select name="AptPeriod">
<option value="">Select. . .</option>
<option value="3">6-8</option>
<option value="4">8-10</option>
<option value="5">10-12</option>
<option value="6">12-14</option>
<option value="7">14-16</option>
<option value="9">Open</option>
</select>
</td>
</tr>
<tr>
<td>Scale In Weight<br><input type="number" name="ScaleInWeight" value="<?php if(isset($_POST['ScaleInWeight'])){ echo $_POST['ScaleInWeight'];} ?>"></td>
<td>Scale In Date/Time<br><input type="datetime" name="ScaleInDateTime" value="<?php if(isset($_POST['ScaleInDateTime'])){ echo $_POST['ScaleInDateTime'];} ?>"></td>
<td>Scale In Weight<br><input type="number" name="ScaleOutWeight" value="<?php if(isset($_POST['ScaleOutWeight'])){ echo $_POST['ScaleOutWeight'];} ?>"></td>
<td>Scale Out Date/Time<br><input type="datetime" name="ScaleOutDateTime" value="<?php if(isset($_POST['ScaleOutDateTime'])){ echo $_POST['ScaleOutDateTime'];} ?>"></td>
</tr>
<tr>
<td>Customer<br><input type="text" name="Customer" value="<?php if(isset($_POST['Customer'])){ echo $_POST['Customer'];} ?>" autocomplete="on"></td>
<td>Carrier<br><input type="text" name="Carrier" value="<?php if(isset($_POST['Carrier'])){ echo $_POST['Carrier'];} ?>"></td>
<td>Driver<br><input type="text" name="Driver" value="<?php if(isset($_POST['Driver'])){ echo $_POST['Driver'];} ?>"></td>
<td>Weighed By<br>
<select name="WeighedBy">
<option value="">Select Name...</option>
<option value="Tia Rian">Tia Rian</option>
<option value="Bruce Tippy">Bruce Tippy</option>
</select>
</td>
</tr>
<tr>
<td>BOL Weight<br><input type="text" name="BOLWeight" value="<?php if(isset($_POST['BOLWeight'])){ echo $_POST['BOLWeight'];} ?>"></td>
<td>Scale Weight<br><input type="text" name="ScaleWeight" value="<?php if(isset($_POST['ScaleWeight'])){ echo $_POST['ScaleWeight'];} ?>" disabled></td>
<td>Scale Difference<br><input type="text" name="ScaleWeight" value="<?php if(isset($_POST['ScaleDiff'])){ echo $_POST['ScaleDiff'];} ?>" disabled></td>
</tr>
<tr>
<td>Truck Number<br><input type="text" name="TruckNo" value="<?php if(isset($_POST['TruckNo'])){ echo $_POST['TruckNo'];} ?>"></td>
<td>Trailer Number<br><input type="text" name="TrailerNo" value="<?php if(isset($_POST['TrailerNo'])){ echo $_POST['TrailerNo'];} ?>"></td>
<td>BOL Number<br><input type="text" name="BOLNo" value="<?php if(isset($_POST['BOLNo'])){ echo $_POST['BOLNo'];} ?>"></td>
<td>AX Purchase Order<br><input type="text" name="AxPurchaseOrder" value="<?php if(isset($_POST['AxPurchaseOrder'])){ echo $_POST['AxPurchaseOrder'];} ?>"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" class="OrderButton" name="submit" value="Submit"></td>
<td><input type="submit" class="OrderButton" name="reset" value="Reset"></td>
<td>Dashboard</td>
</tr>
</table>
</form>
What I am trying to figure out is how to update the ScaleWeight and ScaleDiff as the other weights are entered.
For example, when the ScaleInWeight is captured nothing happens.
When the ScaleOutWeight is then also captured then there should be a calculation that will give me the ScaleWeight (absolute value only)
Then when the BOLWeight is added to the form the ScaleDeff should also be calculated (absolute value only).
So if the ScaleInWeight is captured as 31920 and the ScaleOutWeight is captured as 74660 then the ScaleWeight should calculate to 42740.
When the BOLWeight is entered as 42731, then the ScaleDeff should calculate to 9.
EDIT
I have made a change to the form to add a function called UpdateInfo like so:
<form action="ScaleTimes.php" method="POST" enctype="multipart/form-data" name="ScaleTime">
<table id="getApt" class="center">
<tr>
<td><input type="submit" class="OrderButton" name="findApt" value="Find"></td>
<td>Appointment Number<br><input type="text" name="AptNo" value="<?php if(isset($_POST['AptNo'])){ echo $_POST['AptNo'];} ?>" required autofocus="true"></td>
<td>Appointment Date<br><input type="date" name="AptDate" value="<?php if(isset($_POST['AptDate'])){ echo $_POST['AptDate'];} ?>"></td>
<td>Appointment Period<br>
<select name="AptPeriod">
<option value="">Select. . .</option>
<option value="3">6-8</option>
<option value="4">8-10</option>
<option value="5">10-12</option>
<option value="6">12-14</option>
<option value="7">14-16</option>
<option value="9">Open</option>
</select>
</td>
</tr>
<tr>
<td>Scale In Weight<br><input type="number" name="ScaleInWeight" value="<?php if(isset($_POST['ScaleInWeight'])){ echo $_POST['ScaleInWeight'];} ?>" onchange="UpdateInfo()"></td>
<td>Scale In Date/Time<br><input type="datetime" name="ScaleInDateTime" value="<?php if(isset($_POST['ScaleInDateTime'])){ echo $_POST['ScaleInDateTime'];} ?>"></td>
<td>Scale In Weight<br><input type="number" name="ScaleOutWeight" value="<?php if(isset($_POST['ScaleOutWeight'])){ echo $_POST['ScaleOutWeight'];} ?>" onchange="UpdateInfo()"></td>
<td>Scale Out Date/Time<br><input type="datetime" name="ScaleOutDateTime" value="<?php if(isset($_POST['ScaleOutDateTime'])){ echo $_POST['ScaleOutDateTime'];} ?>"></td>
</tr>
<tr>
<td>Customer<br><input type="text" name="Customer" value="<?php if(isset($_POST['Customer'])){ echo $_POST['Customer'];} ?>" autocomplete="on"></td>
<td>Carrier<br><input type="text" name="Carrier" value="<?php if(isset($_POST['Carrier'])){ echo $_POST['Carrier'];} ?>"></td>
<td>Driver<br><input type="text" name="Driver" value="<?php if(isset($_POST['Driver'])){ echo $_POST['Driver'];} ?>"></td>
<td>Weighed By<br>
<select name="WeighedBy">
<option value="">Select Name...</option>
<option value="Tia Rian">Tia Rian</option>
<option value="Bruce Tippy">Bruce Tippy</option>
</select>
</td>
</tr>
<tr>
<td>BOL Weight<br><input type="text" name="BOLWeight" value="<?php if(isset($_POST['BOLWeight'])){ echo $_POST['BOLWeight'];} ?>" onchange="UpdateInfo()"></td>
<td>Scale Weight<br><input type="text" name="ScaleWeight" value="<?php if(isset($_POST['ScaleWeight'])){ echo $_POST['ScaleWeight'];} ?>" disabled onchange="UpdateInfo()"></td>
<td>Scale Difference<br><input type="text" name="ScaleWeight" value="<?php if(isset($_POST['ScaleDiff'])){ echo $_POST['ScaleDiff'];} ?>" disabled></td>
</tr>
<tr>
<td>Truck Number<br><input type="text" name="TruckNo" value="<?php if(isset($_POST['TruckNo'])){ echo $_POST['TruckNo'];} ?>"></td>
<td>Trailer Number<br><input type="text" name="TrailerNo" value="<?php if(isset($_POST['TrailerNo'])){ echo $_POST['TrailerNo'];} ?>"></td>
<td>BOL Number<br><input type="text" name="BOLNo" value="<?php if(isset($_POST['BOLNo'])){ echo $_POST['BOLNo'];} ?>"></td>
<td>AX Purchase Order<br><input type="text" name="AxPurchaseOrder" value="<?php if(isset($_POST['AxPurchaseOrder'])){ echo $_POST['AxPurchaseOrder'];} ?>"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" class="OrderButton" name="submit" value="Submit"></td>
<td><input type="submit" class="OrderButton" name="reset" value="Reset"></td>
<td>Dashboard</td>
</tr>
</table>
</form>
And then added the function like this:
<script type="text/javascript">
$(document).ready(function () {
$('#ScaleWeight').change(UpdateInfo);
$('#ScaleDiff').change(UpdateInfo);
});
function UpdateInfo() {
var ScaleInWeight = $('#ScaleInWeight').val();
var ScaleOutWeight = $('#ScaleOutWeight').val();
var BOLWeight = $('#BOLWeight').val();
var calScaleWeight = ScaleInWeight - ScaleOutWeight;
var calScaleDiff = BOLWeight - calScaleWeight;
$('#ScaleWeight').val(calScaleWeight);
$('#ScaleDiff').val(calScaleDiff);
}
</script>
When I test this out though nothing happens. What am I missing? Also, how would I make that so I get the absolute value so it is alway spositive?
With #ADyson 's help, I was able to get this figured out. Here is what I did:
The form (yes this could be better with a css class instead of several change events declared, but I haven't done that yet):
<form action="ScaleTimes.php" method="POST" enctype="multipart/form-data" name="ScaleTime">
<table id="getApt" class="center">
<tr>
<td><input type="submit" class="OrderButton" name="findApt" value="Find"></td>
<td>Appointment Number<br><input type="text" name="AptNo" value="<?php if(isset($_POST['AptNo'])){ echo $_POST['AptNo'];} ?>" required autofocus="true"></td>
<td>Appointment Date<br><input type="date" name="AptDate" value="<?php if(isset($_POST['AptDate'])){ echo $_POST['AptDate'];} ?>"></td>
<td>Appointment Period<br>
<select name="AptPeriod">
<option value="">Select. . .</option>
<option value="3">6-8</option>
<option value="4">8-10</option>
<option value="5">10-12</option>
<option value="6">12-14</option>
<option value="7">14-16</option>
<option value="9">Open</option>
</select>
</td>
</tr>
<tr>
<td>Scale In Weight<br><input type="number" id="ScaleInWeight" name="ScaleInWeight" value="<?php if(isset($_POST['ScaleInWeight'])){ echo $_POST['ScaleInWeight'];} ?>" onchange="UpdateInfo()"></td>
<td>Scale In Date/Time<br><input type="datetime" name="ScaleInDateTime" value="<?php if(isset($_POST['ScaleInDateTime'])){ echo $_POST['ScaleInDateTime'];} ?>"></td>
<td>Scale In Weight<br><input type="number" id="ScaleOutWeight" name="ScaleOutWeight" value="<?php if(isset($_POST['ScaleOutWeight'])){ echo $_POST['ScaleOutWeight'];} ?>" onchange="UpdateInfo()"></td>
<td>Scale Out Date/Time<br><input type="datetime" name="ScaleOutDateTime" value="<?php if(isset($_POST['ScaleOutDateTime'])){ echo $_POST['ScaleOutDateTime'];} ?>"></td>
</tr>
<tr>
<td>Customer<br><input type="text" name="Customer" value="<?php if(isset($_POST['Customer'])){ echo $_POST['Customer'];} ?>" autocomplete="on"></td>
<td>Carrier<br><input type="text" name="Carrier" value="<?php if(isset($_POST['Carrier'])){ echo $_POST['Carrier'];} ?>"></td>
<td>Driver<br><input type="text" name="Driver" value="<?php if(isset($_POST['Driver'])){ echo $_POST['Driver'];} ?>"></td>
<td>Weighed By<br>
<select name="WeighedBy">
<option value="">Select Name...</option>
<option value="Tia Rian">Tia Rian</option>
<option value="Bruce Tippy">Bruce Tippy</option>
</select>
</td>
</tr>
<tr>
<td>BOL Weight<br><input type="text" id="BOLWeight" name="BOLWeight" value="<?php if(isset($_POST['BOLWeight'])){ echo $_POST['BOLWeight'];} ?>" onchange="UpdateInfo()"></td>
<td>Scale Weight<br><input type="text" id="ScaleWeight" name="ScaleWeight" value="<?php if(isset($_POST['ScaleWeight'])){ echo $_POST['ScaleWeight'];} ?>" disabled onchange="UpdateInfo()"></td>
<td>Scale Difference<br><input type="text" id="ScaleDiff" name="ScaleDiff" value="<?php if(isset($_POST['ScaleDiff'])){ echo $_POST['ScaleDiff'];} ?>" disabled></td>
</tr>
<tr>
<td>Truck Number<br><input type="text" name="TruckNo" value="<?php if(isset($_POST['TruckNo'])){ echo $_POST['TruckNo'];} ?>"></td>
<td>Trailer Number<br><input type="text" name="TrailerNo" value="<?php if(isset($_POST['TrailerNo'])){ echo $_POST['TrailerNo'];} ?>"></td>
<td>BOL Number<br><input type="text" name="BOLNo" value="<?php if(isset($_POST['BOLNo'])){ echo $_POST['BOLNo'];} ?>"></td>
<td>AX Purchase Order<br><input type="text" name="AxPurchaseOrder" value="<?php if(isset($_POST['AxPurchaseOrder'])){ echo $_POST['AxPurchaseOrder'];} ?>"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" class="OrderButton" name="submit" value="Submit"></td>
<td><input type="submit" class="OrderButton" name="reset" value="Reset"></td>
<td>Dashboard</td>
</tr>
</table>
</form>
Then there is the JavaScript:
<script type="text/javascript">
$(document).ready(function () {
$('#ScaleWeight').change(UpdateInfo);
$('#ScaleDiff').change(UpdateInfo);
});
function UpdateInfo() {
var ScaleInWeight = $('#ScaleInWeight').val();
var ScaleOutWeight = $('#ScaleOutWeight').val();
var BOLWeight = $('#BOLWeight').val();
var calScaleWeight = ScaleInWeight - ScaleOutWeight;
var calScaleDiff = BOLWeight - Math.abs(calScaleWeight);
$('#ScaleWeight').val(Math.abs(calScaleWeight));
$('#ScaleDiff').val(Math.abs(calScaleDiff));
}
</script>
Because I only need the differences and I don't care if they are negative I am using the absolute value in my calculations.
<table class="table table-bordered table-striped table-xxs" id="tb3" name="tb3">
<thead>
<tr>
<th></th>
<th>Product Code</th>
<th>Product Name</th>
<th>Qty</th>
<th>Rate</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr >
<td><a href='javascript:void(0);' class='remove3'><span class='glyphicon glyphicon-remove'></span></a></td>
<td>
<input style="width:80px" type="text" id="Product_Code" class="form-control input-xs Product_Code " onkeyup="fetch()" value="<?php echo $r->Product_Code; ?>" name="Product_Code[]" required></td>
<td ><input style="width:300px" type="text" id="Product_Name" class="form-control input-xs" value="<?php echo $r->Prdtname; ?>" name = "Prdtname[]" value=""> </td>
<td><input style="width:80px" type="text" id="Qty" class="form-control input-xs" value="<?php echo $r->Qty; ?>" name="Qty[]" required></td>
<td><input style="width:100px" type="text" id="Rate" class="form-control input-xs" value="<?php echo $r->rate; ?>" name="rate[]" required></td>
<td><input style="width:150px" type="text" id="Value" class="form-control input-xs" value="<?php echo $r->amount; ?>" name="amount[]" ></td>
<th><span class="glyphicon glyphicon-plus"></span></th>
</tr>
</tbody>
</table>
this table code....
<script>
$(document).ready(function (){
$('#addMore3').on('click', function() {
var data = $("#tb3 tr:eq(1)").clone(true).appendTo("#tb3");
data.find("input").val('');
});
$(document).on('click', '.remove3', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
});
</script>
this is javascript code for creating table by clicking "+" event.
My prblm is how to fetch data from database display in this automatic table..
You should be able to do this using ajax call.
As you are using codeigniter -
View : Write your ajax and table generation code.
Controller: get the ajax request and pass it to modal.
Modal: get the data from database.
you should return array of object to view and then just parse the data and generate table.
If you dont want to write the table code and ajax then you can use datatable plugin.
I have a table and it has checkbox what I want is when more than two checkboxes are selected my button should be visible and vice versa
JavaScript Code:
$(document).ready(function() {
if ($("input:checkbox:checked").length > 1) {
$("#checkerButton").show();
} else {
$("#checkerButton").hide();
}
});
The .PHP File:
<div>
<form action="" method="POST" id="checkerDeleter">
<input type="submit" value="Delete Selected" class="btn btn-danger" id="checkerButton" />
</form>
</div>
<table class="table table-hover table-responsive">
<thead>
<tr>
<td>Check</td>
<td>Name</td>
<td>Description</td>
<td>Price</td>
<td>Discount</td>
<td>Quantity</td>
<!--<td>Category</td>-->
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<?php while($row = $resultallproducts->fetch_assoc()) { ?>
<form action="" method="POST">
<tr>
<td><input type="checkbox" name="deleter[]" value="<?php echo $row['product_id']; ?>" /></td>
<td class="hide"><input type="text" name="id" value="<?php echo $row['product_id']; ?>" /></td>
<td><input type="text" name="name" value="<?php echo $row['product_name']; ?>" /></td>
<td><textarea name="desc"><?php echo $row['product_desc'] ?></textarea></td>
<td><input type="text" name="price" value="<?php echo $row['product_price']; ?>" /></td>
<td><input type="text" name="discount" value="<?php echo $row['product_discount']; ?>" /></td>
<td><input type="text" name="quantity" value="<?php echo $row['product_quantity']; ?>" /></td>
<td><input type="submit" name="update" class="btn btn-primary btn-sm" value="Update" /></td>
<td><input type="submit" name="delete" class="btn btn-danger btn-sm" value="Delete" /></td>
</tr>
</form>
<?php } ?>
</tbody>
</table>
</div>
first it is disabled but when I click on two checkboxes nothing happens :\
Use change event to check if 2 or more checkbox are checked
$(document).ready(function()
{
if ($("input:checkbox:checked").length > 1)
{
$("#checkerButton").show();
}
else
{
$("#checkerButton").hide();
}
$("input:checkbox").on("change",function(){
if($("input:checkbox:checked").length > 1){
$("#checkerButton").show();
}else{
$("#checkerButton").hide();
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form action="" method="POST" id="checkerDeleter">
<input type="submit" value="Delete Selected" class="btn btn-danger" id="checkerButton"/>
</form>
</div>
<table class="table table-hover table-responsive">
<thead>
<tr>
<td>Check</td>
<td>Name</td>
<td>Description</td>
<td>Price</td>
<td>Discount</td>
<td>Quantity</td>
<!--<td>Category</td>-->
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<form action="" method="POST">
<tr>
<td><input type="checkbox" name="deleter[]" value="<?php echo $row['product_id']; ?>"/></td>
<td class="hide"><input type="text" name="id" value="<?php echo $row['product_id']; ?>"/></td>
<td><input type="text" name="name" value="<?php echo $row['product_name']; ?>"/></td>
<td><textarea name="desc"><?php echo $row['product_desc'] ?></textarea></td>
<td><input type="text" name="price" value="<?php echo $row['product_price']; ?>"/></td>
<td><input type="text" name="discount" value="<?php echo $row['product_discount']; ?>"/></td>
<td><input type="text" name="quantity" value="<?php echo $row['product_quantity']; ?>"/></td>
<td><input type="submit" name="update" class="btn btn-primary btn-sm" value="Update"/></td>
<td><input type="submit" name="delete" class="btn btn-danger btn-sm" value="Delete"/></td>
</tr>
<tr>
<td><input type="checkbox" name="deleter[]" value="<?php echo $row['product_id']; ?>"/></td>
<td class="hide"><input type="text" name="id" value="<?php echo $row['product_id']; ?>"/></td>
<td><input type="text" name="name" value="<?php echo $row['product_name']; ?>"/></td>
<td><textarea name="desc"><?php echo $row['product_desc'] ?></textarea></td>
<td><input type="text" name="price" value="<?php echo $row['product_price']; ?>"/></td>
<td><input type="text" name="discount" value="<?php echo $row['product_discount']; ?>"/></td>
<td><input type="text" name="quantity" value="<?php echo $row['product_quantity']; ?>"/></td>
<td><input type="submit" name="update" class="btn btn-primary btn-sm" value="Update"/></td>
<td><input type="submit" name="delete" class="btn btn-danger btn-sm" value="Delete"/></td>
</tr>
</form>
</tbody>
</table>
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
I am trying to assign textbox a value on button click. I am assigning the value to previous textbox of button.
I used
var classic = window.Event.target.class;
alert(classic);
but this gives error undefined.
How can I identify which button clicked either by class name or id or some other way.
jQuery(document).ready(function() {
var formfield;
var classic = window.Event.target.class;
/* user clicks button on custom field, runs below code that opens new window */
jQuery(classic).click(function() {
formfield = jQuery(this).prev('input'); //The input field that will hold the uploaded file url
tb_show('','media-upload.php?TB_iframe=true');
return false;
});
//adding my custom function with Thick box close function tb_close() .
window.old_tb_remove = window.tb_remove;
window.tb_remove = function() {
window.old_tb_remove(); // calls the tb_remove() of the Thickbox plugin
formfield=null;
};
// user inserts file into post. only run custom if user started process using the above process
// window.send_to_editor(html) is how wp would normally handle the received data
window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function(html){
if (formfield) {
fileurl = jQuery('img',html).attr('src');
jQuery(formfield).val(fileurl);
tb_remove();
} else {
window.original_send_to_editor(html);
}
};
});
<form method="post" action="options.php">
<?php settings_fields( 'Option-Man-settings-group' ); ?>
<?php do_settings_sections( 'Option-Man-settings-group' ); ?>
<div class="frame">
<table class="form-table">
<tr valign="top">
<th class="label">Logo URL:</th>
<td><input type="text" name="logo-setting" size="45" value="<?php echo esc_attr( get_option('logo-setting') ); ?>" /></td>
<td><input name="op" class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Header:</th>
<td><input type="text" name="main-header" size="45" value="<?php echo esc_attr( get_option('main-header') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Carousel-url:</th>
<td><input type="text" name="carousel-image" size="45" value="<?php echo esc_attr( get_option('carousel-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Message:</th>
<td><input type="text" name="message-short" size="45" value="<?php echo esc_attr( get_option('message-short') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Question header:</th>
<td><input type="text" name="question-cur" size="45" value="<?php echo esc_attr( get_option('question-cur') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Happy Clients Post Image:</th>
<td><input type="text" name="happy-image" size="45" value="<?php echo esc_attr( get_option('happy-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Happy Clients Post Header:</th>
<td><input type="text" name="happy-header" size="45" value="<?php echo esc_attr( get_option('happy-header') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Happy Clients Post Text:</th>
<td><input type="text" name="happy-text" size="45" value="<?php echo esc_attr( get_option('happy-text') ); ?>" /></td>
</tr>
</tr>
<tr valign="top">
<th scope="row" class="label">Solution Builder Post Image:</th>
<td><input type="text" name="builder-image" size="45" value="<?php echo esc_attr( get_option('builder-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Solution Builder Post Header:</th>
<td><input type="text" name="builder-header" size="45" value="<?php echo esc_attr( get_option('builder-header') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Solution Builder Post Text:</th>
<td><input type="text" name="builder-text" size="45" value="<?php echo esc_attr( get_option('builder-text') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Agile Process Post Image:</th>
<td><input type="text" name="agile-image" size="45" value="<?php echo esc_attr( get_option('agile-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Agile Process Post Header:</th>
<td><input type="text" name="agile-header" size="45" value="<?php echo esc_attr( get_option('agile-header') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Agile Process Post Text:</th>
<td><input type="text" name="agile-text" size="45" value="<?php echo esc_attr( get_option('agile-text') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Honesty Transparency Post Image:</th>
<td><input type="text" name="honesty-image" size="45" value="<?php echo esc_attr( get_option('honesty-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Honesty Transparency Post Header:</th>
<td><input type="text" name="honesty-header" size="45" value="<?php echo esc_attr( get_option('honesty-header') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Honesty Transparency Post Text:</th>
<td><input type="text" name="honesty-text" size="45" value="<?php echo esc_attr( get_option('honesty-text') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Medtegra Image:</th>
<td><input type="text" name="Client1-image" size="45" value="<?php echo esc_attr( get_option('Client1-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">HDFC Image:</th>
<td><input type="text" name="Client2-image" size="45" value="<?php echo esc_attr( get_option('Client2-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">iitjobs Image:</th>
<td><input type="text" name="Client3-image" size="45" value="<?php echo esc_attr( get_option('Client3-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">ProductiveTeams.com:</th>
<td><input type="text" name="Client4-image" size="45" value="<?php echo esc_attr( get_option('Client4-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">JFYS Image:</th>
<td><input type="text" name="Client5-image" size="45" value="<?php echo esc_attr( get_option('Client5-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
</tr>
<tr valign="top">
<th scope="row" class="label">Clients Message:</th>
<td><input type="text" name="Client-message" size="45" value="<?php echo esc_attr( get_option('Client-message') ); ?>" /></td>
</tr>
</tr>
</tr>
<tr valign="top">
<th scope="row" class="label">Google+:</th>
<td><input type="text" name="google" size="45" value="<?php echo esc_attr( get_option('google') ); ?>" /></td>
</tr>
</tr>
</tr>
<tr valign="top">
<th scope="row" class="label">Twitter:</th>
<td><input type="text" name="twitter" size="45" value="<?php echo esc_attr( get_option('twitter') ); ?>" /></td>
</tr>
</tr>
</tr>
<tr valign="top">
<th scope="row" class="label">Facebook:</th>
<td><input type="text" name="facebook" size="45" value="<?php echo esc_attr( get_option('facebook') ); ?>" /></td>
</tr>
</tr>
</tr>
<tr valign="top">
<th scope="row" class="label">Linkedin:</th>
<td><input type="text" name="linkedin" size="45" value="<?php echo esc_attr( get_option('linkedin') ); ?>" /></td>
</tr>
</table>
</div>
<?php submit_button(); ?>
</form>
I believe this is what you want.
$('.form-table').on('click', 'button, input[type="button"]', function () {
// Get the previous input
var input = $(this).closest('td').prev('td').find('input');
// Get this button class
alert($(this).attr('class'));
// Get this button id
alert($(this).attr('id'));
// Your code here
tb_show('', 'media-upload.php?TB_iframe=true');
return false;
});
Demo: https://jsfiddle.net/tusharj/o59eoomx/2/