Add AJAX to HTML Table Radio Button

Question

I have a simple HTML table with a column showing a Yes/No option. I would like to add an AJAX request to the Yes/No column so when a user changes the Yes to No or vice versa it calls a simple PHP script which updates the record in the database.

Here's how the table looks like:

<table>
    <thead>
        <tr>
            <th scope="col">Description</th>
            <th scope="col">Type</th>
            <th scope="col">Completed</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Welcome Email</td>
            <td>Email</td>
            <td>
                <div class="radio">
                    <label><input checked id="updateTask1" name="completed1" type="radio" value="Yes">Yes</label>
                    <label><input id="updateTask1" name="completed1" type="radio" value="No">No</label>
                </div>
            </td>
        </tr>
        <tr>
            <td>Follow Up Phone Call</td>
            <td>Phone call</td>
            <td>
                <div class="radio">
                    <label><input id="updateTask2" name="completed2" type="radio" value="Yes">Yes</label>
                    <label><input checked id="updateTask2" name="completed2" type="radio" value="No">No</label>
                </div>
            </td>
        </tr>
    </tbody>
</table>

I'm trying to get a simple AJAX script to fire when the yes/no radio buttons are selected that runs a PHP script to update the database. I can't work out how to get the AJAX script to fire when this happens - I could have multiple rows on the screen so it needs to know which one has been selected as well.

Here's my script so far:

<script type="text/javascript">
$(document).ready(function() {
    $("#completed").change(function(){
        $.ajax({
        url: "updateTask.php",
        data: {
            storeManager: storeManager, 
            uuid: uuid
            },
        success: function(data) {
            $("#storeManager").html(data).addClass("has-success");
        },
        error: function (data) {
            $("#storeManager").html(data).addClass("has-error");
        }
        }); 
    });
});

</script>

Try this: http://stackoverflow.com/questions/13152927/how-to-use-radio-on-change-event — Indrasinh Bihola, Sep 19 '15 at 11:53

score 0 · Accepted Answer · answered Sep 19 '15 at 12:01

Change your query selector from #completed (which doesn't exist in the page) to input[type='radio']:

$(document).ready(function() {
    $("input[type='radio']").change(function(){
      if ( true ) // for demonstration purposes
        alert("Changed " + this.name);
      else
        $.ajax({
        url: "updateTask.php",
        data: {
            storeManager: storeManager, 
            uuid: uuid
            },
        success: function(data) {
            $("#storeManager").html(data).addClass("has-success");
        },
        error: function (data) {
            $("#storeManager").html(data).addClass("has-error");
        }
        }); 
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th scope="col">Description</th>
            <th scope="col">Type</th>
            <th scope="col">Completed</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Welcome Email</td>
            <td>Email</td>
            <td>
                <div class="radio">
                    <label><input checked name="completed1" type="radio" value="Yes">Yes</label>
                    <label><input name="completed1" type="radio" value="No">No</label>
                </div>
            </td>
        </tr>
        <tr>
            <td>Follow Up Phone Call</td>
            <td>Phone call</td>
            <td>
                <div class="radio">
                    <label><input name="completed2" type="radio" value="Yes">Yes</label>
                    <label><input checked name="completed2" type="radio" value="No">No</label>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Add AJAX to HTML Table Radio Button

1 Answers1