PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Wednesday, November 9, 2022

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

 November 09, 2022     button, html, html-table, input, javascript     No comments   

Issue

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


Answered By - kil
Answer Checked By - Dawn Plyler (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing