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