Javascript 在表单中DIV并将它们发布在同一页上_Javascript_Php_Jquery_Html_Ajax

Javascript 在表单中DIV并将它们发布在同一页上

javascript php jquery html ajax

Javascript 在表单中DIV并将它们发布在同一页上,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,还有阿贾克斯 <form action="" method="post"> <div id="MG_TextBox" contenteditable="true" name="textBox1" style="width:600px;height:400px; background-color:#ECCBCB;"> Hello</div> <input type="hidden" name="hiddeninput" id="MH_Hid

还有阿贾克斯

<form action="" method="post">
    <div id="MG_TextBox" contenteditable="true" name="textBox1" style="width:600px;height:400px; background-color:#ECCBCB;"> Hello</div>
    <input type="hidden" name="hiddeninput" id="MH_Hiddeninput" >
    <input type="submit" id="MG_Submit" name="submit" value="Submit"/>
    </form>

然后是php

<script>
$(function(){
    $('#MG_Submit').click(function () {
        var MG_Text = $('#MG_TextBox').html();
        $('#MG_Hiddeninput').val(MG_Text);
        return true;
    });
});
</script>

我想将DIV内容转移到隐藏输入。随后，PHP将它们打印在同一页上。即行动=

我做错了什么

版本2。还是不行

<?
    if ($_POST['hiddeninput'])  {
        print $_POST['hiddeninput'];
        }
?>

试试这个，您不希望表单提交，而是希望AJAX启动。这样做可以阻止单击执行其默认行为，这将提交表单

<?
if ($_POST['hiddeninput'])  { print $_POST['hiddeninput']; }
?>

<html>
<head> 
<script>
$(function(){
    $('#MG_Form').on("submit", function (e) {
        var MG_Text = $('#MG_TextBox').html();
        $('#MG_Hiddeninput').val(MG_Text);
        e.preventDefault();
    });
});
</script>
</head>

<body>
  <form action="" method="post" id="MG_Form" enctype="multipart/form-data">
    <div id="MG_TextBox" contenteditable="true" name="textBox1" style="width:300px;height:200px; background-color:
    #9AB5BF;"> Hello</div>
    <input type="hidden" name="hiddeninput" id="MG_Hiddeninput" >
    <input type="submit" id="MG_Submit" name="submit" value="Submit"/>
  </form>
</body>
</html>

您可能希望向表单中添加一个id，以便$'form'选择器更具体。因为这可能会破坏页面上的其他表单。

首先，您尝试选择一个不存在MG_Hiddeninput的元素。更改为：

<script>
$(function(){
    $('form').on("submit", function (e) {
        var MG_Text = $('#MG_TextBox').html();
        $('#MG_Hiddeninput').val(MG_Text);
        e.preventDefault();
    });
});
</script>

或者更改隐藏输入的id以匹配选择器

<script>
$(function(){
    $('#MG_Submit').click(function () {
        var MG_Text = $('#MG_TextBox').html();
        $('#MH_Hiddeninput').val(MG_Text);
        e.preventDefault(); 
        return true;
    });
});
</script>

还添加e.preventDefault以防止表单过帐。您提到了ajax，但我在这里看不到任何效果。

php无法对当前加载的页面执行任何操作。还要注意的是，没有显示任何ajax，下面显示的只是一个单击事件处理程序

<input type="hidden" name="hiddeninput" id="MG_Hiddeninput" >