如何将 <div> 处理为表单 <input>

Question

我所做的是：

HTML

<form>
    <div id="textBox" contenteditable="true" name="textBox"><?php echo $storyText; ?>
    </div>
    <textarea id="hiddeninput" name="hiddeninput"></textarea>
    <input type="submit" id="save" name="save" value="Submit"/>
</form>

Javascript

$('#save').click(function () {
    var mysave = $('#textBox').html();
    $('#hiddeninput').val(mysave);
    $("form:first").submit();
    $('#hiddeninput').append(mysave);
    alert($('#hiddeninput').val());
});

因此，警报和附加都显示正确的信息，但是当我提交时它不会将#hiddeninput 保存为 php 变量。本来我是把它当成隐藏输入法的，但我想表明不管我做什么它都不会发帖，

Answer 1

仅凭经验，您不能以POST 的形式提交div 值。

您可以将其更改为文本区域，如果您想限制用户对其进行编辑，请将其设置为disabled。

或者，您可以使用 javascript 提交表单，然后从#hiddeninput 中提取值。

Answer 2

我相信您的表单在您的 js 代码有机会运行之前就已提交。由于您是从 jQuery 手动提交，因此请尝试阻止按钮的默认事件（也提交表单）：

$('#save').click(function(e) {
    e.preventDefault();
    var mysave = $('#textBox').html();
    $('#hiddeninput').val(mysave);
    $("form:first").submit();
});

Answer 3

尝试绑定提交事件而不是点击事件。可能发生的是表单在设置 textarea 的值之前提交。

$('form').submit(function(){
    var mysave = $('#textBox').html();
    $('#hiddeninput').val(mysave);
});

我使用 method="get" 测试了这个示例，并从 div 中获取了 html 以显示在 URL 中。

Answer 4

您的代码几乎可以正常工作。 但我宁愿使用普通的<input type="hidden">，并且您不需要为您的表单触发submit，只需将值放在隐藏字段中即可。

根据您的标记，稍作修改

<form action="showrequest.php">
<div id="textBox" contenteditable="true" name="textBox" style="width:300px;height:100px;">
</div>
<textarea id="hiddeninput" name="hiddeninput"></textarea>
<input type="submit" id="save" name="save" value="Submit"/>
</form>

js

$(function(){
    $('#save').click(function () {
        var mysave = $('#textBox').html();
        $('#hiddeninput').val(mysave);
    });
});

var_dump($_REQUEST) 在 php 端给出

array(2) {
  ["hiddeninput"]=>
  string(4) "test"
  ["save"]=>
  string(6) "Submit"
}

Answer 5

这是提交您想要的任何 div 内容元素的通用方法（请参阅下面的注释）：

<form method="post" id="f">
<div id="txt" addToForm="f" contenteditable spellcheck="true" style="height:100px;width:300px;font-family:arial,sans serif;border:1px solid black;font-weight:normal;overflow-y:auto;"
></div><br />
<input type="button" value="Go" id="btnGo">
</form>
<script type="text/javascript">
$(document).ready(function(){
    $("#btnGo").click(function(){
        $("div[addToForm]").each(function(){
            var tId=$(this).prop("id");
            $(this).after("<input type='hidden' name='"+tId+"' id='hdn"+tId+"'>");
            $("#hdn"+tId).val($(this).html());
        });
        ("#f").submit();
    });
});
</script>

注 1) 使用 <input type="hidden"> 保留任何格式（IE11 允许超过 FF）。如果您希望删除所有格式，包括用户按 Enter/Return 的 CFLF（即<br>'s），请改用<textarea style="display:none;"></textarea>。 注意 2) 确保首先成功完成验证，否则您将得到多个具有相同名称的输入。