Problem with sending data to server with ajax

Question

I've written a code that creates a table from database in HTML and I want to have delete and confirm button on each row. I put the entire row in <form method="post"> attribute. In the JavaScript File I read email's value and sent it to server using ajax and server does the operation. the Problem is when i want to delete a row or confirm it using each row's button, it only applies to the first row even if i click another row's button. I Used document.getElementById('email') but it always return first row. here is my html code:

<table id="example1" class="table table-bordered table-striped">
   <thead>
   <tr>
       <th>نام کاربر</th>
       <th>ایمیل</th>
       <th>تایید</th>
   </tr>
   </thead>
   <tbody>
    <?php
    while ($users = mysqli_fetch_assoc($result_user)) {
    ?>
    <tr>
       <form name="ajax-demo" id="ajax-demo" method="get">
           <td><?php echo $users['name']?></td>
           <td><?php echo $users['email']?></td>
                <input id="email" type="hidden" name="email" value="<?php echo $users['email']?>">
            <td>
                <div class="btn-group">
                  <button onclick="confirmUser()" id="btnConfirm" type="submit" class="btn btn-success btn-flat">
                      تایید
                  </button>
                  <button type="button" class="btn btn-success btn-flat dropdown-toggle" data-toggle="dropdown">
                     <span class="caret"></span>
                     <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                  <li>
                     <a onclick="deleteUser()" id="btnDelete">حذف</a>
                  </li>
                  </ul>
                </div>
             </td>
        </form>
     </tr>
    <?php }?>
    </tbody>
</table>

and javaScript code:

<script>
    function confirmUser() {
        var email = document.getElementById("email").value;
        var xhr;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            xhr = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // IE 8 and older
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        var data = "email=" + email;
        xhr.open("POST", "confirm_user.php", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(data);
        xhr.onreadystatechange = display_data;
        function display_data() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    //alert(xhr.responseText);
                    document.getElementById("txtHint").innerHTML = xhr.responseText;
                } else {
                    alert('There was a problem with the request.');
                }
            }
        }
    }
    function deleteUser() {
        var email = document.getElementById("email").value;
        var xhr;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            xhr = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // IE 8 and older
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        var data = "email=" + email;
        xhr.open("POST", "confirm_user_delete.php", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(data);
        xhr.onreadystatechange = display_data;
        function display_data() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    //alert(xhr.responseText);
                    document.getElementById("txtHint").innerHTML = xhr.responseText;
                } else {
                    alert('There was a problem with the request.');
                }
            }
        }
    }
</script>

and at last my confirm_user.php code:

<?php
$conn = mysqli_connect('localhost', 'root', 'root', 'my_scheme');
if (!$conn) {
    die('Connection failed ' . mysqli_error($conn));
}
if (isset($_POST['email'])) {
    $email_user = $_POST['email'];
    $sql = "UPDATE my_scheme.tbl_user SET active='true' WHERE email='".$email_user."'";
    if (mysqli_query($conn, $sql)) {
        echo '<h5 class="headline text-green">کاربر با موفقیت تایید شد!</h5>';
    }else {
        echo "Error: ". mysqli_error($conn);
    }
    exit();
}
else {
    echo "failed";
}

confirm_user_delete.php code is like the previous code. please help me to fix this. thank you

"id" values must be unique; your code uses the same "id" values over and over. — Pointy
– Pointy, Commented Aug 6, 2019 at 13:06
You can not nest a form into a table row like that - the form either needs to go around the whole table, or be contained within a single table cell. — misorude
– misorude, Commented Aug 6, 2019 at 13:07
You have multiple forms with same id and a form can not be a child of a table — Masivuye Cokile
– Masivuye Cokile, Commented Aug 6, 2019 at 13:14

Muhammad Tashfeen · Accepted Answer · 2019-08-06 13:40:34Z

1

If I understood your problem right. You have database enteries that creates table rows from the results from database. But even if you click the second element it is always getting the id of the first email from the table row.

Reason: You can simply do it like this

    <?php
$email = 'myemail.com';
?>

<button onclick="confirmUser('<?php echo $email; ?>')"class="btn btn-success btn-flat"> Delete Me </button>

<script>
function confirmUser(email)
{
    console.log("The email to delete is: " + email);
}
</script>

edited Aug 6, 2019 at 13:40

answered Aug 6, 2019 at 13:13

Muhammad Tashfeen

6835 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Masoud Khodadadi Over a year ago

thanks . you're right but how i am gonna implement class="email"?

Muhammad Tashfeen Over a year ago

Your case is very simple I would suggest the following code. You can adapt it to your needs but essentially it is just passing the value of email to be deleted directly so you won't need even id or class. I have edited my answer with the code that you might adapt to your solution.

Ankur Mishra · Accepted Answer · 2019-08-06 13:11:08Z

0

<button onclick="confirmUser(this)" data-email="<?php echo $users['email']?>" id="btnConfirm" type="submit" class="btn btn-success btn-flat">تایید</button>

And in js function:

function confirmUser(this) {
        var email = this.getAttribute("email");
        var xhr;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            xhr = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // IE 8 and older
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        var data = "email=" + email;
        xhr.open("POST", "confirm_user.php", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(data);
        xhr.onreadystatechange = display_data;
        function display_data() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    //alert(xhr.responseText);
                    document.getElementById("txtHint").innerHTML = xhr.responseText;
                } else {
                    alert('There was a problem with the request.');
                }
            }
        }
    }

Do it same for delete.

answered Aug 6, 2019 at 13:11

Ankur Mishra

1,2961 gold badge8 silver badges15 bronze badges

3 Comments

Masoud Khodadadi Over a year ago

It worked for confirm button but since delete button is not actually a button. it's a <a> tag, I got error when i am using onclick="deleteUser(this).

Ankur Mishra Over a year ago

Ankur Mishra Over a year ago

function deleteUser(this) { var email = this.getAttribute("email").value; ...... }

Collectives™ on Stack Overflow

Problem with sending data to server with ajax

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related