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

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

<body>
<form  id="my_rec" name="my_rec">
                <div >
                    <div >
                        <div >
                            <label for="TESTIMATED"  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"  id="TESTIMATED" name="TESTIMATED" value="0.00"></p>
                            <button name="btn2" type="button"  id="btn2">Close REC</button>
                        </div>
                    </div>
               </div>
</form>
</body>

And after the form I have a table:

<br>
    <div >
        <div >
            <div >
                <div >
                    <table id="tableCGRAL1"  style="width:100%">
                        <thead >
                            <tr bgcolor=blue  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" ></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.

CodePudding user response：

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