Question

所以我有一个表格：

<form name="htmlform" method="post" action="test.html">
    <input type="text" id="first" placeholder="First Name" required>
    <input type="text" id="last" placeholder="Last Name" required>
    <input type="email" id="email" placeholder="Email" required>
    <textarea id="comments" name="comments" placeholder="Message" required></textarea>
    <button name="send" type="submit" class="submit">SEND</button>
</form>

在用户提交表单后，通过POST方法将其发送到test.html。这是test.html上的代码。

<div id="targetDiv"></div>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    var first=$("#first").val();
    var last=$("#last").val();
    var email=$("#email").val();
    var comments=$("#comments").val();
    var txt1="Welcome " +first+" "+last;
    var txt2="Your Email is " +email;
    var txt3="Your Message is "+ comments;
    $("#targetDiv").append(txt1+"<br>"+txt2+"<br>"+txt3);
</script>

但是当用户提交时，＃targetDiv总是打印出来：

Welcome undefined undefined
Your Email is undefined
Your Message is undefined

Answer 1

您的表单确实是使用POST请求向服务器发送值。但是，页面test.html与包含表单的页面不同，因此<input>元素不再存在。

您需要编写服务器端代码来处理POST参数并将其插入test.html页面。

或者，您可以使用GET请求发送参数，并检查window.location.queryString属性以解析值。

Answer 2

除非您正在使用服务器，否则您尝试附加值的表单和div需要位于相同的html文件中。同时为您的提交提供一个事件监听器来调用您已有的所有代码。像这样：

{{1}}

Answer 3

Javascript或jquery不是服务器端语言..使用任何服务器端脚本，如php，asp。

如果你想使用jquery做同样的事情，请使用以下方法..

<form name="htmlform" method="post" action="test.html">
    <input type="text" id="first" placeholder="First Name" required>
    <input type="text" id="last" placeholder="Last Name" required>
    <input  type="email" id="email" placeholder="Email" required>
    <textarea id="comments" name="comments" placeholder="Message" required></textarea>
    <button id="button" name="send" type="button" class="submit">SEND</button>
</form> 

<div id="targetDiv">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$('#button').click(function () {
    var first=$("#first").val();
    var last=$("#last").val();
    var email=$("#email").val();
    var comments=$("#comments").val();
    var txt1="Welcome " +first+" "+last;
    var txt2="Your Email is " +email;
    var txt3="Your Message is "+ comments;
    $("#targetDiv").append(txt1+"<br>"+txt2+"<br>"+txt3);
    });
</script>

Answer 4

将其包裹在jQuerys文档就绪功能中，并在用户单击提交按钮时触发该功能。

$(document).ready(function() {

  $(".submit").on("click", function() {

      var first=$("#first").val();
      var last=$("#last").val();
      var email=$("#email").val();
      var comments=$("#comments").val();
      var txt1="Welcome " +first+" "+last;
      var txt2="Your Email is " +email;
      var txt3="Your Message is "+ comments;
      $("#targetDiv").append(txt1+"<br>"+txt2+"<br>"+txt3);
  });
});

表单元素未发送其值

4 个答案: