Question

我目前正在制作一个网站。但是，我遇到了麻烦。我正在使用php进行POST并将填写在表单中的数据放入数据库中。我还在页面中有一个脚本来显示下面表单的内容，以便用户可以复制并粘贴输出，如果他们愿意，可以重新格式化。但他们不能一起工作。

网页代码：

<div class="hero-text col col--2-3">
  <form class="signup-form" action="includes/newref.inc.php" method="POST" name="myform" id="myform"  onsubmit="formFunction(); return false;">
    <h6>Reference!</h6>
    Author: <input type="text" name="author" style="text-transform: capitalize;" value="John Doe" required="1"><br>
    Year created: <input type="text" name="yearcreated" value="13/04/2018" required="1"><br>
    Title: <input type="text" name="title" style="text-transform: capitalize;" value="To make the best pizza" required="1"><br>
    URL: <input type="text" name="url" value="www.example.com"><br>
    Last Accessed: <input type="text" name="lastaccessed" value="05/04/2018" required="1"><br>
    <button type="submit" name="submit">Create</button>
    <button type="reset" name="clear">Clear</button>

    <script>
      function formFunction(){
        var author = document.myform.author.value;
        var yearcreated = document.myform.yearcreated.value;
        var title = document.myform.title.value;
        var url = document.myform.url.value;
        var lastaccessed = document.myform.lastaccessed.value;
        var showData = "- " + author + ". " + yearcreated + ". " + title + ". " + url + ". " + "[Last Accessed: " + lastaccessed + "].";
        document.getElementById('output').innerHTML = showData;
      }
    </script>
  </form>

  <div class="Copy">
    <h6>Copy Here!</h6>
  <div id="output"> </div>
</div>
</div>

PHP代码：

     <?php
#first if
if (isset($_POST['submit'])) {

    include 'dbhref.inc.php';

    $author = mysqli_real_escape_string( $conn , $_POST['author']);
    $yearcreated = mysqli_real_escape_string( $conn , $_POST['yearcreated']);
    $title = mysqli_real_escape_string( $conn , $_POST['title']);
    $url = mysqli_real_escape_string( $conn , $_POST['url']);
    $lastaccessed = mysqli_real_escape_string( $conn , $_POST['lastaccessed']);

  //Error handelers
    //Check for empty field
    #if
    if (empty($author) || empty($yearcreated) || empty($title) || empty($url) || empty($lastaccessed)) {
    header("Location: ../create.php?creation=empty");
    exit();
  } /*else*/ else {
        //Insert the user into the database
      $sql = "INSERT INTO reference (r_author, r_yearcreated, r_title, r_url, r_lastaccessed) VALUES ('$author','$yearcreated','$title','$url','$lastaccessed');";
      mysqli_query($conn , $sql);
            header("Location: ../create.php?-success");
      exit();
    }
} /*else*/ else {
    header("Location: ../create.php?=error");
    exit();
}

问题在于onsubmit="formFunction(); return false;" 然而，这需要将输出保持在屏幕上，因为当转为true时，输出将只显示然后在一秒钟内消失。我只是想知道是否还有另一种方法可以做到这一点？

谢谢你，我感谢任何帮助：）

Answer 1

这就是AJAX的用途。从onsubmit标记中删除<form>属性，然后尝试：

var myform = document.getElementById('myform');
myform.onsubmit = function(event) {
    event.preventDefault();

    var formdata = new FormData(myform);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', myform.action);
    xhr.send(formdata);

    var author = myform.author.value;
    var yearcreated = myform.yearcreated.value;
    var title = myform.title.value;
    var url = myform.url.value;
    var lastaccessed = myform.lastaccessed.value;
    var showData = "- " + author + ". " + yearcreated + ". " + title + ". " + url + ". " + "[Last Accessed: " + lastaccessed + "].";
    document.getElementById('output').innerHTML = showData;

    return false;
}

以html格式

1 个答案: