javascript - contenteditable="true"无法提交到php,该怎么办?
三叔
三叔 2017-07-04 13:46:04
[PHP讨论组]

最近在开发一个富文本编辑器,考虑到textarea只能输入文本,所以我用p的contenteditable="true"属性实现了富文本,可以插入图片,视频等。

但是问题来了,在表单页面:

<form action="test.php" method="post">
<p contenteditable="true" name="zhengwen"></p>
<input type="submit">
</form>

这样做,p里面的内容,根本就无法提交到test.php页面的,echo $_POST[zhengwen];是没输出的。

我怀疑根本就没有提交过来。

大家知道怎么解决吗?求表单提交页面和接收页面的简单代码!!!

三叔
三叔

全部回复(2)
PHP中文网

确实是没提交过去,因为,表单里的提交按钮,只提交表单元素。而<p contenteditable="true">并非表单元素。

如果要将<p contenteditable="true">的信息提交过去,需要自己构造POST请求,我就以jQuery为例:

$('form').submit(function(e) {
    e.preventDefault(); // 拦截HTML的默认表单提交

    var content = $('p[name=zhengwen]').html();
    $.post('....', {zhengwen: content}, functino(data) {
        // 成功回调
    });
});

当然了,jQuery的POST提交还有好多种写法,比如$.ajax()等。

PHP端接收时,和平常一样读取$_POST就可以了。

欧阳克
1、富文本编辑器可以用百度的UEditor
2、正如楼上所说,你可以用ajax来提交,但是这个有一点不好,如果有一百个输入框,难道提交一百个键值对?
3、所以你可以用js的formData对象,图片也可以发送过去,代码如下
    $("#submit").click(function() {
        var x = new FormData(document.getElementById("frm"));//构造方法里面必须是dom对象
        x.append('abc', 123);//追加你的数据
        $.ajax({
            url: '1.php',
            type: 'POST',
            data: x,
            processData: false,  // 告诉jQuery不要去处理发送的数据
            contentType: false   // 告诉jQuery不要去设置Content-Type请求头
        })
        .success(function(data) {
            //代码
        });
    });
4、也可以用serializeArray函数模拟上面的formData对象,代码如下
    var allDatas = $("form").serializeArray();
    allDatas.push({name:'data',value: JSON.stringify(你的数据对象)});//追加的格式必须是name,value形式,打印allDatas的格式就知道了!!!
    $.post(url,allDatas,function(json){//代码
    });
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号