Javascript 从按钮上传信息

Question

我正在制作一个在 php(phtml View 文件)中生成的概括头带，如下所示:

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