將html表單輸入映射到新形成的元素內的javascript對象

Question

我有以下html。請看看它，我會一直解釋這個問題。

<table> 
<tbody> 
<tr id="<?php echo $record['id']?>" style="..."> 
    <td><?php echo $record['id']; ?></td> 
    <td><?php echo $record['url']; ?></td> 
    <td><input type="button" name="edit" value="Edit" onclick="edit(<?php echo ($record['id'])?>)"></td> 
</tr> 
</tbody> 
</table> 

我想在這裏實現的是，當我點擊「編輯」按鈕，它會清除該領域，創建了地方新的空場，其中這些細節可以再次進入到位編輯按鈕，出現更新按鈕。

這是編輯功能是什麼樣子：

<script> 
function edit(id){ 
    var element = document.getElementById(id); 
    $(element).empty(); 
    $(element).append("<td><input name='id' value="+id+" disabled></td>" + 
        "<td><input type='text' name='url' ></td>" + 
        "<td><input type='text' name='title'></td>" + 
        "<td><input type='button' value='Update' onclick='testFunction()'></td>"); 
} 

更新按鈕觸發一個叫做testFunction功能。現在在這個testFunction中，我想將新的值發送到我使用jQuery創建的新表單中，以便我可以將這些值發送到MySQL，以便爲給定的id更新標題的新值。

請查看代碼並告訴我該如何解決此問題？

var testFunction = function(newID){ 
     console.log("This is the NEW id of the object that we are changing----->"); 
     console.log(newID); 
     console.log("--------------------------END------------------"); 
     $.post("update", { id: newID}) 
      .done(function() { 
       document.getElementById(id).style.display = "none"; 
      }); 
    }; 
</script> 

Answer 1

//test record 
 
var record = { 
 
    id: 12345, 
 
    title: 'Some title', 
 
    url: 'https://stackoverflow.com/posts/45861223/edit' 
 
}; 
 

 
function action(id) { 
 
    var $element = $('#' + id), 
 
    $title = $('[name=title]', $element), 
 
    $url = $('[name=url]', $element), 
 
    $btn = $('[type=button]', $element), 
 
    isUpdate = ($btn.attr('value') != 'Edit'); 
 

 

 
    $title.prop('readOnly', isUpdate); 
 
    $url.prop('readOnly', isUpdate); 
 
    $btn.attr('value', isUpdate ? 'Edit' : 'Update'); 
 

 
    if (isUpdate) { 
 
    // show some loading mask 
 
    $.post("update", { 
 
     title: $title.val(), 
 
     url: $url.val(), 
 
     id: id 
 
     }) 
 
     .done(function() { 
 
     // here you have the new id from the server 
 
     // hide the loading mask 
 
     }); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr id="12345"> 
 
     <td><input type='text' name='title' value="Some title" readOnly></td> 
 
     <td><input type='text' name='url' value="https://stackoverflow.com/posts/45861223/edit" readOnly></td> 
 
     <td><input type="button" name="edit" value="Edit" onclick="action(12345)"></td> 
 
    </tr> 
 
    </tbody> 
 
</table>