添加AJAX到HTML表单选按钮 - Add AJAX to HTML Table Radio Button

Add AJAX to HTML Table Radio Button

本文关键字：单选按钮 HTML AJAX 添加 | 更新日期: 2023-09-27

我有一个简单的HTML表，其中一列显示是/否选项。我想添加一个AJAX请求的是/否列，所以当用户更改是到否或反之亦然，它调用一个简单的PHP脚本更新数据库中的记录。

表是这样的:

<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>

我试图得到一个简单的AJAX脚本时，是/否单选按钮被选中，运行PHP脚本更新数据库。当这种情况发生时，我无法弄清楚如何让AJAX脚本触发-我可以在屏幕上有多行，所以它需要知道哪一行也被选中了。

下面是我的脚本:

<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>

从#completed更改查询选择器(该页中不存在)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>