如何保存我的小注册页面中的所有数据并显示它们

时间:2015-07-01 11:43:29

标签: javascript html css

问题与标题相同。请帮帮我,代码就在下面。我想保存文本框,广播,年龄中的所有数据,并将其显示在其他地方,就好像它是一个注册页面。有什么想法吗?

Html部分:

<div id="nameC">Name:</div> <input type="text" maxlength="8" id="name" onkeypress="return ifnumberrr(event);" />
    <div id="lnameC">Last Name:</div> <input type="text" maxlength="10" id="lname" onkeypress="return ifnumberrrr(event);" />
    <div id="ageC">Age:</div> <input type="text" id="age" onkeypress="return ifnumber(event);" maxlength="2" />
    <div id="genderT">Gender:</div>
    <div class="genderM">Male 
    <input type="radio" id="gender" name="genderrr" />
    </div>
    <div class="genderF">Female
    <input type="radio" id="gender" name="genderrr" />
    </div>
    <div id="button"><input type="submit" value="Submit" id="submit" /></div>

Css部分:

<style>
        .genderM {
            position: fixed;
            left: 175px;
            top: 130px;
        }
        .rdGender {
            position: absolute;
            left: 175px;
        }
        #button {
            position: absolute;
            top: 200px;
            left: 155px;
        }
        #genderT{
            position:fixed;
            top: 130px;
        }
        #nameC {
            position:fixed;
            top: 10px;
        }
        #lnameC{
            position:fixed;
            top: 50px;
        }
        #name{
            position:fixed;
            left: 175px;
            top: 10px;
        }
        #lname{
            position:fixed;
            left: 175px;
            top: 50px;
        }
        #ageC{
            position:fixed;
            top: 90px;
        }
        #age{
            position:fixed;
            left: 175px;
            top: 90px;
        }
        .genderF{
            position:fixed;
            top: 130px;
            left: 245px;
        }
    </style>

Javascript部分:

<script language="javascript">
    function ifnumber(evt) {
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if(charCode > 31 && (charCode < 48 || charCode >57)) {
            return false;
        }
        return true;
    }

    function ifnumberrr(e) {
        var alphabet;
        if (!e) var e = window.event;
        if (e.keyCode) alphabet = e.keyCode;
        else if (e.which) alphabet = e.which;
        if ((alphabet >= 48) && (alphabet <= 57)) {
            return false;
        }
        return true;
}

    function ifnumberrrr(e) {
        var alphabet;
        if (!e) var e = window.event;
        if (e.keyCode) alphabet = e.keyCode;
        else if (e.which) alphabet = e.which;
        if ((alphabet >= 48) && (alphabet <= 57)) {
            return false;
        }
        return true;
    }
</script>

2 个答案:

答案 0 :(得分:1)

你好@Altay Mazlum实现这个你可以使用php和MySql。当您使用php提交表单时,它会创建值并使用insert方法将它们插入到SQL数据库中。

执行此操作后,您还可以使用php echo函数调用值。

  • 所以要遵循的步骤如下:
    • 创建SQL数据库
    • 使用php提交表单
    • on提交值将被插入到ur sql table中的行
    • on call使用php检索数据并在页面上打印。

答案 1 :(得分:0)

您可以在<form/> tag中添加更多控件。给他们起名字并使用.serializeArray()

function ifnumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

function ifnumberrr(e) {
    var alphabet;
    if (!e) var e = window.event;
    if (e.keyCode) alphabet = e.keyCode;
    else if (e.which) alphabet = e.which;
    if ((alphabet >= 48) && (alphabet <= 57)) {
        return false;
    }
    return true;
}

function ifnumberrrr(e) {
    var alphabet;
    if (!e) var e = window.event;
    if (e.keyCode) alphabet = e.keyCode;
    else if (e.which) alphabet = e.which;
    if ((alphabet >= 48) && (alphabet <= 57)) {
        return false;
    }
    return true;
}

function getFormText() {
    alert(JSON.stringify($("form").serializeArray()));
    return false;
}
.genderM {
    position: fixed;
    left: 175px;
    top: 130px;
}
.rdGender {
    position: absolute;
    left: 175px;
}
#button {
    position: absolute;
    top: 200px;
    left: 155px;
}
#genderT {
    position:fixed;
    top: 130px;
}
#nameC {
    position:fixed;
    top: 10px;
}
#lnameC {
    position:fixed;
    top: 50px;
}
#name {
    position:fixed;
    left: 175px;
    top: 10px;
}
#lname {
    position:fixed;
    left: 175px;
    top: 50px;
}
#ageC {
    position:fixed;
    top: 90px;
}
#age {
    position:fixed;
    left: 175px;
    top: 90px;
}
.genderF {
    position:fixed;
    top: 130px;
    left: 245px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit="return getFormText()">
    <div id="nameC">Name:</div>
    <input type="text" maxlength="8" id="name" name="fname" onkeypress="return ifnumberrr(event);" />
    <div id="lnameC">Last Name:</div>
    <input type="text" maxlength="10" id="lname" name="lname" onkeypress="return ifnumberrrr(event);" />
    <div id="ageC">Age:</div>
    <input type="text" id="age" name="age" onkeypress="return ifnumber(event);" maxlength="2" />
    <div id="genderT">Gender:</div>
    <div class="genderM">Male
        <input type="radio" id="gender" name="genderrr" />
    </div>
    <div class="genderF">Female
        <input type="radio" id="gender" name="genderrr" />
    </div>
    <div id="button">
        <input type="submit" value="Click ME" id="submit" />
    </div>
</form>