how to use the same ajax function for multiple buttons

Question

i want call the same ajax function for multiple buttons please help me the code is given below. this code will generate buttons and when we click on the buttons it prints the details ...please solve. This code will generate buttons in table.

<head>
<script>
$(document).ready(function()
{
$("#save").click(function()
{
var sel = $("#response").val();
var fudate=$("#fdate").val();
var cmd=$("#cm").val();
 var id=$("#id").val();
 $.ajax(
    {
        type: "POST",
        url: "autosave.php",
        data: {response:sel,fdate:fudate,cm:cmd,id:id},
       success: function(result)
        {
 alert('result');
          $a= $("#ak").html(result);
       }
    });
});
});
</script>
</head>
<body>
<div id="company_details">
<div id="ak"></div>
<table border="1" align="left">
<tr>
<th >Company</th>
<th>Contact Person</th>
<th>Contact Person's No.</th>
<th>HR</th>
<th>HR's No.</th>
<th>Current Vacancies</th>
<th>Response</th>
<th>Follow Up Date</th>
<th>Comment</th>
<th></th>
<th>Edit</th>
</tr>
<?php 
$con=mysql_connect("localhost","root") or die("Error In Connection:-".mysql_error());
mysql_select_db("ttcs",$con) or die("Error In DB Selection:-".mysql_error());
$sql="select * from company_details";
$rs=mysql_query($sql) or die(mysql_error());
while($row=mysql_fetch_array($rs))
{
?>
<tr>
<td>
<input type="text" name="name" value= <?php $e=$row[0];echo $row[1];?>></td>                              
<td><input type="text" name="cp" value= <?php echo $row[7]; ?>></td>
<td><input type="text" name="cpn" value= <?php echo $row[9]; ?>></td>
<td><input type="text" name="hr" value= <?php echo $row[10]; ?>></td>
<td><input type="text" name="hrn" value= <?php echo $row[12]; ?>></td>
<td>
<?php 
$sql2="select * from vacancies where company_id='$e'";
$rs2=mysql_query($sql2);
if($rs2)
{
while($row2=mysql_fetch_array($rs2))
{?>
<textarea  name="cv" value=<?php echo $row2[1];?>></textarea>
<?php }}?>
</td>
<td>
<select name="response" id="response">
<option value="Not interested">Not Interested</option>
<option value="Not responding">Not Responding</option>                                  
<option value="follow up">Follow up</option>
<option value="Interested">Interested</option>
</select></td>
<?php
$sql1="select * from call_details_company where company_id=$row[0]";
$rs1=mysql_query($sql1);
$row1=mysql_fetch_array($rs1);
?>
<input type="date" name="fdate" id="fdate" value=<?php echo $row1[3];?>>              
<input type="text" name="cm" id="cm" value=<?php  echo $row1[5];?>>
<button  id="save" >save</button>
</td>
</tr>
<?php 
}
?>
</body>

wrap your ajax call inside a function just like any other code — A. Wolff
– A. Wolff, Commented Jan 13, 2014 at 11:08

Arun P Johny · Accepted Answer · 2014-01-13 11:14:10Z

3

ID of an element must be unique, so within the loop don't use ID, change the id of the button to class value then use the input element's name to find the relative elements within the tr

$(document).ready(function () {
    $(".save").click(function () {
        var $tr = $(this).closest('tr')
        var sel = $tr.find("select").val();
        var fudate = $tr.find('input[name="fdate"]').val();
        var cmd = $tr.find('input[name="cm"]').val();
        //need to fix this selector #id too, not able to locate it in the given html structure
        var id = $tr.find("#id").val();
        $.ajax({
            type: "POST",
            url: "autosave.php",
            data: {
                response: sel,
                fdate: fudate,
                cm: cmd,
                id: id
            },
            success: function (result) {
                alert('result');
                $a = $("#ak").html(result);
            }
        });
    });
});

edited Jan 13, 2014 at 11:14

answered Jan 13, 2014 at 11:09

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

3 Comments

user3189828 Over a year ago

it works but but can't acess the values. it only gets the first value of the textbox. please help to find acess the particular values for particular row

Arun P Johny Over a year ago

@user3189828 which value is not found

user3189828 Over a year ago

the textbox values of above code for particular row. i got the first textbox value when clicking all other buttons.....

Jorge Y. C. Rodriguez · Accepted Answer · 2014-01-13 11:38:05Z

2

use like this

<script>
 function ajaxCallDemo() {
    var sel = $("#response").val();
    var $tr = $(this).closest('tr');
    var cmd = $tr.find("input[name='cm']").val();
    var fudate = $tr.find("input[name='fdate']").val();
    var id = $tr.find("#id").val();
    $.ajax({
        type: "POST",
        url: "autosave.php",
        data: {
            response: sel,
            fdate: fudate,
            cm: cmd,
            id: id
        },
        success: function(result) {
            alert('result');
            $a = $("#ak").html(result);
        }
    });
}
$(document).ready(function() {
    $("#save").click(function() {
        ajaxCallDemo();
    });
    $("#save2").click(function() {
        ajaxCallDemo();
    });
});
</script>

edited Jan 13, 2014 at 11:38

Jorge Y. C. Rodriguez

3,4665 gold badges42 silver badges64 bronze badges

answered Jan 13, 2014 at 11:08

Biby Augustine

4251 gold badge3 silver badges16 bronze badges

2 Comments

A. Wolff Over a year ago

+1 but you could use the reference to function syntax: $("#save").click(ajaxCallDemo);

Arun P Johny Over a year ago

@A.Wolff still the selector var cmd=$("#cm").val() won't work

Collectives™ on Stack Overflow

how to use the same ajax function for multiple buttons

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related