0

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();
    });
Vaggelis Ksps
  • 308
  • 4
  • 13
  • 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. –  Oct 28 '15 at 00:21

3 Answers3

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.

PC3TJ
  • 852
  • 5
  • 16
  • 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 –  Oct 28 '15 at 00:23
  • Thank you completely slipped by me. – PC3TJ Oct 28 '15 at 00:23
  • It's alright. Revised answer to address name attribute on inputs – PC3TJ Oct 28 '15 at 00:27
  • 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. – Vaggelis Ksps Oct 28 '15 at 11:19
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/

Igor Ilic
  • 1,370
  • 1
  • 11
  • 21
  • 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 – Vaggelis Ksps Oct 28 '15 at 12:30
  • @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: http://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 :) – Igor Ilic Oct 29 '15 at 10:23
0

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

}
Vaggelis Ksps
  • 308
  • 4
  • 13