Question

好的。所以我在A LOOONG TIME之后编码，然后我继续使用codecademy来使用javascript进行一些刷新。所以我学会了以前我不知道的事情：OOP。

帮助。我试了一下。将包括JSfiddle。但我不知道为什么，它不起作用。

没关系我的Idiocy，我会在我知道prev代码中的问题后立即完成代码。我有很多事要做。我也想学习PHP制作一种电话目录！我也没有包括CSS，但这几乎不重要。代码应该做的是，每当用户填写表单并单击提交时，它应该将值附加到“＃results＆＃39; DIV。没做任何事。救命？另外，不要忘记两个密码字段。一旦我明白了这个问题，我就会编写验证表格的代码。

谢天谢地。

JSFIDDLE：http://jsfiddle.net/Ns66V/1/

HTML - ＆gt;

<html>
<head>
    <link rel="stylesheet" href='style.css'>
    <script type="type/javascript" src='jquery.js'></script>
    <script type="type/javascript" src='js.js'></script>
    <title>Form JS</title>
</head>
<body>
    <div class='container'>
    <h1>Create an ID! It's absolutely <strong>FREE!</strong></H1>
        <div id='form'><form action='get'>
            <input name='fname' type='text' placeholder='First Name'><br>
            <input name='lname' type='text' placeholder='Last Name'><br>
            <input name='email' type='email' placeholder='Email Address'><br>
            <input name='passw' type='password' placeholder='Password'>
            <input name='Again' id='last' type='password' placeholder='Again!'><br>
            <select name='gender'>
                <option value='male'>Male</option>
                <option value='female'>Female</option>
                <option value='other'>Other</option>
            </select>
            <div id='submit'><strong>SUBMIT IT!</strong></div>
        </form>
    </div>
        <div class='results'>
            <div class='vals' id='intro'>
                <div class='srn item'>#</div>
                <div class='bigitem item'>FULL NAME</div>
                <div class='bigitem item'>EMAIL ADDRESS</div>
                <div class='gender item'>Gender</div>
            </div>
            <div class='vals'>
                <div class='srn item'>#</div>
                <div class='bigitem item'>FULL NAME</div>
                <div class='bigitem item'>EMAIL ADDRESS</div>
                <div class='gender item'>Gender</div>
            </div>
        </div>
    </div>
</body>
</html>

JS（JQuery） - ＆gt;

$(document).ready(function(){
function Person(fname,lname,email,passw,gend){
    this.fname = fname;
    this.lname = lname;
    this.email = email;
    this.passw = passw;
    this.gend = gend;
};
var numPeople = 0; //Setting the number of people var.
$('#submit').click(function(){
    var fname = $('input[name=fname]').val(),       //SETS VALUES OF ALL THE INPUTS
        lname = $('input[name=lname]').val(),       //SETS VALUES OF ALL THE INPUTS
        email = $('input[name=email]').val(),       //SETS VALUES OF ALL THE INPUTS
        passw = $('input[name=passw]').val(),       //SETS VALUES OF ALL THE INPUTS
        gend = $('select[name=gender]').val();      //SETS VALUES OF ALL THE INPUTS
    var People = new Array(); //Definin
    numPeople++;
    People[numPeople] = new Person(fname,lname,email,passw,gend);
    $('.results').append(People[numPeople].fname + People[numPeople].lname + People[numPeople].email + People[numPeople].passw + People[numPeople].gend);
}); //#SUBMIT.CLICK() END
});

Answer 1

在这种情况下，完全不需要OOP。问题是你需要使用#results，你需要关闭你的按钮以及其他标签。

<强> HTML

<button id='submit' type='button'><strong>SUBMIT IT!</strong></button>

<强> JS

$('#results').append(...);

以下是Fiddle示例，最后添加了<br />。

同样get和post用于表单method属性。 action是表单发送数据的位置。所以你可能想要：

<form method="get"></form>

Answer 2

检查http://jsfiddle.net/Ns66V/4/

按钮标记未关闭，内容已附加到按钮

$('#submit').click(function()

应替换为

$('#submit').on('click', function()

现在似乎有效。

当然，您应该改进添加内容的方式 - 使用html标记分隔每个信息。

简单的jQuery代码不起作用（处理对象）

2 个答案: