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;
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 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;
}
I have a table with feeSetting id.It contain dynamic data , I can add and remove remove rows to table. I generated ids dynamically that work fine until user remove a rows and add again new row it override the unique id of last row. I want table to generate unique id with dynamic add and remove functionality . My code for adding row is as follow.
<tablen id="feeSetting ">
<tbody>
</tbody>
</table>
<script>
function AddRow() {
debugger;
var index = 0;
if ($("#feeSetting tbody tr").length > 0) {
index = $("#feeSetting tbody tr").length;
}
$("#feeSetting tbody").append("<tr class='gradeX'>"
+ "<td class='col-md-3'><input type='text' value='' class='form-control validate[required,custom[number]] text-input txtFromDay' id='eFromDay'/></td>"
+ "<td class='col-md-3'><input type='text' class='form-control validate[required,custom[number],min[1]] text-input txtValue' value='' id='eValue-" + index + "'/></td>"
+ "<td class='col-md-4'>"
+ "<div id='loadTypes-" + index + "' class='typeValidation'></div></td>"
+ "<td class='col-md-2'><input type='button' class='btn btn-danger btn-sm' value=' Remove '/></td>"
+ "</tr>");
renderPartialInDiv('#Url.Action("GetValidationTypeDropDown", "FeeFineSetting")?strDDName=eValidationTypeList-' + index + '&intDDID=0&intValidationID=1', '#loadTypes-' + index);
$('#eValidationTypeList-'+index).select2();
};
</script>
Try using one global variable which will increment its value on addition of each new row, see below code
<tablen id="feeSetting ">
<tbody>
</tbody>
</table>
<script>
//keep this variable outside function and use it as global variable.
var index = 0;
function AddRow() {
debugger;
index++;
$("#feeSetting tbody").append("<tr class='gradeX'>"
+ "<td class='col-md-3'><input type='text' value='' class='form-control validate[required,custom[number]] text-input txtFromDay' id='eFromDay'/></td>"
+ "<td class='col-md-3'><input type='text' class='form-control validate[required,custom[number],min[1]] text-input txtValue' value='' id='eValue-" + index + "'/></td>"
+ "<td class='col-md-4'>"
+ "<div id='loadTypes-" + index + "' class='typeValidation'></div></td>"
+ "<td class='col-md-2'><input type='button' class='btn btn-danger btn-sm' value=' Remove '/></td>"
+ "</tr>");
renderPartialInDiv('#Url.Action("GetValidationTypeDropDown", "FeeFineSetting")?strDDName=eValidationTypeList-' + index + '&intDDID=0&intValidationID=1', '#loadTypes-' + index);
$('#eValidationTypeList-'+index).select2();
};
</script>
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'>"