Adding form in innerElement Javascript with php variables

Question

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\"><a href=\"delete.php?lang=<?php echo $lang; ?>&id=<?php echo $row['id']; ?>\">Delete</a></td>"'>EDIT</button>
    </td>


    <td align="center"><a href="delete.php?lang=<?php echo $lang; ?>&id=<?php echo $row["id"]; ?>">Delete</a></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">
  <a href="delete.php?lang=telugu&amp;id=14">Delete</a>
</td></tr>

form tag closing should be at end

Sven · Accepted Answer · 2021-07-27 11:41:46Z

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 ;-)

thanks for reply, i want to update table row by changing row to form row. Using Onclick to change row, php is required to fill the form from database. hope you understand

Sven · Accepted Answer · 2021-07-28 11:36:13Z

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.

Yes i want editable/ updateable row. in PHP while loop from database. Its working normal in < td > so i'm using that only now. Ill try you solution. Thanks for the reply :D

StackQA · Accepted Answer · 2021-07-28 05:51:03Z

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"><a href="delete.php?lang=<?php echo $lang; ?>&id=<?php echo $row["id"]; ?>">X</a></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"><a href="delete.php?lang=<?php echo $lang; ?>&id=<?php echo $row["id"]; ?>">Delete</a></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

Collectives™ on Stack Overflow

Adding form in innerElement Javascript with php variables

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related