个人中心
gpt4 book ai didi

javascript - 单击html表单中的提交按钮时如何在html和javascript中添加div面板？

转载 作者：太空宇宙 更新时间：2023-11-04 07:09:36 25 4
gpt4 key购买 nike

我在过去 3 到 4 天内被困在一个问题上。我已经通过 html 和 javascript 创建了一个学生注册表。我首先通过 javascript 包含验证，然后我在 javascript 中包含字符串连接以提交表单的所有值并通过警报显示它的提交。现在这里的问题是我想在 div 面板中显示所有提交值，但我不能这样做，因为我是这个领域的业余爱好者，我需要很少的指导和帮助来制作 javascript 和 html 代码以在提交时包含 div 面板按钮。我正在尝试关注此网站:W3schools link to make div panel .谁能帮我在我的代码中包含 w3schools 代码。

我的 HTML 代码:

<!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="inputfirstname">First Name</label>
                            <div class="col-md-5">
                                <input type="text" name="firstname" id="inputfirstname" placeholder="First Name" class="form-control input-md">
    
                            </div>
                        </div>
    
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="inputlastname">Last Name</label>
                            <div class="col-md-5">
                                <input type="text" name="lastname" id="inputlastname" placeholder="Last Name" class="form-control input-md">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="inputrollno">Roll No</label>
                            <div class="col-md-5">
                                <input type="text" name="textinput" id="inputrollno" placeholder="Roll No" class="form-control input-md">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="inputclass">Class</label>
                            <div class="col-md-5">
                                <input type="text" name="textinput" id="inputclass" placeholder="Class" class="form-control input-md">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="inputemail">Email</label>
                            <div class="col-md-5">
                                <input type="text" name="email" id="inputemail" placeholder="E-Mail" class="form-control input-md">
    
                            </div>
                        </div>
    
                        <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>

我的 Javascript 代码:

function formValidation() {
        var inputfirstname = document.registration.inputfirstname;
        var inputlastname = document.registration.inputlastname;
        var inputrollno = document.registration.inputrollno;
        var inputclass = document.registration.inputclass;
        var inputemail = document.registration.inputemail;
    
    
    
        if (firstname_validation(inputfirstname, 5, 12)) {
            if (lastname_validation(inputlastname, 6, 12)) {
                if (allnumeric(inputrollno)) {
                    if (alphanumeric(inputclass)) {
                        if (ValidateEmail(inputemail)) {
                            alert('Form Successfully Submitted');
                            return true;
    
                        }
                    }
                }
            }
        }
        return false;
    
    }
    
    function firstname_validation(inputfirstname, mx, my) {
        var input_firstname_len = inputfirstname.value.length;
        if (input_firstname_len == 0 || input_firstname_len >= my || input_firstname_len < mx) {
            alert("First Name should not be empty / length should be between " + mx + " to " + my);
            inputfirstname.focus();
            return false;
        }
        return true;
    }
    
    function lastname_validation(inputlastname, mx, my) {
        var inputlastname_len = inputlastname.value.length;
        if (inputlastname_len == 0 || inputlastname_len >= my || inputlastname_len < mx) {
            alert("Last Name should not be empty / length should be between " + mx + " to " + my);
            inputlastname.focus();
            return false;
        }
        return true;
    }
    
    function allnumeric(inputrollno) {
        var numbers = /^[0-9]+$/;
        if (inputrollno.value.match(numbers)) {
            return true;
        } else {
            alert('Roll No must be in numbers only');
            inputrollno.focus();
            return false;
        }
    }
    
    function alphanumeric(inputclass) {
        var letters = /^[0-9a-zA-Z]+$/;
        if (inputclass.value.match(letters)) {
            return true;
        } else {
            alert('Class must have alphanumeric characters only');
            inputclass.focus();
            return false;
        }
    }
    
    function ValidateEmail(inputemail) {
        var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        if (inputemail.value.match(mailformat)) {
            return true;
        } else {
            alert("You have entered an invalid email address!");
            inputemail.focus();
            return false;
        }
    }
    var button = document.getElementById('submit');
    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); 
    }

