Question 258155 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Get value from a dynamic button without submit

I’m new in this world. I love it but it’s very difficult if you don’t have enough experience/skills.

I have a dynamic php page that shows data from db inside a table. I have to open a popup from a dynamic button, positioned on the side of every row, is created based on certain requirements.
Inside the popup I have to show the line that corresponds to the clicked button.
table

This is the code for the button:

<button type="submit" class="btn0" name="button" onclick="openPopup()" value="<?php echo $row['id']; ?>">

Example: the first row has ‘id’ = 1; by clicking the corresponding button of that row, I have to show in the popup the data that matches to the row with ‘id’ = 1.
For obvious reasons, It always shows the last row.

In the general table the data is displayed through the classic while loop ‘while($row = mysqli_fetch_array($controllo))’.

I tried with form, but I can’t upload the page, the popup window is just a <div> element.

The function openPopup() displays the div:

function openPopup() {
    document.getElementById("myForm").style.display = "block";
}

Inside the div there is a form where I can submit a change of the specific row.
I know i can use Javascript, but then I need php to show datat and submit the changes to db. Maybe there’s something I’m skipping over.

Sorry for my english and tell me if you need something else.
Thanks to anyone who can help me.

EDIT: On button click the popup shows the specific row that refer to the button clicked. If I click on the button on the first row, the popup displays the first row, if I cick the button on the second row, it displays the second row, etc.
Popup if I click on the first button, first row.

EDIT: I try to be more clear.
On main page I have this:

<table class="tabella">
<thead>
    <tr class="intestazione">
        <th>Tipo di controllo</th>
        <th>Descrizione controllo</th>
        <th>Tool necessari</th>
        <th>Frequenza</th>
        <th>OK</th>
        <th>KO</th>
        <th>Note</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <?php
    while($row = mysqli_fetch_array($controllo)){
    <tr>
        <td>
            <?php echo $row['nome']; ?>
        </td>
        <td>
            <?php echo $row['testo']; ?>
        </td>
        
    ....

I just get data from database and display as table and form.

Here you can check checkboxes and write note, and in the end submit the changes. It is a maintenance checklist.
On specific condition, after submit and reload, You have to be able to add a second note.

The problem is that I have to display, inside the div popup, the right row with his data, and then submit the new changes..

Tags:

2

Answers


  1. 0

    The solution to get its value without submitting you have to use "prevenDefault"

    https://developer.mozilla.org/fr/docs/Web/API/Event/preventDefault

    here’s an exemple :

    document.getElementById('buttonid').addEventListener('click', (e)=>{
    e.preventDefault();
    return e.target.value;
})

    I’d also advise you to take at look at stopPropagation which can be quite handy https://developer.mozilla.org/fr/docs/Web/API/Event/stopPropagation

    If you want to manage when to submit or not you can also use a function which’ll take the event as a parameter

    const getValue = (e) =>{
    e.preventDefault();
    return e.target.value;
}

    document.getElementById('buttonid').addEventListener('click', (e)=>{
    if(somecondition){
        getValue(e);
    }
    // If you don't want to get the value don't use else, 
    // if the if isn't triggered then it'll submit
})
    Login or Signup to reply.
  2. 0

    To get the button value when the button is clicked without form submission, you can refer to the following code for detail:

    function openPopup(e) {
  e.preventDefault();  //prevent form submission.
  console.log(e.target.value)
}
    <button type="submit" class="btn0" name="button" onclick="openPopup(event)" value="qk">go</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search