I have a dynamic field where user can add as many rows as it wants. There are 3 checkboxs in each row. after user added as much as they wanted they click a button and get sent to FgProcess.php.
FgTable.php
<script>
var FgRow = 0;
function addfg()
{
FgRow++;
var html = "<tr>";
html += "<td><input type='text' name='SKUDescription[]' class ='form-control'/></td>";
html += "<td><input type='text' name='LotNumber[]' class ='form-control'/></td>";
html += "<td><input type='text' name='BBD[]' class ='form-control'/></td>";
html += "<td><input type='text' name='Size[]' class ='form-control'/></td>";
html += "<td><input type='text' name='SizeUOM[]' class ='form-control'/></td>";
html += "<td><input type='text' name='UnitsPerCase[]' class ='form-control'/></td>";
html += "<td><input type='text' name='CaseCount[]' class ='form-control'/></td>";
html += "<td><input type='text' name='CasePartial[]' class ='form-control'/></td>";
html += "<td><input type='text' name='UnitsDamaged[]' class ='form-control'/></td>";
html += "<td><input type='text' name='UnitsLeak[]' class ='form-control'/></td>";
html += "<td><input type='text' name='UnitsSample[]' class ='form-control'/></td>";
html += "<td><input type='text' name='UnitTotal[]' class ='form-control'/></td>";
html += "<td><input type='text' name='NetWeightTotal[]' class ='form-control'/></td>";
html += "<td><input type='text' name='ProductTemperature[]' class ='form-control'/></td>";
html += "<td><input type='checkbox' name='Organic[]' value='1' class='custom-checkbox'/></td>";
html += "<td><input type='checkbox' name='OnHold[]' value='1' class='custom-checkbox'/></td>";
html += "<td><input type='checkbox' name='WIP[]' value='1' class='custom-checkbox'/></td>";
html += "<td style='width: 2%'></td>";
html += "</tr>";
document.getElementById("finishedgoods_row").insertRow().innerHTML = html;
}
My Problem is that I get an offset error when user does not check the checkboxes. I know the reason is that if not checked the value is NULL.
I tried fixing this issue by adding hidden input for each of my checkboxes but then I got extra checkbox values sometimes!
FgProcess.php
if (isset($_POST['fgAdd']))
{
$WOID = $_POST['id'];
print_r($_POST);
for ($i = 0; $i < count($_POST["SKUDescription"]); $i++)
{
$SKUDescription = $_POST["SKUDescription"][$i];
$LotNumber = $_POST["LotNumber"][$i];
$BBD = $_POST["BBD"][$i];
$Size = $_POST["Size"][$i];
$SizeUOM = $_POST["SizeUOM"][$i];
$UnitsPerCase = $_POST["UnitsPerCase"][$i];
$CaseCount = $_POST["CaseCount"][$i];
$CasePartial = $_POST["CasePartial"][$i];
$UnitsDamaged = $_POST["UnitsDamaged"][$i];
$UnitsLeak = $_POST["UnitsLeak"][$i];
$UnitsSample = $_POST["UnitsSample"][$i];
$UnitTotal = $_POST["UnitTotal"][$i];
$NetWeightTotal = $_POST["NetWeightTotal"][$i];
$ProductTemperature = $_POST["ProductTemperature"][$i];
if ($_POST["Organic"][$i]==null){$Organic = '0';}else{$Organic = $_POST["Organic"][$i];}
if ($_POST["OnHold"][$i]==null){$OnHold = '0';}else{$OnHold = $_POST["OnHold"][$i];}
if ($_POST["WIP"][$i]==null){$WIP = '0';}else{$WIP = $_POST["WIP"][$i];}
//after this part insert into mysql and check errors and etc
}
//the rest of if statement
I tried checking for NULL but it didn't work. Each of these lines gave me a Undefined offset: 1 error.
if ($_POST["Organic"][$i]==null){$Organic = '0';}else{$Organic = $_POST["Organic"][$i];}
if ($_POST["OnHold"][$i]==null){$OnHold = '0';}else{$OnHold = $_POST["OnHold"][$i];}
if ($_POST["WIP"][$i]==null){$WIP = '0';}else{$WIP = $_POST["WIP"][$i];}
for example when i tried to add two rows, with the first row checkboxes being checked and then second row not being checked, this is what i get when print_r($_POST)
[Organic] => Array ( [0] => 1 ) [OnHold] => Array ( [0] => 1 ) [WIP] => Array ( [0] => 1 )
I know the problem is from checkboxes since i had no problem when the 3 checkboxes were text.
I would appreciate any help.
The issue is that (for each category) all your checkbox inputs have the same name, so only one of them is being sent to the server. To pass an array of checkbox values to the server, you should include the row index inside the brackets in Organic[] and the others.
So, when adding rows, keep track of the row's index, and reflect the in the names of the checkbox inputs. Slightly modified your code to reflect what I mean:
var FgRow = 0;
function addfg()
{
FgRow++;
var html = "<tr>";
html += "<td><input type='checkbox' name=`Organic[${FgRow}]` value='1' class='custom-checkbox'/></td>";
html += "<td><input type='checkbox' name=`OnHold[${FgRow}]` value='1' class='custom-checkbox'/></td>";
html += "<td><input type='checkbox' name=`WIP[${FgRow}]` value='1' class='custom-checkbox'/></td>";
html += "<td style='width: 2%'></td>";
html += "</tr>";
document.getElementById("finishedgoods_row").insertRow().innerHTML = html;
}
Related
in a php page, I have the following Javascript code:
<script>
let items = 0;
function addItem() {
items++;
let html = "<tr>";
html += "<td>" + items + "</td>";
html += "<td><input type='text' class='form-control' name='itemName[]'></td>";
html += "<td><input type='text' class='form-control' name='itemCompany[]'></td>";
html += "<td style='width:60px;'><input type='text' class='form-control itemQuantity' id='itemQuantity' name='itemQuantity[]'></td>";
html += "<td style='width:100px;'><input type='text' class='form-control itemPrice' id='itemPrice' name='itemPrice[]'></td>";
html += "<td style='width:100px;'><input type='text' class='form-control' id='itemAdvance' name='itemAdvance[]'></td>";
html += "<td style='width:100px;'><input type='text' class='form-control' id='itemDiscount' name='itemDiscount[]'></td>";
html += "<td style='width:100px;'><input type='text' class='form-control' name='itemRounding[]'></td>";
html += "<td><input type='text' class='form-control' name='itemNote[]'></td>";
html += "<td style='text-align:center'><button type='button' class='btn btn-danger' onclick='deleteRow(this);'>Delete</button></td>";
html += "<td><input type='text' readonly name='result' id='result'></td>";
html += "</tr>";
let row = document.getElementById("tbody").insertRow();
row.innerHTML = html;
}
function deleteRow(button) {
items--
button.parentElement.parentElement.remove();
}
</script>
I used the querySelectotAll and the For loop
to do the calculation I used this script but it doesn't work. How can I make the calculation appear in each row?
<script>
let elements = document.querySelectorAll(".inputValue").value;
function myFunction() {
for (i = 0; i < elements.lenght; i++) {
let totalPrice = price * quantity;
}
document.getElementById("result").innerHTML = totalPrice.toFixed(2);
}
</script>
I tried to loop a math operation
I want to add the dynamic dropdown list to each row when I click the add button and I have written this below code to achieve this and values are coming but not like dropdown list
example code is :-
var ddlInputParameters = $("<select class='input-small' id='ddltype'></select>");
$.each(data.d, function (key, value) {
if (value.Type == "inputparameters") {
//var option = $("<option />");
var option = $("<option></option>");
option.html(value.TypeData);
option.val(key);
ddlInputParameters.append(option);
}
});
//Initially When the page is loaded I'm checking the length and adding the records to jquery table
if ($("#EntryParametersTableDataID,#EntryParametersTableRightDataID tbody").children().children().length == 1) {
var trd = "";
trd += "<tr>";
//trd += "<td hidden='hidden'><button class = 'btn btn-danger btn-sm'> delete </button></td>";
trd += "<td>";
//trd += "<select class='input-small' id='ddltype'><option value='1'>Pts</option><option value='2'>%</option></select>";
trd += ddlInputParameters.html(); //Here I want to add(bind)that dropdown list
trd += "</td>";
trd += "<td>";
trd += "<select class='input-small' id='ddlexit'><option value='1'>None</option><option value='2'>Sq Off Leg</option><option value='3'>Sq Off Strategy</option><option value='4'>Partial Exit</option></select>";
trd += "</td>";
trd += "<td><input type='text'> </td>";
trd += "<td><input type='text'> </td>";
trd += "<td><input type='text'> </td>";
trd += "<td><input type='text'> </td>";
trd += "</tr>";
$("#EntryParametersTableRightDataID tbody").append(trd);
}
Output is coming like values not like dropdown list this :-
Suggest me where I did the mistake and how can I achieve this.
I'm very new to this jQuery logics.
Try using ddlInputParameters.outerHTML() instead of ddlInputParameters.html() in trd += like below.
trd += ddlInputParameters.outerHTML(); //Here I want to add(bind)that dropdown list
The outerHTML attribute of the Element DOM interface gets the serialized HTML fragment describing the element including its descendants. It can also be set to replace the element with nodes parsed from the given string.
The outerHTML attribute is not worked in my scenario and I have changed the existing logic like below and it's work well to me
var optionsdata = '';
$.each(data.d, function (key, value) {
if (value.Type == "inputparameters") {
optionsdata += "<option value="+key+">"+value.TypeData+"</option>";
});
var ddlInputParameters = "<select class='input-small' id='ddltypeauto'>" + optionsdata + "</select>";
And I have added this ddlInputParameters to <td> like this trd += ddlInputParameters;
On my page, I show a table of entries. At the end of the table is a "modify" button. When the button is clicked the row turns into a form for directly modifying the contents.
This code:
element.innerHTML = "<tr class='alt_col'>";
element.innerHTML += "<form action='/RIDT/includes/modify_codeplug.inc.php' method='POST' name='modify_form'>";
element.innerHTML += "<td><input type='text' name='fileName' value='" + fileName + "'></td>";
element.innerHTML += "<td><input type='text' name='location' value='" + loc + "'></td>";
element.innerHTML += "<td><input type='text' name='build' value='" + build + "'></td>";
element.innerHTML += "<td><input type='text' name='version' value='" + version + "'></td>";
element.innerHTML += "<td><select name='type' id ='selectType'>" + descOptions + "</select></td>";
element.innerHTML += "<td><input type='hidden' name='id' value='" + id + "'/><input type='submit' value='Submit'/></td>";
element.innerHTML += "</form>";
element.innerHTML += "</tr>";
var options = document.getElementById("selectType").options;
for (i = 0; i < options.length; i++)
{
if (options[i].text == desc)
{
options[i].selected=true;
}
}
Results in the form being created like this:
<form action="/RIDT/includes/modify_codeplug.inc.php" method="POST" name="modify_form"></form>
With all of the forms input elements coming after the closing element. Why is the form being closed early?
Thanks for the help everyone. I will research all the suggestions provided more deeply later. In the interest of saving time I did it a different way. Instead of submitting a form, the submit button calls another javascript function that picks out the input data from the DOM, then builds and submits a hidden form to my php script. It's not pretty, but it got the job done.
I didn't test this, but jQuery has the same problem if you try to insert an unclosed element into the DOM. The closing tag is added for you.
Try this instead:
//track the html as a single string var
var html = "<tr class='alt_col'>";
html += "<form action='/RIDT/includes/modify_codeplug.inc.php' method='POST' name='modify_form'>";
html += "<td><input type='text' name='fileName' value='" + fileName + "'></td>";
html += "<td><input type='text' name='location' value='" + loc + "'></td>";
html += "<td><input type='text' name='build' value='" + build + "'></td>";
html += "<td><input type='text' name='version' value='" + version + "'></td>";
html += "<td><select name='type' id ='selectType'>" + descOptions + "</select></td>";
html += "<td><input type='hidden' name='id' value='" + id + "'/><input type='submit' value='Submit'/></td>";
html += "</form>";
html += "</tr>";
// set the html string once
element.innerHTML = html;
I'm pretty new to JavaScript, so suppose I have the following function that I use to append a new row into a table. Could someone please give some suggestions how I would be able to get the value of the textarea boxes or check whether each checkbox is checked on the last row that I add to the table? I'm trying to use getElementByName() but a bit unsure on how to get the data on the specific row I want. The table is part of a jsp page. Thanks lots!!!
function generateNewRow(id){
var tr = "<tr>";
tr += "<td><input name='id' type='hidden' value='" + id + "' />";
tr += "<textarea name='a' style='width: 98%; height:40px'></textarea></td>";
tr += "<td>";
tr += "<input type='checkbox' name='b' value='" + id + "'/>B";
tr += "<input type='checkbox' name='c' value='" + id + "'/>C";
tr += "<input type='checkbox' name='d' value='" + id + "'/>D";
tr += "<input type='checkbox' name='e' value='" + id + "'/>E<br/>";
tr += "<input type='checkbox' name='f' value='" + id + "'/>F;
tr += "</td>";
tr += "<td><textarea name='g' style='width: 98%; height:40px'></textarea></td>";
tr += "</tr>";
$("#ProblemsGrid tbody").append(tr);
}
If you want to get the last row of the table you can use a selector like so:
$("#ProblemnsGris tbody tr:last");
For textarea and input values I would use find along with each:
$("#ProblemsGrid tr:last").find('input:checkbox').each(function(index, element){
var value = $(element).is(':checked');
alert(value);
});
$("#ProblemsGrid tr:last").find('textarea').each(function(index, element){
var value = $(element).val();
alert(value);
});
http://jsfiddle.net/Dqryf/
So I have been trying to write functions that combine multiple lines of html so when I call the JS function, that html is put on my webpage. Here is an example of one that I got working :
function buildproduct(prodName, prodID, prodDescription) {
var data = makeHeader()
data += "<TABLE style='width:100%' border=1 cellpadding=10>"
data += "<TR><TD rowspan=3 style='width:30%;text-align:center;vertical-"
data += "align:middle'>" + makeImage(prodID) + ""
data += "</TD>"
data += "<TD>" + makeName(prodName) + "</TD>"
data += "<TD style='text-align:right'>" + makeID(prodID) + "</TD>"
data += "</TR>"
data +="<TR><TD style='text-align:center' colspan=2>" + makeLinkbar(prodID) + ""
data += "</TD></TR>"
data += "<TR><TD colspan=2 >" + makeDescription(prodDescription) + ""
data += "</TD></TR>"
data += "</TABLE>"
data += makeFooter()
productarea.document.writeln(data)
productarea.document.close()
}
The above code I have got working. Here is the code that I cant seem to get to work right :
function makeLinkbar(prodID) {
var data = "<form name="_xclick" target="paypal" action=https://www.paypal.com method="post">"
data += "<input type="hidden" name="cmd" value="_cart">"
data += "<input type="hidden" name="business" value="nora-alice#paypal.com">"
data += "<input type="hidden" name="item_name" value="HTML book">"
data += "<input type="hidden" name="amount" value="24.99">"
data += "<input type="hidden" name="item_number" value="12345">"
data += "<input type="image" src=http://www.paypal.com/en_US/i/btn/sc-but-01.gif border="0" name="submit"alt="Make payments with PayPal - it's fast, free and secure!">"
data += "<input type="hidden" name="add" value="1">"
data += "</form>"
return(data)
}
Any ideas why I cant get this function to output the html properly? In fact, its not working at all. Thanks guys!
replace double quotes to single quotes only.
like this.
data += "<input type='hidden' name='cmd' value='_cart'>"
You have to escape the double quotes like below
var data = "<form name=\"_xclick\" target=\"paypal\" action=https://www.paypal.com method=\"post\">"
or change the double quotes into single
var data = "<form name='_xclick' target='paypal' action=https://www.paypal.com method='post'>"