Mapping entrée de formulaire HTML javascript objet à l'intérieur d'un élément nouvellement formé

Question

I ont le code HTML suivant. S'il vous plaît jetez un coup d'oeil et je vais vous expliquer le problème au fur et à mesure.

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

Ce que je suis en train de réaliser ici est que lorsque je clique sur le bouton « Modifier », il efface ce champ et crée de nouveaux champs vides à sa place où ces détails peuvent être saisis à nouveau et à la place de l'édition bouton, le bouton de mise à jour apparaît.

C'est ce que la fonction d'édition ressemble à:

<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>"); 
} 

Le bouton de mise à jour des incendies une fonction appelée testFunction. Maintenant, dans cette fonction testFunction, je veux envoyer les nouvelles valeurs dans le nouveau formulaire que j'ai créé avec jQuery afin que je puisse envoyer ces valeurs à MySQL afin que la nouvelle valeur de title soit mise à jour pour un identifiant donné.

S'il vous plaît regarder par-dessus le code et me dire comment dois-je aller sur la résolution de ce sujet?

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>