Home/ Questions/Q 8389759
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T18:48:36+00:00

I’m following tutorials for the purpose of creating a table with separate submit buttons

  • 0

I’m following tutorials for the purpose of creating a table with separate submit buttons for each row. Don’t question it, it’s what I want to do.

I want the script to return a value to my function, which will then display a message to the user (either a popup, or else perhaps adding to a <div id="messages"> or something like that.

All the buttons will send data to the same PHP script. I figured I would model this after the jeditable plugin, which submits the element’s id to the script.

But I’ve never written any of my own jquery, so I’m running into problems. My first test

My current test script $(this).id is not working:

$(document).ready(function(){
    $(".magic_button").click(function() {
        var data = $(this).id;
        alert (data); // test
        $("#messages")
                // trying to submit the data and retrieve response
            .load('/myscrpt.php','id=' + data); 
    });
});

The test html:

<div id="magic_button_form">
<form name="magic">
    <input type="button" class="magic_button" name="magic_button" id="magic_button_1" value="magic" />
    <input type="button" class="magic_button" name="magic_button" id="magic_button_2" value="magic" />
</form>
</div>
<div id="messages"></div>

So, basically, I need to figure out how to get the id out of the calling element, submit it by ajax, then handle returned data. It’s not working because first of all I can’t even get the id of the calling button.

EDIT:

Complete, Working Script Per Martin’s Answer:

Per Martin’s solution, here is what I came up with in my test and it works. Below is the html/jquery, and then the php script. The php script just does a simple text transformation, changing “magic_button_1” into “Magic Button 1” (and same for any other button of class “button”).

Here is basically the html/jquery:

<html>
<head>
<script>
$(document).ready(function(){ 
    });
    $(".magic_button").click(function() {
        var data = $(this).attr('id');
        //alert (data);
        $.ajax({
            type: "POST",
            url: "/controllers/clean/ajax/table.php",
            data: { 'id': data }
        }).done(function( msg ) {
            alert("Data Saved: " + msg);
        });
    });


});
</script>
</head>
<body>
<div id="magic_button_form">
<form name="magic">
   <!-- <label for="name" id="name_label">Name</label>  
    <input type="text" name="name" id="name" size="30" value="" class="text-input" />  
    <label class="error" for="name" id="name_error">This field is required.</label> -->
    <input type="button" class="magic_button" name="magic_button" id="magic_button_1" value="magic" />
    <input type="button" class="magic_button" name="magic_button" id="magic_button_2" value="magic" />
</form>
</div>
</body>
</html>

Here is the php script (/controllers/clean/ajax/table.php)

$id = $_POST['id'];

$id = ucwords(implode(' ',explode('_',$id)));

echo $id;
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to use:

    $(this).attr('id')

    Here is the documentation for jQuery ajax calls, example:

    $.ajax({
   type: "POST",
   url: "some.php",
   data: { name: "John", location: "Boston" }
}).done(function( msg ) {
   alert( "Data Saved: " + msg );
});
    • 0