We Keep Coding

Adding form in innerElement Javascript with php variables

I want to change my PHP table line to "form" by OnClick method, It's working properly using simple HTML line text or PHP line. But not working when adding a whole form
<button type="button" onclick='document.getElementById("<?php echo $row["id"]; ?>").innerHTML = "
<form name="form" method="post" action="">
<input type="hidden" name="new" value="1" />
<input name="id" type="hidden" value="<?php echo $row['id'];?>" />
<p><input type="text" name="name" required value="<?php echo $row['name'];?>" /></p>
<p><input type="text" name="age" required value="<?php echo $row['age'];?>" /></p>
<p><input name="submit" type="submit" value="UPDATE" /></p>
</form>"'>EDIT</button>
This is in PHP while loop repeating multiple time
working perfectly by adding \ after the "quotes
while($row = mysqli_fetch_assoc($result)) { ?>
<tr id="<?php echo $row["id"]; ?>">
<td align="center"><?php echo $row["id"]; ?></td>
<td align="center"><?php echo $row["name"]; ?></td>
<td align="center"><?php echo $row["age"]; ?></td>
<td align="center">
<button type="button" onclick='document.getElementById("<?php echo $row["id"]; ?>").innerHTML = "<fo1rm name=\"form\" method=\"post\" action=\"Dashboard.php\"><input type=\"hidden\" name=\"update\" value=\"1\" /><input name=\"id\" type=\"hidden\" value=\"<?php echo $row['id'];?>\" /><td align=\"center\"><?php echo $row['id']; ?></td><td align=\"center\"><input type=\"text\" name=\"name\" required value=\"<?php echo $row['name'];?>\" /></td><td align=\"center\"><input type=\"text\" name=\"age\" required value=\"<?php echo $row['age'];?>\" /></td><input name=\"submit\" type=\"submit\" value=\"UPDATE\" /></form><td align=\"center\">Delete</td>"'>EDIT</button>
</td>
<td align="center">Delete</td>
</tr>
<?php //$count++;
} ?>
BUT ERROR in inspecting at "FORM TAG"
<tr id="14">
<form name="form" method="post" action></form>
<input type="hidden" name="update" value="1">
<input name="id" type="hidden"value="14">
<td align="center">14</td>
<td align="center">
<input type="text" name="name" required="" value="vachinde">
</td>
<td align="center">
<input type="text" name="age" required="" value="98">
</td>
<input name="submit" type="submit" value="UPDATE">
<td align="center">
Delete
</td></tr>
form tag closing should be at end

You know, that your mixing client side logic (JS) and server side (PHP) things? Your code renders somethin like this and sends this finally static result html to the client:
Dataexample:
$row['id'] = '0815';
$row['name'] = 'Foo';
$row['age'] = '99';
<button type="button" onclick='document.getElementById("0815").innerHTML = "
<form name="form" method="post" action="">
<input type="hidden" name="new" value="1" />
<input name="id" type="hidden" value="0815" />
<p><input type="text" name="name" required value="Foo" /></p>
<p><input type="text" name="age" required value="99" /></p>
<p><input name="submit" type="submit" value="UPDATE" /></p>
</form>"'>EDIT</button>
Whenever you click at the button, you epect a form in the element with id '0185'. BUT: look at the quotation marks! innerHTML starts with <"> and ends with <'>. Addtionally you have to escape all of your <'> in the onclick-content.
I think, you'll have an easier job, if you call an custom javascript function, that builds or fills the form for you. Your button-onclick could look like this:
<button type="button" onclick="renderForm('<?=$row['id']?>', '<?=$row['name']?>', '<?=$row['age']?>')">EDIT</button>
The function renderForm would do this (optimizable, using js-template-strings):
let renderForm = function(id, name, age) {
document.querySelector('#' + id).innerHTML = `<form name="form" method="post" action="">
<input type="hidden" name="new" value="1" />
<input name="id" type="hidden" value="${id}" />
<p><input type="text" name="name" required value="${name}" /></p>
<p><input type="text" name="age" required value="${age}" /></p>
<p><input name="submit" type="submit" value="UPDATE" /></p>
</form>`;
}
Without knowing the context ;-)

