how to post data from php while loop with ajax

Question

I am trying to create a friend button like fb.I have a while loop that echos the name and some other data i need to save into a table in my database for every user request seperatly.My problem is that i don't know how to pass them with ajax because i have same id on textboxes buttons.I tried to pass them with same ids but this passed 3 times the same data or only one of them.So i tried to use the id="something$row[id]" to define every textbox and button but i don't know how to trigger the jquery function and post them with ajax.a picture of what i am trying

my php file

    echo    "<div class='col-xs-12'>
                        <div class='row fixed-table'>
                            <div class='table-content'>
                                <table class='table table-striped text-muted' id='mytable'>
                                    <tbody>";
                                        while($row = mysqli_fetch_array($requests)){
                                            $username=("SELECT * FROM users WHERE user_id=".$row['patient']);
                                            $found=mysqli_fetch_array(mysqli_query($sql_link,$username));
                                            echo "<tr>
                                                <td class='text-center'>
                                                    <p>
                                                        $found[username] 
                                                    <p>                                                             
                                                </td>
                                                <td class='text-center'>";
                                                    $patient_username=$found['username'];
                                                    $patient_id=$found['user_id'];
                                                echo"<input type='text' id='patient_id$row[id]'  class='hidden' value='$patient_id'>
                                                    <input type='text' id='patient_username$row[id]'  class='hidden' value='$patient_username'>
                                                    <input type='text' id='doctor_id$row[id]'  class='hidden' value='$doctor_id'>
                                                    <input type='text' id='doctor_fname$row[id]'  class='hidden' value='$doctor_fname'>
                                                    <input type='button' id='accept_btn$row[id]' class='btn btn-primary' value='Accept'>                                                                                                                                                            
                                                </td>
                                            </tr>";
                                        }
                                    echo "</tbody>
                                </table>
                            </div>
                        </div>
                    </div>";

my js file

