Question

我是一名产品工程师，是编码的新手，但现在我正在通过模板制作投资组合网站。我已经成功填写了表格，并将提交的内容转移到了Google表格中，但是我想做更多的事情。提交表单后，我想将“谢谢页面” thankyou.html嵌入到我网页的现有部门<div id="newform">中。我只知道代码window.location.href，但是它将整个页面重定向到“谢谢”页面，这是我的代码：

<script src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" > 
</script> 
<script type = "text/javascript" >
  $(document).ready(function() {
    // References:
    var $form = $('#myForm');
    var $conf = $('#myConf');
    var $subm = $('#mySubmit');
    var $impt = $form.find(':input').not(':button, :submit, :reset, :hidden');
    // Submit function:
    $form.submit(function() {
      $.post($(this).attr('action'), $(this).serialize(), function(response) {
        // On success, clear all inputs;
        $impt.val('').attr('value', '').removeAttr('checked').removeAttr('selected');
        // Write a confirmation message:
        $conf.html("Form submitted!!");
        // Disable the submit button:
        $subm.prop('disabled', true);
      }, 'json');
      return false;
    });
  }); 
</script>

<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <div id="newform">
    <form id="myForm" action="the script from Google">
      Your name:<br>
      <input type="text" name="name" placeholder="your name" style="width:200px"><br> Your phone:<br>
      <input type="number" name="phone" placeholder="you phone" style="width:200px"><br> Your email:<br>
      <input type="email" name="email" placeholder="your email" style="width:200px"><br> Message:
      <br>
      <input type="textbox" name="message" placeholder="your message" style="width:200px"><br>
      <input type="submit" id="mySubmit" value="submit" onclick="window.location.href = 'https://www.xul.fr/ajax/anotherpage.html';">
    </form>
    <p><span id="myConf">Submit</span></p>
  </div>
</body>

</html>

有人知道提交表单后如何将“ thankyou.html”（或从上例中看到的anotherpage.html）嵌入部门<div id="newform">内吗？

Answer 1

将其添加到}, 'json');行上方：

$('#newform').append('<iframe src="/thankyou.html" name="frame1" id="frame1"></iframe>');

Answer 2

谢谢所有朋友，代码replaceWith对我来说确实有效，这是我的问题的答案：

$('#myForm').replaceWith('<iframe src="https://www.example.com/thankyou.html" name="thankyouframe" id="thankyouframe"></iframe>');

在以HTML提交表单之后，在另一个页面的分区内显示内容

2 个答案: