Home How the change the value of a td with an input outside the table when clicking button

Questions

How the change the value of a td with an input outside the table when clicking button

November 7, 2022

Let’s say I have an input inside a form with a button:

<body>
<form class="contact-form" id="my_rec" name="my_rec">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-2">
                            <label for="TESTIMATED" class="col-form-label" style="font-size:10px;font-style:aril;font-weight:bold;text-align:right;color:blue;font-family:arial"><b>ESTIMATED COST:</b></label>
                            <p><input type="number" style="font-size:10px" class="form-control" id="TESTIMATED" name="TESTIMATED" value="0.00"></p>
                            <button name="btn2" type="button" class="btn btn-secondary" id="btn2">Close REC</button>
                        </div>
                    </div>
               </div>
</form>
</body>

And after the form I have a table:

<br>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="table-responsive table-sm">
                    <table id="tableCGRAL1" class="table table-hover table-bordered table-condensed" style="width:100%">
                        <thead class="text-center">
                            <tr bgcolor=blue class="firstrow" style="font-size:10px; font-style:arial;font-weight:bold;text-align:center; color:#FFFFFF; font-family:arial">
                                <th>Pda</th>
                                <th>Code</th>
                <th>UM</th>
                                <th>Amount</th>
                                <th>Description</th>
                                <th>Unit cost</th>
                                <th>Estimated Cost</th>
                                <th>Calculated Cost</th>
                                <th>ACTIONS</th>
                            </tr>
                        </thead>
                     <tbody>
                               <tr style="font-style:arial;">
                                    <td> <?php echo $_SESSION["Pda"]; ?></td>
                                    <td> <?php if($resultw->num_rows > 0){ echo $roww['Code'];}  ?></td>
                                    <td> <?php if($resultg->num_rows > 0){  echo $rowg['UM']; } ?></td>
                                    <td> <?php if($resultm->num_rows > 0){ echo $rowm['Amount']; } ?></td>
                                    <td> <?php if($resultv->num_rows > 0){ echo $rowv['Description']; } ?></td>
                                    <td> <?php if($resultq->num_rows > 0){ echo $rowq['UC']; } ?></td>
                                    <td id="this_td" class="this_td"></td>
                                    <td> <?php if($resultt->num_rows > 0){  echo $rowt['CC']; } ?></td>
                        <td></td>
                                </tr>
                       </tbody>
                   </table>
                </div>
            </div>
        </div>
    </div>

Ignore the php echos, it’s just to show from where those tds get their values.

My question is how do I make the td with id and class "this_td" to have the value of the input in the form above when I click the button if the form is not inside the table. I can’t move the form inside the table and use row.(this).closest("tr") because I’m already using that input for something else, the input can’t be moved.

The thing is, I’m using table2csv https://github.com/OmbraDiFenice/table2csv
To convert the table when that button is clicked, but that td is empty and I need it to have the value of the input that the user types in, that value has no time to go to the database and then be able to brought it back with php because before all that it creates the csv, so it has to obtain the value from the client side (before the page reloads, because the button submits and reloads the page).

How can I make this with javascript? I know php, but I don’t have the slightlest idea from where to start with js for this.

>Solution :

The accepted solution proposed in a comment:

const td = document.getElementById("this_td")
const input = document.getElementById("TESTIMATED")

td.innerText = input.value

Just in case you want to make it work as you type, this would work:

const td = document.getElementById('this_td')
const input = document.getElementById('TESTIMATED')

input.addEventListener('keyup', (e) => {
  td.innerText = input.value
})