function decision(){
        var patient_id = $('#patient_id').val();
        var patient_username = $('#patient_username').val();
        var doctor_id = $('#doctor_id').val();
        var doctor_fname = $('#doctor_fname').val();

            $.ajax({
                type:"post",
                url:"php/add.php",
                data: {"patient_id": patient_id,"patient_username": patient_username,"doctor_id": doctor_id,"doctor_fname": doctor_fname},
                success:function(data){
                    $("#decision").html(data);
                }
            });

$('#accept_btn').click(function(){
        decision();
    });

You're on the right track. Take advantage of jQuery's ability to select elements using partial attribute values: $('[id^=accept_btn]').click (descision) Of course, you'll have to change descision() to find the appropriate inputs based on the id of the this button. — user5051310
– user5051310, Commented Oct 28, 2015 at 0:21

PC3TJ · Accepted Answer · 2015-10-28 00:26:16Z

1

This is easy with JQUERY as you dont even need to know the IDs within the form. However first you will need to wrap all your inputs into a form and assign an ID to the form and a name to each input.

        var data = $("#myForm").serialize();
        $.post('myPHPFILEURL.php', data,function(retData){
          //CODE THAT HANDLES SERVER RESPONSE
          
          
          });

            echo    "<div class='col-xs-12'>
                                <div class='row fixed-table'>
                                    <div class='table-content'>
                                      <form id='myForm'>
                                        <table class='table table-striped text-muted' id='mytable'>
                                            <tbody>";
                                                while($row = mysqli_fetch_array($requests)){
                                                    $username=("SELECT * FROM users WHERE user_id=".$row['patient']);
                                                    $found=mysqli_fetch_array(mysqli_query($sql_link,$username));
                                                    echo "<tr>
                                                        <td class='text-center'>
                                                            <p>
                                                                $found[username] 
                                                            <p>                                                             
                                                        </td>
                                                        <td class='text-center'>";
                                                            $patient_username=$found['username'];
                                                            $patient_id=$found['user_id'];
                                                        echo"<input type='text'  name='patient_id$row[id]' id='patient_id$row[id]'  class='hidden' value='$patient_id'>
                                                            <input type='text' id='patient_username$row[id]' name='patient_username$row[id]'  class='hidden' value='$patient_username'>
                                                            <input type='text' id='doctor_id$row[id]' name='doctor_id$row[id]'  class='hidden' value='$doctor_id'>
                                                            <input type='text' id='doctor_fname$row[id]' name='doctor_fname$row[id]'  class='hidden' value='$doctor_fname'>
                                                            <input type='button' id='accept_btn$row[id]' name='accept_btn$row[id]' class='btn btn-primary' value='Accept'>                                                                                                                                                            
                                                        </td>
                                                    </tr>";
                                                }
                                            echo "</tbody>
                                        </table>
                                        </form>
                                    </div>
                                </div>
                            </div>";

Simply select your form and serialize() the data then pass the new serialized string into the data argument of your AJAX function.

edited Oct 28, 2015 at 0:26

answered Oct 28, 2015 at 0:12

PC3TJ

8425 silver badges16 bronze badges

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

4 Comments

user5051310 Over a year ago

He doesn't have name attributes on his inputs. You should address that in your answer if you're going to suggest he use forms

PC3TJ Over a year ago

Thank you completely slipped by me.

PC3TJ Over a year ago

It's alright. Revised answer to address name attribute on inputs

Vaggelis Ksps Over a year ago

I am trying to make an add friend button like facebook. With this way i think all data will be posted and not seperatly for every user. Even this i tried your code but nothing happend.

Igor Ilic · Accepted Answer · 2015-10-28 11:54:17Z

1

You could add data-id="userID" attribute to your input instead of having it in the ID

<input type='button' id='accept_btn$row[id]' class='btn btn-primary' value='Accept'>

So your input would look something like this:

<input type='button' id='accept_btn' data-id='$row[id]' class='btn btn-primary' value='Accept'>

And then in you jquery/javascript code use like this:

$("#accept_btn").on("click", function(){
    var userID = $(this).data("id"); //this will get the value from data-id from the clicked button
    //rest of your code here...
});

You can also add this for all of your input fields and retrieve data from them as well.

$("#patient_username").data("id")

Hope this helps. You can check this sample jsfiddle https://jsfiddle.net/Lz3k1he1/

answered Oct 28, 2015 at 11:54

Igor Ilic

1,3681 gold badge11 silver badges22 bronze badges

2 Comments

Vaggelis Ksps Over a year ago

I am posting the textbook values.My problem is tha everything here has the same ids so when i post the first echo it runs the function twice and post the values. when i click again runs 4 times the function and posts the values of the first 4 texboxes then 16 and this goes on. i want to accept on friend and get the values only from the textboxes i need only on time

Igor Ilic Over a year ago

@VaggelisKsps yeah, sorry for late response. I just checked some documentation and it says you can't have multiple elements with the same ID. You can take a look at this answer for this problem: stackoverflow.com/a/8498617/2911633 but basically you should use came class but different IDs Ah, I didn't see you posted the solution below. Glad I was able to help :)

Vaggelis Ksps · Accepted Answer · 2015-10-28 14:42:25Z

I finally made it. It took me hours but it works and i wanto thank you all for your help and specially Igor Ilic. The solution

php

<tbody>";
                                        while($row = mysqli_fetch_array($requests)){
                                            $username=("SELECT * FROM users WHERE user_id=".$row['patient']);
                                            $found=mysqli_fetch_array(mysqli_query($sql_link,$username));
                                            echo "<tr>
                                                <td class='text-center'>
                                                    <p>
                                                        $found[username] 
                                                    <p>                                                             
                                                </td>
                                                <td class='text-center'>";
                                                    $patient_username=$found['username'];
                                                    $patient_id=$found['user_id'];
                                                echo"<buuton id='accept_btn$row[id]' class='btn btn-primary' data-patient_id='$patient_id' data-patient_username='$patient_username' data-doctor_id='$doctor_id' data-doctor_fname='$doctor_fname'
                                                 href='#' onclick='decision(this);'>
                                                 Accept</button>
                                                </td>
                                            </tr>";
                                        }
                                    echo "</tbody>

and js

function decision(p){

    var patient_id = $(p).data('patient_id');
    var patient_username = $(p).data('patient_username');
    var doctor_id = $(p).data('doctor_id')
    var doctor_fname = $(p).data('doctor_fname');

        $.ajax({
            type:"post",
            url:"php/add.php",
            data: {"patient_id": patient_id,"patient_username": patient_username,"doctor_id": doctor_id,"doctor_fname": doctor_fname},
            success:function(data){
                $("#decision").html(data);
            }
        });

}

Collectives™ on Stack Overflow

how to post data from php while loop with ajax

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related