单击“提交”时显示HTML表单摘要

xesrikrc 于 2023-03-16 发布在其他

关注(0)|答案(4)|浏览(114)

我已经在这个问题上纠结了一段时间，我尝试的解决方案都没有真正起作用。这就是我所需要的：用户填写一个带有文本框、复选框和下拉菜单的表单，一旦用户点击“提交”，所有输入的摘要就会显示出来（或者在一个新的页面上，或者至少在一个新的div中，这样我就可以隐藏它，直到表单被提交）。
这是一个表单（我省略了一些输入字段）：

<form id="myForm">
          <div class="part1">
            <p><label for="vorname">Vorname:</label>
            <input type="text" id="vorname" />
            </p>
            <label for="nachname">Nachname:</label>
            <input type="text" id="nachname" />
            <p>
              <label for="strasse">Strasse und Hausnummer:</label>
              <input type="text" id="strasse" />
            </p>
            <p>
            <ul class="artikel">
              <li><input type="checkbox" id="checkbox1" value="jacken" /><label
                  for="jacken">Jacken</label</li>
              <li>
                <input type="checkbox" id="checkbox2" value="hemden" /><label
                  for="hemden">Hemden</label ></li>
            <label for="gebiet">Wählen Sie ein Krisengebiet aus:</label>
            <select id="optionen">
              <option value="option1">Syrien</option>
              <option value="option2">Ukraine</option><br>
            <input type="submit" value="Absenden" onclick="showSummary(); return false">
          </div>
        </form>

这是JS：

function showSummary() {
    var vorname = document.getElementById("vorname").value;
    var nachname = document.getElementById("nachname").value;
    var strasse = document.getElementById("strasse").value;
    var zusammenfassung = "Vorname: " + vorname + "<br>" +
                        "Nachname: " + nachname + "<br>" +
                        "Straße: " + strasse + "<br>"
var checkbox1 = document.getElementById("checkbox1").checked;
  var checkbox2 = document.getElementById("checkbox2").checked;
  var optionen = document.getElementById("optionen").value;

  document.getElementById("zusammenfassung").innerHTML = zusammenfassung;

}

Html

来源：https://stackoverflow.com/questions/75703656/showing-summary-of-html-form-when-clicking-submit

4条答案

按热度按时间

crcmnpdw1#

const summary = document.querySelector('#summary');

document.forms.myForm.addEventListener('submit', (event) => {
  event.preventDefault(); // Prevent form submission

  const formData = new FormData(event.target); // Create a FormData object with form data

  // Get form field values from FormData object
  const name = formData.get('name');
  const email = formData.get('email');
  const message = formData.get('message');

  // Create summary text
  const summaryText = `Name: ${name}<br>Email: ${email}<br>Message: ${message}`;

  summary.innerHTML = summaryText; // Display summary on the page
});

<form name="myForm">
  <label for="name">Name:</label>
  <input type="text" name="name"><br>
  <label for="email">Email:</label>
  <input type="email" name="email"><br>
  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea><br>
  <input type="submit" value="Submit">
</form>

<div id="summary"></div>

您还可以查看“POST”到PHP文件，该文件将输入变量作为变量输出。

<form action="form-result.php" method="post">

然后一个叫做form-result.php的文件

<?php 
   // turns the posted form in to variables
    $name   = $_POST["name"];
    $email  = $_POST["email"];
    $message= $_POST['message'];

echo "Name: " . $name;
echo "<br>Email: " . $email;
echo "<br>Message: " . $message;
?>

显然，您可以将此方法适应您自己的代码，但会让您对这两种方法有一个非常基本的了解。我个人很喜欢PHP方法，但各有各的方法。

赞(0）回复(0）举报 2023-03-16

bq8i3lrv2#

您错过了id= zusammenfassung的div，因此在form后添加此标记**< /div>**。

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <form id="myForm">
            <div class="part1">
                <p>
                    <label for="vorname">Vorname:</label>
                    <input type="text" id="vorname" />
                </p>
                <p>
                    <label for="nachname">Nachname:</label>
                    <input type="text" id="nachname" />
                </p>
                <p>
                    <label for="strasse">Strasse und Hausnummer:</label>
                    <input type="text" id="strasse" />
                </p>
                <p>
                    <label for="jacken">Jacken</label>
                    <input type="checkbox" id="checkbox1" value="jacken" />
                </p>
                <p>
                    <label for="hemden">Hemden</label>
                    <input type="checkbox" id="checkbox2" value="hemden" />
                </p>
                <p>
                    <label for="gebiet">Wählen Sie ein Krisengebiet aus:</label>
                    <select id="optionen">
                        <option value="option1">Syrien</option>
                        <option value="option2">Ukraine</option>
                    </select>
                </p>
                <p>
                    <input type="submit" value="Absenden" onclick="showSummary(); return false" />
                </p>
            </div>
        </form>

        <div id="zusammenfassung"></div>

        <script>
            function showSummary() {
                var vorname = document.getElementById("vorname").value;
                var nachname = document.getElementById("nachname").value;
                var strasse = document.getElementById("strasse").value;
                var checkbox1 = document.getElementById("checkbox1").checked;
                var checkbox2 = document.getElementById("checkbox2").checked;
                var optionen = document.getElementById("optionen").value;

                var zusammenfassung =
                    "Vorname: " + vorname + "<br>" + "Nachname: " + nachname + "<br>" + "Straße: " + strasse + "<br>" + "checkbox1:" + checkbox1 + "<br>" + "checkbox1:" + checkbox1 + "<br>" + "Krisengebiet: " + optionen + "<br>";
                document.getElementById("zusammenfassung").innerHTML = zusammenfassung;
            }
        </script>
    </body>
</html>

我还为其他选项添加了代码。请在下面**运行代码段

赞(0）回复(0）举报 2023-03-16

c86crjj03#

我想问题是当你点击按钮的时候页面被刷新了。在这种情况下，你可以尝试stopPropagation或者preventDefault事件方法。
像这样使用它：

function clickHandler(event) {
    event.preventDefault();
}

赞(0）回复(0）举报 2023-03-16

eoigrqb64#

当您提交表单时，页面将被重新加载。您应该防止这种默认行为，如下所示：

function showSummary(ev) {
  ev.preventDefault()

  // the rest of your code 
}

赞(0）回复(0）举报 2023-03-16

我来回答

单击“提交”时显示HTML表单摘要

4条答案

相关问题

热门标签

最新问答