Javascript发布到表单 - 如果隐藏字段,则无法工作

时间:2015-02-11 15:43:25

标签: javascript php ajax forms

我在类似的问题上阅读了建议,然后我就遵循了它。我将一个值从javascript发布到要传递给PHP的表单。如果我将值传递给textarea字段而不是隐藏字段,那么这一切都完美无缺。

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script src="updatepage.js"></script>
<head>

<body onload="loadbio()">
<form action="http://localhost/restricted/update.php" method="POST">
<input type="hidden" id="hiddenbio" name="oldbio">      <!-- Hidden to pass to PHP  -->
Biography: <br /><textarea id="bio" rows="8" cols="60" name="newbio"></textarea>
<br /><br />
<input type="submit" value="Submit"> 
</form>

</body>
</html> 

JS

function loadbio () {
$("#bio").load('randomperson.html #biobox p') 
setTimeout (function () {
    var biotopass = $("#bio").val();
    $.post("biochange.html", { oldbio: biotopass });
    }, 200);
}

PHP

<html>
<body>
Old Bio: <?php echo $_POST["oldbio"]; ?><br />
New Bio: <?php echo $_POST["newbio"]; ?><br />
</body>
</html> 

所以loadbio()出去并从文件中提取旧传记并将其发布到biochange.html。 HTML在人们更改文本区域的文本区域中显示旧传记 这就是问题所在,我需要在更改之前存储旧值的值。如果我将隐藏的输入更改为textarea,它将在PHP中回显。如果我把它隐藏起来就不会得到回应。

3 个答案:

答案 0 :(得分:0)

我注意到的两件事:

  1. 您的<input type="hidden" id="hiddenbio" name="oldbio">没有value属性。
  2. 使用此行var biotopass = $("#bio").val();,您实际上只是抓住新生物将其发送到服务器,而忽略旧生物
  3. 所以你没有发送任何东西,即使你做了,也不会发送任何东西。所以,一旦你给隐藏的输入一个值,你需要做的就是发送它。发送表单的所有元素实际上是一个巧妙的技巧(如果您更改HTML并且它自动类似于正常发送表单的方式,您不必更新JS),更改您的AJAX请致电:

    $.ajax({
        type: "POST",
        url: "biochange.html",
        data: $(form).serialize()
    })
    

答案 1 :(得分:0)

问题是.load将数据加载到元素的.innerHTML中。对于<textarea>元素,.innerHTML是表单中提交的数据,<input> value属性是表单中提交的内容。

这就解释了为什么它适用于<textarea>而不是<input>

要解决此问题,请使用.get代替.load

$.get("randomperson.html #biobox p", function(x){
  $("#oldbio, #newbio").val(x);
});

你的&#34;#oldbio&#34;隐藏

答案 2 :(得分:-1)

您未发布newbio。在这一行:

$.post("biochange.html", { oldbio: biotopass });
}, 200);

您指定只想发布oldbio。只需将其调整为:

function loadbio () {
    $("#bio").load('randomperson.html #biobox p') 
    setTimeout (function () {
        var biotopass = $("#bio").val();
        var hiddenbio = $("#hiddenbio").val();
        $.post("biochange.html", { oldbio: hiddenbio, newbio: biotopass });
        }, 200);
}