Javascript从按钮上传信息

Question

我正在研究在php（phtml视图文件）中生成的概要头带，如下所示：

echo    "<div>
        Nom : " . $this->currentP->getName() . "</br>
        " . "Version : " . $this->currentP->getVersion() . "</br>
        " . "Date de début : " . $this->currentP->getCreation_date() . "</br>
         ...
        </div>";

我想在每个字段旁边有一个小按钮（带有图像），以突出显示每个字段的当前值，并允许用户在未提交等情况下直接更改它...一种概述性仪表板上的动态版本。 这样就可以编辑所显示的对象，而无需弹出窗口或更改当前页面。

我没有在网络上找到任何东西，所以我认为这要归功于我不太了解的Javascript。

首先，我不知道是否必须声明链接或按钮来调用更新函数。 那么，接下来会发生什么？

感谢您的阅读和您的答复！

Answer 1

1）您为每个字段（或更好的是，直接单击字段）添加按钮： <div class='editableField'><span>Some text to edit</span></div>

2）在字段上单击，隐藏文本并应用输入字段

$('.editableField').click(function(){
    $(this).append('<input type="text" value="'+$('span', this).text()+'" class="editableInput"/>');
    $('span', this).remove(); // remove this span temporary
});

3）当.editableInput焦点时，使用ajax调用保存字段值：

$(document).on('focusOut', '.editableInput', function(){
    $.ajax({
       url: 'example.com/saveFieldValues.php',
       type: 'post',
       data: {fieldValue: $(this).val()},
       success: function(){
           $(this).parent().append('<span>'+$(this).val()+'</span>'); // return back old span element
           $(this).remove(); // remove unnecessary input field 
       }
    });
});