Добавить AJAX в HTML-таблицу Radio Button

Question

У меня есть простая таблица 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> 

Answer 1

Изменить селектор запроса из #completed (который не существует на странице) к 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>