CODEWITHSUNDEEP
javascriptjqueryhtmloop
user3741047
user3741047

Reputation: 9

Simple jQuery code doesn't work (dealing with Objects)

All right. So I'm coding after A LOOONG TIME, and I just went on to codecademy to get a bit refreshed with javascript. So I learnt something I didn't know before : OOP.

Help. I tried something. Will include the JSfiddle. But I don't know why, it doesn't work.

Nevermind my Idiocy, I will complete the code as soon as I know what the problem in the prev code was. I have alot to do in that. I also want to learn PHP to make a kind of phone directory! I have also NOT included the CSS, but that hardly matters. What the code should do, is that everytime a user fills up the form and clicks submit, it should append the values in a '#results' div. Not doing anything. Help? Also, nevermind the two password fields. I will write the code for validating the form once I am clear with this problem.

THANK YOU IN ADVANCE.

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

HTML -- >

<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) -->

$(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
});

Upvotes: 0

Views: 69

Answers (2)

GabrielCol
GabrielCol

Reputation: 181

Check http://jsfiddle.net/Ns66V/4/

The button tag was not closed and the content was appended to the button and

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

should be replaced with

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

Now seems to work.

Of course you should improve how you append the content though - use html tags to separate each information.

Upvotes: 0

Spencer Wieczorek
Spencer Wieczorek

Reputation: 21575

OOP isn't entirely needed in this case. The problems is that you need to use #results, and you need to close your button along with other tags.

HTML

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

JS

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

Here is a Fiddle example, added a <br /> at the end.

Also get and post are for a forms method attribute. action is where the form sends the data. So you probably want: 

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

Upvotes: 1

Related Questions