请帮我解决这个问题？

最佳答案

检查这段代码

function formValidation() {
    var inputfirstname = document.registration.inputfirstname;
    var inputlastname = document.registration.inputlastname;
    var inputrollno = document.registration.inputrollno;
    var inputclass = document.registration.inputclass;
    var inputemail = document.registration.inputemail;



    if (firstname_validation(inputfirstname, 5, 12)) {
        if (lastname_validation(inputlastname, 6, 12)) {
            if (allnumeric(inputrollno)) {
                if (alphanumeric(inputclass)) {
                    if (ValidateEmail(inputemail)) {
                        alert('Form Successfully Submitted');
                        return true;

                    }
                }
            }
        }
    }
    return false;

}

function firstname_validation(inputfirstname, mx, my) {
    var input_firstname_len = inputfirstname.value.length;
    if (input_firstname_len == 0 || input_firstname_len >= my || input_firstname_len < mx) {
        alert("First Name should not be empty / length should be between " + mx + " to " + my);
        inputfirstname.focus();
        return false;
    }
    return true;
}

function lastname_validation(inputlastname, mx, my) {
    var inputlastname_len = inputlastname.value.length;
    if (inputlastname_len == 0 || inputlastname_len >= my || inputlastname_len < mx) {
        alert("Last Name should not be empty / length should be between " + mx + " to " + my);
        inputlastname.focus();
        return false;
    }
    return true;
}

function allnumeric(inputrollno) {
    var numbers = /^[0-9]+$/;
    if (inputrollno.value.match(numbers)) {
        return true;
    } else {
        alert('Roll No must be in numbers only');
        inputrollno.focus();
        return false;
    }
}

function alphanumeric(inputclass) {
    var letters = /^[0-9a-zA-Z]+$/;
    if (inputclass.value.match(letters)) {
        return true;
    } else {
        alert('Class must have alphanumeric characters only');
        inputclass.focus();
        return false;
    }
}

function ValidateEmail(inputemail) {
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if (inputemail.value.match(mailformat)) {
        return true;
    } else {
        alert("You have entered an invalid email address!");
        inputemail.focus();
        return false;
    }
}
var button = document.getElementById('submit');
function showme() {

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

    var str = 'Hello s ' + inputfirstname.value + inputlastname.value +', Your Roll no is' + inputrollno.value +',You have successfully registered for this course';
    //alert(str);
    
    document.getElementById('formData').innerHTML = 'First Name : ' + firstname.value + '<br>Last Name : ' + lastname.value + '<br>Roll No : ' + rollno.value +'<br>Class : ' + classInput.value + '<br>Email : ' + email.value ;
}
<!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="inputfirstname">First Name</label>
                        <div class="col-md-5">
                            <input type="text" name="firstname" id="inputfirstname" placeholder="First Name" class="form-control input-md">

                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-4 control-label" for="inputlastname">Last Name</label>
                        <div class="col-md-5">
                            <input type="text" name="lastname" id="inputlastname" placeholder="Last Name" class="form-control input-md">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="inputrollno">Roll No</label>
                        <div class="col-md-5">
                            <input type="text" name="textinput" id="inputrollno" placeholder="Roll No" class="form-control input-md">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="inputclass">Class</label>
                        <div class="col-md-5">
                            <input type="text" name="textinput" id="inputclass" placeholder="Class" class="form-control input-md">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="inputemail">Email</label>
                        <div class="col-md-5">
                            <input type="text" name="email" id="inputemail" placeholder="E-Mail" class="form-control input-md">

                        </div>
                    </div>

                    <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 id="formData"></div>
    </div>
</body>

</html>

关于javascript - 单击html表单中的提交按钮时如何在html和javascript中添加div面板？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51288814/

25 4 0
文章推荐： java - Spring Neo4j 中的唯一索引不起作用
文章推荐： C程序读取和存储字符串
文章推荐： java - Eclipse启动时出现奇怪的错误
文章推荐： c - 如何使用自定义内核模块中的函数？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com