Question 44191 in Html Question posted in
Some basic documentation can be found here.

Showing summary of HTML form when clicking submit

I have been stuck on this issue for a while now and none of the solutions I try really work. This is what I need: The user fills out a form with textboxes, checkboxes and a dropdown-menu. Once the user clicks "submit", a summary of all the input should be shown (either on a new page or at least in a new div so I can hide it until the form has been submitted).

This is the form (I left out some of the input fields):

 <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>

And this is the 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;

}
Tags:

4

Answers


  1. 0

    I suppose the problem is that the page is refreshed when you click the button. In this case, you can try stopPropagation or preventDefault methods of event.

    Use it like this:

    function clickHandler(event) {
    event.preventDefault();
}
    Login or Signup to reply.
  2. 0

    When you submit the form the page will be reloaded.
    You should prevent this default behaviour, like so:

    function showSummary(ev) {
  ev.preventDefault()

  // the rest of your code 
}
    Login or Signup to reply.
  3. 0

    You missed the div which have id= zusammenfassung, So add this tag
    <div id="zusammenfassung" >< /div> after form.

    <!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>

    and I also added code for other options. Please Run Snippets below

    Login or Signup to reply.
  4. 0 
    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>

    You could also look at "POST" to a PHP file that outputs the input variables as variables?

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

    then a file called 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;
?>

    You can obviously adapt this to your own code but gives you a very basic understanding of both methods. I personally LOVE the PHP method but each to their own.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search