Allowed childs of <tr> are <th> and <td> only (https://www.w3.org/TR/html4/struct/tables.html#edef-TR). That's why you get such an render result failure by your js-engine in the browser. I now realized, that you want an editable row, right? Escuse this, but this requires skills, that you might don't have right know.
In your case you could change your code like this (untested and it is still just an really simple example). Please avoid using it in production, especially the innerHTML-stuff is not good:
<form name="form" method="post" action="Dashboard.php">
<table>
<tr>
<td align="center" data-field="id"><?php echo $row["id"]; ?></td>
<td align="center" data-field="name"><?php echo $row["name"]; ?></td>
<td align="center" data-field="age"><?php echo $row["age"]; ?></td>
<td align="center">
<button type="button" onclick="edit(this)">Edit</button>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
function edit(button) {
let sendData = button.innerText != 'Edit';
if (!sendData) {
this.closest('form').submit();
return;
}
button.innerText = 'Save';
let tr = this.closest('tr);
let fields = tr.querySelectorAll('[data-field]');
[].forEach.call(fields, field => {
let value = field.innerText;
field.innerHTML = `<input type="text" name="${field.dataset.field}" value="${value}" />`;
});
}
</script>
I hope you found enough pattern and ideas to teach yourself and to read tutorials, that bring up more skills in JS. A js-framework might be helpfull to build the solution you want.

Its Working by changing id from < tr > to < td >tag
i don't why
while($row = mysqli_fetch_assoc($result)) { ?>
<tr >
<td align="center"><?php echo $row["id"]; ?></td>
<td align="center"><?php echo $row["name"]; ?></td>
<td align="center"><?php echo $row["age"]; ?></td>
<td align="center" id="<?php echo $row["id"]; ?>">
<button type="button" onclick='document.getElementById("<?php echo $row["id"]; ?>").innerHTML = "<form name=\"form\" method=\"post\" action=\"Dashboard.php\"><input type=\"hidden\" name=\"update\" value=\"1\" /><input name=\"id\" type=\"hidden\" value=\"<?php echo $row['id'];?>\" /><input name=\"lang\" type=\"hidden\" value=\"<?php echo $lang;?>\" /><td align=\"center\"><?php echo $row['id']; ?></td><td align=\"center\"><input type=\"text\" name=\"name\" required value=\"<?php echo $row['name'];?>\" /></td><td align=\"center\"><input type=\"text\" name=\"age\" required value=\"<?php echo $row['age'];?>\" /></td><input name=\"submit\" type=\"submit\" value=\"UPDATE\" /></form>"'>Click Me!</button>
</td>
<td align="center">X</td>
</tr>
<?php
} ?>
Working in < td > tag but not in < tr > tag
Output -->
<td align="center" id="14"><form name="form" method="post" action="Dashboard.php"><input type="hidden" name="update" value="1"><input name="id" type="hidden" value="14"><input name="lang" type="hidden" value="telugu">14<input type="text" name="name" required="" value="vachinde"><input type="text" name="age" required="" value="98"><input name="submit" type="submit" value="UPDATE"></form></td>
Error in form if using < tr > tag
while($row = mysqli_fetch_assoc($result)) { ?>
<tr id="<?php echo $row["id"]; ?>">
<td align="center"><?php echo $row["id"]; ?></td>
<td align="center"><?php echo $row["name"]; ?></td>
<td align="center"><?php echo $row["age"]; ?></td>
<td align="center">
<button type="button" onclick='document.getElementById("<?php echo $row["id"]; ?>").innerHTML = "<form name=\"form\" method=\"post\" action=\"Dashboard.php\"><input type=\"hidden\" name=\"update\" value=\"1\" /><input name=\"id\" type=\"hidden\" value=\"<?php echo $row['id'];?>\" /><input name=\"lang\" type=\"hidden\" value=\"<?php echo $lang;?>\" /><td align=\"center\"><?php echo $row['id']; ?></td><td align=\"center\"><input type=\"text\" name=\"name\" required value=\"<?php echo $row['name'];?>\" /></td><td align=\"center\"><input type=\"text\" name=\"age\" required value=\"<?php echo $row['age'];?>\" /></td><input name=\"submit\" type=\"submit\" value=\"UPDATE\" /></form>"'>Click Me!</button>
</td>
<td align="center">Delete</td>
</tr>
<?php //$count++;
} ?>
Output -->
<tr>
<form name="form" method="post" action="Dashboard.php"></form><input type="hidden" name="update" value="1"><input name="id" type="hidden" value="14"><input name="lang" type="hidden" value="telugu">14<input type="text" name="name" required="" value="vachinde updated"><input type="text" name="age" required="" value="98"><input name="submit" type="submit" value="UPDATE">
</tr>
See form closing tag < / form > excluded all input

Assign id or class to fetched data to work with in JavaScript

i have fetched data from database with PHP in while loop.i want to assign id or class to this data to work with it in javaScript individually with every id or class which are in table td.
For example
$i = 0 ;
if($result->rowCount() > 0)
{
while($row_pro = $prod->fetch())
{
$type = $row->type;
$brand = $row->brand;
$qty = $row->qty;
$total = $row->total;
$i++ ;
?>
<tr>
<td><input type="text" value="<?php echo $type; ?>" ></td>
<td><input type="text" value="<?php echo $brand; ?>" ></td>
<td><input type="text" value="<?php echo $qty; ?>" ></td>
<td><input type="text" value="<?php echo $total; ?>" ></td>
</tr>
<?php }} ?>

One solution would be to simply echo out your loop's index ($i) as a class:
<tr>
<td><input type="text" value="<?php echo $type; ?>" class="<?php echo $i; ?>"></td>
<td><input type="text" value="<?php echo $brand; ?>" class="<?php echo $i; ?>"></td>
<td><input type="text" value="<?php echo $qty; ?>" class="<?php echo $i; ?>"></td>
<td><input type="text" value="<?php echo $total; ?>" class="<?php echo $i; ?>"></td>
</tr>
Keep in mind that you can't do this for IDs, as IDs must be unique. Also, you don't actually need to do this in the first place, as you can directly target elements with JavaScript that have neither IDs nor classes. This is most commonly with .getElementsByTagName(), which returns a NodeList collection of elements. Here's an example of that:
let three = document.getElementsByTagName('td')[2];
console.log(three.innerHTML);
<table>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>

How to add values from PHP variables, to the HTML input form?

Hi i am working in a small eCommerce site right now, i am using payumoney as my gateway, i got test credentials to test my code with the gateway.
My question is, how to pass the values that i got through PHP session function to my HTML form.
The code i got in hand is working perfectly, but it is asking for the credentials from the user side. But i already got values for all the elements inside the form, so please help me to integrate the values from PHP variables to the HTML form.
<?php
$MERCHANT_KEY = "<merchant key here>";
$SALT = "<salt goes here>";
$PAYU_BASE_URL = "<Base URL here>";
$action = '';
$posted = array();
if(!empty($_POST)) {
//print_r($_POST);
foreach($_POST as $key => $value) {
$posted[$key] = $value;
}
}
$formError = 0;
if(empty($posted['txnid'])) {
// Generate random transaction id
$txnid = substr(hash('sha256', mt_rand() . microtime()), 0, 20);
} else {
$txnid = $posted['txnid'];
}
$hash = '';
// Hash Sequence
$hashSequence = "key|txnid|amount|productinfo|firstname|email|udf1|udf2|udf3|udf4|udf5|udf6|udf7|udf8|udf9|udf10";
if(empty($posted['hash']) && sizeof($posted) > 0) {
if(
empty($posted['key'])
|| empty($posted['txnid'])
|| empty($posted['amount'])
|| empty($posted['firstname'])
|| empty($posted['email'])
|| empty($posted['phone'])
|| empty($posted['productinfo'])
|| empty($posted['surl'])
|| empty($posted['furl'])
|| empty($posted['service_provider'])
) {
$formError = 1;
} else {
//$posted['productinfo'] = json_encode(json_decode('[{"name":"tutionfee","description":"","value":"500","isRequired":"false"},{"name":"developmentfee","description":"monthly tution fee","value":"1500","isRequired":"false"}]'));
$hashVarsSeq = explode('|', $hashSequence);
$hash_string = '';
foreach($hashVarsSeq as $hash_var) {
$hash_string .= isset($posted[$hash_var]) ? $posted[$hash_var] : '';
$hash_string .= '|';
}
$hash_string .= $SALT;
$hash = strtolower(hash('sha512', $hash_string));
$action = $PAYU_BASE_URL . '/_payment';
}
} elseif(!empty($posted['hash'])) {
$hash = $posted['hash'];
$action = $PAYU_BASE_URL . '/_payment';
}
?>
<html>
<head>
<script>
var hash = '<?php echo $hash ?>';
function submitPayuForm() {
if(hash == '') {
return;
}
var payuForm = document.forms.payuForm;
payuForm.submit();
}
</script>
</head>
<body onload="submitPayuForm()">
<h2>PayU Form</h2>
<br/>
<?php if($formError) { ?>
<span style="color:red">Please fill all mandatory fields.</span>
<br/>
<br/>
<?php } ?>
<form action="<?php echo $action; ?>" method="post" name="payuForm">
<input type="hidden" name="key" value="<?php echo $MERCHANT_KEY ?>" />
<input type="hidden" name="hash" value="<?php echo $hash ?>"/>
<input type="hidden" name="txnid" value="<?php echo $txnid ?>" />
<table>
<tr>
<td><b>Mandatory Parameters</b></td>
</tr>
<tr>
<td>Amount: </td>
<td><input name="amount" value="<?php echo (empty($posted['amount'])) ? '' : $posted['amount'] ?>" /></td>
<td>First Name: </td>
<td><input name="firstname" id="firstname" value="<?php echo (empty($posted['firstname'])) ? '' : $posted['firstname']; ?>" /></td>
</tr>
<tr>
<td>Email: </td>
<td><input name="email" id="email" value="<?php echo (empty($posted['email'])) ? '' : $posted['email']; ?>" /></td>
<td>Phone: </td>
<td><input name="phone" value="<?php echo (empty($posted['phone'])) ? '' : $posted['phone']; ?>" /></td>
</tr>
<tr>
<td>Product Info: </td>
<td colspan="3"><textarea name="productinfo"><?php echo (empty($posted['productinfo'])) ? '' : $posted['productinfo'] ?></textarea></td>
</tr>
<tr>
<td>Success URI: </td>
<td colspan="3"><input name="surl" value="<?php echo (empty($posted['surl'])) ? '' : $posted['surl'] ?>" size="64" /></td>
</tr>
<tr>
<td>Failure URI: </td>
<td colspan="3"><input name="furl" value="<?php echo (empty($posted['furl'])) ? '' : $posted['furl'] ?>" size="64" /></td>
</tr>
<tr>
<td colspan="3"><input type="hidden" name="service_provider" value="payu_paisa" size="64" /></td>
</tr>
<tr>
<td><b>Optional Parameters</b></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input name="lastname" id="lastname" value="<?php echo (empty($posted['lastname'])) ? '' : $posted['lastname']; ?>" /></td>
<td>Cancel URI: </td>
<td><input name="curl" value="" /></td>
</tr>
<tr>
<td>Address1: </td>
<td><input name="address1" value="<?php echo (empty($posted['address1'])) ? '' : $posted['address1']; ?>" /></td>
<td>Address2: </td>
<td><input name="address2" value="<?php echo (empty($posted['address2'])) ? '' : $posted['address2']; ?>" /></td>
</tr>
<tr>
<td>City: </td>
<td><input name="city" value="<?php echo (empty($posted['city'])) ? '' : $posted['city']; ?>" /></td>
<td>State: </td>
<td><input name="state" value="<?php echo (empty($posted['state'])) ? '' : $posted['state']; ?>" /></td>
</tr>
<tr>
<td>Country: </td>
<td><input name="country" value="<?php echo (empty($posted['country'])) ? '' : $posted['country']; ?>" /></td>
<td>Zipcode: </td>
<td><input name="zipcode" value="<?php echo (empty($posted['zipcode'])) ? '' : $posted['zipcode']; ?>" /></td>
</tr>
<tr>
<td>UDF1: </td>
<td><input name="udf1" value="<?php echo (empty($posted['udf1'])) ? '' : $posted['udf1']; ?>" /></td>
<td>UDF2: </td>
<td><input name="udf2" value="<?php echo (empty($posted['udf2'])) ? '' : $posted['udf2']; ?>" /></td>
</tr>
<tr>
<td>UDF3: </td>
<td><input name="udf3" value="<?php echo (empty($posted['udf3'])) ? '' : $posted['udf3']; ?>" /></td>
<td>UDF4: </td>
<td><input name="udf4" value="<?php echo (empty($posted['udf4'])) ? '' : $posted['udf4']; ?>" /></td>
</tr>
<tr>
<td>UDF5: </td>
<td><input name="udf5" value="<?php echo (empty($posted['udf5'])) ? '' : $posted['udf5']; ?>" /></td>
<td>PG: </td>
<td><input name="pg" value="<?php echo (empty($posted['pg'])) ? '' : $posted['pg']; ?>" /></td>
</tr>
<tr>
<?php if(!$hash) { ?>
<td colspan="4"><input type="submit" value="Submit" /></td>
<?php } ?>
</tr>
</table>
</form>
</body>
</html>
I dont want to get the values for the element from the user. For example (firstname, phone,....)
since i already got values from another php file and save it as $name, $phone,...
Thank You.

How to put 2 parameters on onclick using php

im having problem getting the value of a two input textbox using an onclick function.
<?php foreach ($showItems as $items) { ?>
<tr>
<td><?php if(!empty($items['ItemCode'])) echo $items['ItemCode'], ' '; ?><input type="hidden" name="pid" id="pid" value="<?php echo $items['ItemCode']; ?>" /></td>
<td><img src="" /></td>
<td><?php if(!empty($items['Name'])) echo $items['Name'], ' '; ?></td>
<td><?php if(!empty($items['Price'])) echo $items['Price'], ' '; ?></td>
<td><?php if(!empty($items['Description'])) echo $items['Description'], ' '; ?></td>
<td><input type="text" name="qty" id="qty" maxlength="3" size="2" onblur='if(this.value==""){this.value=1;}' /></td>
<td ><input type="submit" value="Add to Registry" onClick="addRegistry(<?php echo $items['ItemCode']; ?>, document.getElementById('qty').value;)"></td>
</tr>
<?php } ?>
javascript script:
function addRegistry(pid, qty){
alert(qty);
document.form.pid.value=pid;
document.form.command.value='add';
document.form.submit();
}
php script:
if($_REQUEST['command']=='add' && $_REQUEST['pid']>0){
$qty = $_POST['qty'];
//echo $qty;
$customerid = $_SESSION['id'];
$pid=$_REQUEST['pid'];
// echo $pid;
$admin->addToRegistry($pid, $customerid, $qty);
header('location:registryCart.php');
}
how do i get the two values so that i can insert it to my database, i was able to get the itemcode, but i cant get the value of the quantity.

Use $counter variable which will increment and differentiate each input id
<?php
$counter=1;
foreach ($showItems as $items) { ?>
<tr>
<td><?php if(!empty($items['ItemCode'])) echo $items['ItemCode'], ' '; ?><input type="hidden" name="pid" id="pid" value="<?php echo $items['ItemCode']; ?>" /></td>
<td><img src="" /></td>
<td><?php if(!empty($items['Name'])) echo $items['Name'], ' '; ?></td>
<td><?php if(!empty($items['Price'])) echo $items['Price'], ' '; ?></td>
<td><?php if(!empty($items['Description'])) echo $items['Description'], ' '; ?></td>
<td><input type="text" name="qty" id="qty-<?php echo $counter; ?>" maxlength="3" size="2" onblur='if(this.value==""){this.value=1;}' /></td>
<td ><input type="submit" value="Add to Registry" onClick="addRegistry(<?php echo $items['ItemCode']; ?>, document.getElementById('qty-<?php echo $counter; ?>').value;)"></td>
</tr>
<?php
$counter++;
} ?>

Table Row Sum Within PHP loop

I want to sum table rows dynamically as the user inputs values. Since the number of rows can vary I want to use a php loop to accomplish this. I'm having problems getting the loop to work correctly. If, for example, there are two individual rows to sum only the bottom row will be summed.
<script type="text/javascript">
var sumScoreF = function(a) {
var rowtotal = 0;
n = new Array();
for (i = 1; i <= 3; i++) {
if (parseInt(document.getElementById(a + i).value) > 0) {
n[i] = parseInt(document.getElementById(a + i).value);
rowtotal += n[i];
}
}
document.getElementById(a + 'total').value = rowtotal;
};
</script>
The following is an example of a single row sum. The total column continues to be summed as values are entered. This is a nice effect but not necessary.
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>total</td>
</tr>
<tr>
<td>
<input name="p1g1" id="p1g1" type="text" value="" onChange="sumScoreF('p1g')" />
</td>
<td>
<input name="p1g2" id="p1g2" type="text" value="" onChange="sumScoreF('p1g')" />
</td>
<td>
<input name="p1g3" id="p1g3" type="text" value="" onChange="sumScoreF('p1g')" />
</td>
<td>
<input name="p1gtotal" id="p1gtotal" type="text" value="" />
</td>
</tr>
</table>
Here is my attempt at looping additional rows using php and javascript. The first row will not sum but the second row will. I think the problem is with the javascript variable "m" in that it goes directly to the last row but I can't figure out how to fix it.
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>total</td>
</tr>
<?php for($j=1;$j<=3;$j++) { ?>
<script type="text/javascript">
var k = <?php echo json_encode($j); ?>;
var m = 'p'+k+'g';
</script>
<tr>
<td>
<input name="<?php echo 'p'.$j.'g1'; ?>" id="<?php echo 'p'.$j.'g1'; ?>" type="text" onChange="sumScoreF('m')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'g2'; ?>" id="<?php echo 'p'.$j.'g2'; ?>" type="text" onChange="sumScoreF('m')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'g3'; ?>" id="<?php echo 'p'.$j.'g3'; ?>" type="text" onChange="sumScoreF('m')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'gtotal'; ?>" id="<?php echo 'p'.$j.'gtotal'; ?>" type="text" />
</td>
</tr>
<?php } ?>
Any help is greatly appreciated. Thanks.

Used PHP to echo the loop variable within the onChange javascript function call:
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>total</td>
</tr>
<?php for($j=1;$j<=3;$j++) { ?>
<tr>
<td>
<input name="<?php echo 'p'.$j.'g1'; ?>" id="<?php echo 'p'.$j.'g1'; ?>" type="text" onChange="sumScoreF('<?php echo 'p'.$j.'g'; ?>')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'g2'; ?>" id="<?php echo 'p'.$j.'g2'; ?>" type="text" onChange="sumScoreF('<?php echo 'p'.$j.'g'; ?>')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'g3'; ?>" id="<?php echo 'p'.$j.'g3'; ?>" type="text" onChange="sumScoreF('<?php echo 'p'.$j.'g'; ?>')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'gtotal'; ?>" id="<?php echo 'p'.$j.'gtotal'; ?>" type="text" />
</td>
</tr>
<?php } ?>