How to send HTML form input to JavaScript

Other Questions JavaScript
1

I’m a beginner in programming and I can’t seem to get my code to work as intended. My goal is to collect data from an HTML form filled out by the user and store it in a string variable within my site’s JavaScript when a button is clicked. The issue I face is that I’m restricted from using any server-side scripting; I can only utilize HTML, CSS, and JavaScript, including jQuery. I’ve searched extensively for weeks but haven’t found any useful resources to help me figure this out.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script>
function checkStorage(){
    if(typeof(Storage)!=="undefined"){
        initiateSession();
    } else {
        var container=document.getElementById("content");
        container.style.display="none";
        document.write("Browser Not Supported!");
    }
}

function initiateSession(){
    if(typeof localStorage.userCount !== "undefined"){
        ++localStorage.userCount;
        if(typeof sessionStorage.sessionVar !== "undefined"){
            gatherUserData();
        } else {
            createSessionData();
        }
    } else {
        localStorage.userCount = 1;
        createSessionData();
    }
}

function createSessionData(){
    sessionStorage.sessionTime=new Date().toLocaleString();
    sessionStorage.screenWidth=window.screen.availWidth;
    sessionStorage.screenHeight=window.screen.availHeight;
    gatherUserData(sessionStorage.sessionTime, sessionStorage.screenWidth, sessionStorage.screenHeight);
}

function gatherUserData(time, width, height) {
    // Code to handle user data
}

addEventListener('DOMContentLoaded', checkStorage, false);
</script>
</head>
<body>
<form>
<!-- Insert HTML form elements here -->
</form>
</body>
</html>
2

To collect data from an HTML form and store it in a JavaScript variable, you can handle the submit event of the form using JavaScript. Here's a step-by-step outline of how you might achieve this, including a simple code example:

  1. Create the form elements with unique id attributes so that they can be easily accessed using JavaScript.
  2. Add an onsubmit function to the form to capture form submission.
  3. Use JavaScript to retrieve the values from the input fields and store them in a variable.
<!DOCTYPE html>
<html>
<head>
    <title>Form to JavaScript</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    function gatherUserData() {
        // Select the inputs using their ids
        var name = document.getElementById("name").value;
        var email = document.getElementById("email").value;
        // Store values in JavaScript variables
        var userData = 'Name: ' + name + ', Email: ' + email;
        console.log(userData);  // Use console.log to view data in console
    }

    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('userForm').onsubmit = function(event) {
            event.preventDefault(); // Prevent default form submission
            gatherUserData();       // Call function to gather data
        };
    });
    </script>
</head>
<body>
    <form id="userForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br><br>

        <label for="email">Email:</label>
        <input type="text" id="email" name="email"><br><br>

        <input type="submit" value="Submit">
    </form>
</body>
</html>

In this example, when the submit button is clicked, the onsubmit function prevents the default form submission, allowing you to gather the input values with JavaScript and concatenate them into a string. You can further process this string or use it as needed within your application.

3

You can send form input to JavaScript by using an onsubmit function to capture the data. Here's a simplified solution:

<!DOCTYPE html>
<html>
<head>
    <title>Form Data</title>
    <script>
    function gatherUserData() {
        // Access form inputs by id
        var inputName = document.getElementById('nameInput').value;
        var inputEmail = document.getElementById('emailInput').value;
        // Store inputs in a variable
        var userData = `Name: ${inputName}, Email: ${inputEmail}`;
        console.log(userData); // Output to console
    }
    
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('userForm').onsubmit = function(event) {
            event.preventDefault(); // Prevent default action
            gatherUserData(); // Call the function
        };
    });
    </script>
</head>
<body>
    <form id="userForm">
        <label for="nameInput">Name:</label>
        <input type="text" id="nameInput"><br>
        <label for="emailInput">Email:</label>
        <input type="email" id="emailInput"><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>