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

Html – Function to print out to a div from user input

The assignment is to create a form, alert the user if they have not filled in all the fields, then assign each field into an individual variable and create an object from it. Then, prompt the user to enter a number from 2-10 and a word and display the word as many times as the number that was input, along with the information that was input by the user.

After the user has input everything, and submits the final prompt, the field just resets to the beginning.

My understanding is using form action="#" prevents it from actually being submitted, and instead does the actions within the functions.

I would appreciate any help.

<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" href="css/form.css">
    <title>Form</title>
</head>

<body>
        <form action="#" method="post" id="my-form">
        <fieldset>
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="fname">
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lname">
        <label for="age">Age</label>
        <input type="text" id="age" name="age">
        <label for="language">Language</label>
        <select id="language" name="language">
            <option value="english">English</option>
            <option value="spanish">Spanish</option>
            <option value="french">French</option>
            <option value="mandarin">Mandarin</option>
        </select>
        <label for="email">Enter your email:</label>
        <input type="email" id="email" name="email">
        
        <input type="submit" id="submit-btn" value="Submit">
        </fieldset>
        </form>
        
        <div id="myDiv" name="myDiv"></div>
        
        <script src="js/midterm.js"></script>
</body>
</html>

let person;

 function getInput() {
     'use strict';
     
     let fname = document.getElementById('fname').value;
    
     let lname = document.getElementById('lname').value;
    
     let age = document.getElementById('age').value;

     let email = document.getElementById('email').value;
     
     if(fname == "" || lname == "" || age == ""|| email == "")
        {
            alert("Please fill in all fields.");
        }
        
     else{
            person = {
           "fname": fname,
           "lname": lname,
           "age": age,
           "email": email,
          };
     }
    return false;
 };

function displayUserInfo() {
    'use strict';

    let input;
    let number;
    let chosenWord;

    do {
      input = prompt("Please enter a number between 2-10");
    } 
    while (input < 2 || input > 10);
    
    number = input.value;
    
    inputWord = prompt("Please enter any word of your choosing");
    
    chosenWord = inputWord.value;
    
    document.getElementById('myDiv').innerHTML += person.fname + " " + person.lname +
    " " + person.email + " " + person.age + " " + person.language;
    
    for(let x = 0; x < number; x++)
    {
        document.getElementById('myDiv').innerHTML += 
        inputWord + "-" + x + " ";
    }
    
    
    
};

function init() {
    'use strict';
    document.getElementById('submit-btn').onclick = getInput;
    document.getElementById('my-form').onsubmit = displayUserInfo;
}
window.onload = init;
Tags:

2

Answers


  1. 0

    You might have to add a call to event.preventDefault() in your form submit handler. In this case, you will also have to pass the submit event as an argument to the function, like so:

    function displayUserInfo(event) {
  event.preventDefault()
  // ...
}

    This stops the form from performing the default actions (such as refreshing the page) when it is submitted.
    If you do this, then I believe you will actually not need to set the action attribute as it will be redundant (the action will never be carried out), so you can leave it out altogether along with the method attribute from the <form> element.

    <form id="my-form">
  <!-- ... -->
</form>
    Login or Signup to reply.
  2. 0

    • You can add the required attribute to the input fields to ensure
      that the user fills in all the required fields. That will give an
      alert on the field that it should be required.

    • Use the getInput function to validate user input before proceeding. If one of the field is empty it will return false.

    • You need to addEventListener to handle the form submission and
      prevent the default form submission behavior using event.preventDefault() method OR call displayUserInfo(evt) { evt.preventDefault(); } in your form submit handler as mentioned by @MagicalCornFlake.

    • You have also missed to add Language field value.

    I have made changes to your code according to your need:

    let person;

function getInput() {
    'use strict';

    let fname = document.getElementById('fname').value;
    let lname = document.getElementById('lname').value;
    let age = document.getElementById('age').value;
    let email = document.getElementById('email').value;

    if (fname === "" || lname === "" || age === "" || email === "") {
        alert("Please fill in all fields.");
        return false;
    } else {
        person = {
            "fname": fname,
            "lname": lname,
            "age": age,
            "email": email,
            "language": document.getElementById('language').value,
        };
        return true;
    }
}

function displayUserInfo() {
    'use strict';

    if (!getInput()) {
        return;
    }

    let input;
    let number;
    let chosenWord;

    do {
        input = prompt("Please enter a number between 2-10");
    } while (input < 2 || input > 10);

    number = parseInt(input); // Parse the input to an integer

    chosenWord = prompt("Please enter any word of your choosing");

    document.getElementById('myDiv').innerHTML = ""; // Clear previous content

    for (let x = 0; x < number; x++) {
        document.getElementById('myDiv').innerHTML += chosenWord + "-" + x + " ";
    }

    // Display user information
    document.getElementById('myDiv').innerHTML += "<br>" +
        "First Name: " + person.fname + "<br>" +
        "Last Name: " + person.lname + "<br>" +
        "Age: " + person.age + "<br>" +
        "Email: " + person.email + "<br>" +
        "Language: " + person.language; // Language was missing in your code
}

function init() {
    'use strict';
    document.getElementById('my-form').addEventListener('submit', function (event) {
        // Prevent form submission
        event.preventDefault();
        displayUserInfo();
    });
}

window.onload = init;
    <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/form.css">
    <title>Form</title>
</head>
<body>
    <form action="#" method="post" id="my-form">
        <fieldset>
            <label for="fname">First Name</label>
            <input type="text" id="fname" name="fname" required>
            
            <label for="lname">Last Name</label>
            <input type="text" id="lname" name="lname" required>
            
            <label for="age">Age</label>
            <input type="text" id="age" name="age" required>
            
            <label for="language">Language</label>
            <select id="language" name="language">
                <option value="english">English</option>
                <option value="spanish">Spanish</option>
                <option value="french">French</option>
                <option value="mandarin">Mandarin</option>
            </select>
            
            <label for="email">Enter your email:</label>
            <input type="email" id="email" name="email" required>
            
            <input type="submit" id="submit-btn" value="Submit">
        </fieldset>
    </form>

    <div id="myDiv" name="myDiv"></div>

    <script src="js/midterm.js"></script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search