A step-by-step guide on incorporating a div panel in HTML and JavaScript triggered by a submit button click within an HTML form

Question

A step-by-step guide on incorporating a div panel in HTML and JavaScript triggered by a submit button click within an HTML form

For the past 3 to 4 days, I've been grappling with an issue. I've put together a student registration form using HTML and JavaScript. The form includes validation through JavaScript and string concatenation to submit all form values and display submission via an alert. However, my dilemma lies in wanting to showcase all submission values in a div panel but lacking the expertise to do so. I'm reaching out for some guidance and assistance in modifying my JavaScript and HTML code to incorporate a div panel upon clicking the submit button. I'm attempting to follow the steps outlined on this site: W3schools link to create div panel. Could someone please lend a hand in integrating the W3schools code into mine?

This is my HTML Code:

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Reg Form</title>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
        <script type="text/javascript" src="reg.js"></script>
    </head>
    
    <body onload="document.registration.inputfirstname.focus();">
    
        <div class="container">
            <div class="row">
                <form class="form-horizontal" name="registration" onSubmit="return formValidation();">
                    <fieldset>
                        <legend>
                            <center>Registration</center>
                        </legend>
    
                        [...]
    
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="submit"></label>
                            <div class="col-md-4">
                                <button id="submit" onclick="showme()" name="submit" class="btn btn-success">Submit</button>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </body>
    
    </html>

This is my JavaScript Code:

function formValidation() {
        [...]

    function showme() {
    
        var firstname = document.getElementById('inputfirstname');
        var lastname = document.getElementById('inputlastname');
        var rollno = document.getElementById('inputrollno');
        var Class = document.getElementById('inputclass');
        var email = document.getElementById('inputemail');
    
        var str = 'Hello ' + inputfirstname.value + inputlastname.value +', Your Roll no is' + inputrollno.value +',You have successfully registered for this course';
        alert(str); 
    }

I'd appreciate any help or suggestions in resolving this issue. Thank you!

javascript html css

Answer 1

Answer №1

Take a look at this piece of code

function validateForm() {
    var firstName = document.registration.firstName;
    var lastName = document.registration.lastName;
    var rollNo = document.registration.rollNo;
    var classInput = document.registration.classInput;
    var email = document.registration.email;

    if (validateFirstName(firstName, 5, 12)) {
        if (validateLastName(lastName, 6, 12)) {
            if (allNumeric(rollNo)) {
                if (isAlphanumeric(classInput)) {
                    if (validateEmail(email)) {
                        alert('Form Submitted Successfully');
                        return true;
                    }
                }
            }
        }
    }
    return false;
}

function validateFirstName(firstName, minLen, maxLen) {
    var inputLen = firstName.value.length;
    if (inputLen == 0 || inputLen >= maxLen || inputLen < minLen) {
        alert("First Name should not be empty / length should be between " + minLen + " to " + maxLen);
        firstName.focus();
        return false;
    }
    return true;
}

// Repeat for other validation functions

var submitButton = document.getElementById('submit');
function showDetails() {

    var first = document.getElementById('firstName');
    var last = document.getElementById('lastName');
    var rn = document.getElementById('rollNo');
    var cl = document.getElementById('classInput');
    var em = document.getElementById('email');

    var details = 'Hello,' + firstName.value + ' ' + lastName.value + ', Your Roll no is' + rollNo.value + ',You have successfully registered for this course';
    
    document.getElementById('formData').innerHTML = 'First Name : ' + first.value + '<br>Last Name : ' + last.value + '<br>Roll No : ' + rn.value + '<br>Class : ' + cl.value + '<br>Email : ' + em.value ;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script type="text/javascript" src="reg.js"></script>
</head>

<body onload="document.registration.firstName.focus();">

    <div class="container">
        <div class="row">
            <form class="form-horizontal" name="registration" onSubmit="return validateForm();">
                <fieldset>
                    <legend>
                        <center>Registration Form</center>
                    </legend>

                    <div class="form-group">
                        <label class="col-md-4 control-label" for="firstName">First Name</label>
                        <div class="col-md-5">
                            <input type="text" name="firstname" id="firstName" placeholder="First Name" class="form-control input-md">

                        </div>
                    </div>

                    // Add HTML elements for Last Name, Roll No, Class, Email inputs

                    <div class="form-group">
                        <label class="col-md-4 control-label" for="submitButton"></label>
                        <div class="col-md-4">
                            <button id="submit" onclick="showme()" name="submit" class="btn btn-success">Submit</button>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
        <div id="formData"></div>
    </div>
</body>

</html>

Answer 2

Take a look at this piece of code

function validateForm() {
    var firstName = document.registration.firstName;
    var lastName = document.registration.lastName;
    var rollNo = document.registration.rollNo;
    var classInput = document.registration.classInput;
    var email = document.registration.email;

    if (validateFirstName(firstName, 5, 12)) {
        if (validateLastName(lastName, 6, 12)) {
            if (allNumeric(rollNo)) {
                if (isAlphanumeric(classInput)) {
                    if (validateEmail(email)) {
                        alert('Form Submitted Successfully');
                        return true;
                    }
                }
            }
        }
    }
    return false;
}

function validateFirstName(firstName, minLen, maxLen) {
    var inputLen = firstName.value.length;
    if (inputLen == 0 || inputLen >= maxLen || inputLen < minLen) {
        alert("First Name should not be empty / length should be between " + minLen + " to " + maxLen);
        firstName.focus();
        return false;
    }
    return true;
}

// Repeat for other validation functions

var submitButton = document.getElementById('submit');
function showDetails() {

    var first = document.getElementById('firstName');
    var last = document.getElementById('lastName');
    var rn = document.getElementById('rollNo');
    var cl = document.getElementById('classInput');
    var em = document.getElementById('email');

    var details = 'Hello,' + firstName.value + ' ' + lastName.value + ', Your Roll no is' + rollNo.value + ',You have successfully registered for this course';
    
    document.getElementById('formData').innerHTML = 'First Name : ' + first.value + '<br>Last Name : ' + last.value + '<br>Roll No : ' + rn.value + '<br>Class : ' + cl.value + '<br>Email : ' + em.value ;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script type="text/javascript" src="reg.js"></script>
</head>

<body onload="document.registration.firstName.focus();">

    <div class="container">
        <div class="row">
            <form class="form-horizontal" name="registration" onSubmit="return validateForm();">
                <fieldset>
                    <legend>
                        <center>Registration Form</center>
                    </legend>

                    <div class="form-group">
                        <label class="col-md-4 control-label" for="firstName">First Name</label>
                        <div class="col-md-5">
                            <input type="text" name="firstname" id="firstName" placeholder="First Name" class="form-control input-md">

                        </div>
                    </div>

                    // Add HTML elements for Last Name, Roll No, Class, Email inputs

                    <div class="form-group">
                        <label class="col-md-4 control-label" for="submitButton"></label>
                        <div class="col-md-4">
                            <button id="submit" onclick="showme()" name="submit" class="btn btn-success">Submit</button>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
        <div id="formData"></div>
    </div>
</body>

</html>

Answer 3

Answer №2

To easily display content, you can create a div with an id attribute like so:

<div id="formData"></div>

Then, whenever you need to show something:

var firstName = document.getElementById('inputFirstName');
document.getElementById('formData').innerText = 'First Name: ' + firstName.value;

Answer 4

To easily display content, you can create a div with an id attribute like so:

<div id="formData"></div>

Then, whenever you need to show something:

var firstName = document.getElementById('inputFirstName');
document.getElementById('formData').innerText = 'First Name: ' + firstName.value;

Answer 5

Answer №3

One way to display student details is by creating a row with 5 cells inside it. You can then use the showme() function to populate these cells with values.


                       <div class="row" id="studentInfo" sytle="display: 
                         none;">
                        <div class="col-sm-2" id="firstName"></div>
                        <div class="col-sm-2" id="lastName"></div>
                        <div class="col-sm-2" id="rolNo"></div>
                          <div class="col-sm-2" id="class"></div>
                         <div class="col-sm-2" id="email"></div>

                       </div>

                function showme() {

                    var firstname = document.getElementById('inputfirstname');
                    var lastname = document.getElementById('inputlastname');
                    var rollno = document.getElementById('inputrollno');
                    var Class = document.getElementById('inputclass');
                    var email = document.getElementById('inputemail');

                 //assign input values to respective div elements in the row

                  document.getElementById("firstName").text(firstname.value);
                  document.getElementById("lastName").text(lastname.value);
                  document.getElementById("rolNo").text(rollno.value);
                  document.getElementById("class").text(Class.value);
                  document.getElementById("email").text(email.value);
                  //display the hidden div
                  document.getElementById("studentInfo").style.display = "block";
               }

Answer 6

One way to display student details is by creating a row with 5 cells inside it. You can then use the showme() function to populate these cells with values.


                       <div class="row" id="studentInfo" sytle="display: 
                         none;">
                        <div class="col-sm-2" id="firstName"></div>
                        <div class="col-sm-2" id="lastName"></div>
                        <div class="col-sm-2" id="rolNo"></div>
                          <div class="col-sm-2" id="class"></div>
                         <div class="col-sm-2" id="email"></div>

                       </div>

                function showme() {

                    var firstname = document.getElementById('inputfirstname');
                    var lastname = document.getElementById('inputlastname');
                    var rollno = document.getElementById('inputrollno');
                    var Class = document.getElementById('inputclass');
                    var email = document.getElementById('inputemail');

                 //assign input values to respective div elements in the row

                  document.getElementById("firstName").text(firstname.value);
                  document.getElementById("lastName").text(lastname.value);
                  document.getElementById("rolNo").text(rollno.value);
                  document.getElementById("class").text(Class.value);
                  document.getElementById("email").text(email.value);
                  //display the hidden div
                  document.getElementById("studentInfo").style.display = "block";
               }

A step-by-step guide on incorporating a div panel in HTML and JavaScript triggered by a submit button click within an HTML form

Answer №1

Answer №2

Answer №3

Similar questions

Tips for choosing an option in a form using Selenium with JavaScript

NextJS with the added option of customizable CSS styling

Manipulating the DOM by linking to a div and using JSON information for opening and closing

Transferring data from JavaScript to PHP using the $.ajax method for storing information in a MySQL database

Placing a div over a JavaScript element

"Implementing a function to show input fields and mark them as mandatory when a specific option is

Naming a JSON object twice

Loading a div using Ajax within a frame

Streamlining the Process of Uploading Files using Selenium WebDriver

In search of a customized CSS design for drop-down lists and menus inspired by Apple's sleek aesthetic

Excessive screen height causes the CSS box layout to overflow

Retrieving the Windows user's username via Typescript or Javascript is an essential

I am looking to transmit a JWT token to my backend using next-auth

Guide to manipulating DOM elements with Angular.js: inserting or deleting elements using createElement

Saving words inside a text box using a variable

One controller displays ng-repeats while the other does not

What is the best way to display the user login in the center of a page with all necessary controls

Change the default values for grid column configurations in Ext JS globally

Enhance Your jQuery Skills by Adding Custom Directories to Anchor Links

When accessing files.fileName.path in formidable, it may result in returning undefined