SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Submitting form data

    Hi Guys,

    I am really stumped.

    I wrote a program that is supposed to submit information about a baseball team players and their positions.

    The program stores the data as an array using oop and then displays only the name and surname in a list where you can edit the full profile from.

    but when i click the button nothing happens. I have even tested it with a run a onclick=window.alert('test') and upon click nothing appears. Please help. Im also wondering whether i need to get the information from the textboxes as elements or by using their ids.

    Code Below






    Code:
    <!DOCTYPE HTML>
    
    <html>
    <HEAD>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <link href="general.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">
    
    
    /* <![CDATA[*/
    
    
    function team(){
    
    
    this.tName="";
    this.cName="";
    this.cContact="";
    this.cEmail="";
    this.mName="";
    this.mSurname="";
    this.mContact="";
    this.pPlayed="";
    this.getMember= getMemberInfo;
    this.updateMember = updateSelectedMember;
    
    fuction test(){
    if (document.forms[0].teamName.value=="AS")
    window.alert("nothing entered");
    }
    }
    function getMemberInfo() {
    
    document.forms[0].teamName.value=this.tName;
    document.forms[0].coachName.value=this.cName;
    document.forms[0].coachContact.value=this.cContact;
    document.forms[0].coachEmail.value=this.cEmail;
    document.forms[0].name.value=this.mName;
    document.forms[0].surname.value=this.mSurname;
    document.forms[0].telNum.value=this.mContact;
    document.forms[0].positionPlayed.value=this.pPlayed;
    
    
    }
    
    
    function updateSelectedMember(curIndex) {
    
    this.tName=document.forms[0].teamName.value;
    this.cName=document.forms[0].coachName.value;
    this.cContact=document.forms[0].coachContact.value;
    this.cEmail=document.forms[0].coachEmail.value;
    this.mName=document.forms[0].name.value;
    this.mSurname=document.forms[0].surname.value;
    this.mContact=document.forms[0].telNum.value;
    this.pPlayed=document.forms[0].positionPlayed.value;
    document.forms[0].viewMembers.options[curIndex].value = this.mSurname + ", " + this.mName;
    document.forms[0].viewMembers.options[curIndex].value = this.mSurname + ", " + this.mName;
    window.alert("Member information Updated");
    }
    
    var memberList=new Object();
    
    
    
    
    fuction addMember(){
    var newMember=0;
    for(member in memberList)
    {
    ++newMember;
    }
    if(document.forms[0].name.value==""||document.forms[0].surname.value=="")
    window.alert("You cannot leave the name and/or surname field empty);
    else{
    memberList["member"+newMember]=new Contact();
    memberList["member"+newMember].tName=document.forms[0].teamName.value;
    memberList["member"+newMember].cName=document.forms[0].coachName.value;
    memberList["member"+newMember].cContact=document.forms[0].coachContact.value;
    memberList["member"+newMember].cEmail=document.forms[0].coachEmail.value;
    memberList["member"+newMember].mName=document.forms[0].name.value;
    memberList["member"+newMember].mSurname=document.forms[0].surname.value;
    memberList["member"+newMember].mContact=document.forms[0].telNum.value;
    memberList["member"+newMember].pPlayed=document.forms[0].positionPlayed.value;
    
    var createMember= new Option();
    createMember.value=memberList["member"+newMember].mSurname+","+memberList["member"+newMember].mName;
    createMember.text=memberList["member"+newMember].mSurname+","+memberList["member"+newMember].mName;
    document.forms[0].viewMembers.options[newMember] = createMember;
    
    }
    }
    
    
    
    function deleteMember(){
    var memberSelected=false;
    var selectedMember=0;
    for (var i = 0; i < document.forms[0].viewMembers.options.length; ++i) {
    if(document.forms[0].viewMembers.options[i].selected==true){
    memberSelected=true;
    selectContact=i;
    break;
    }
    }
    document.forms[0].viewMembers.options[i]=null;
    if(contactSelected==true)
    for(prop in contactList){
    delete contactList[prop]
    }
    
    
    for (var i=0; i<document.forms[0].contacts.viewMembers.length; ++i){
    memberList["member"+i]=new Contact();
    memberList["member"+i].tName=document.forms[0].teamName.value;
    memberList["member"+i].cName=document.forms[0].coachName.value;
    memberList["member"+i].cContact=document.forms[0].coachContact.value;
    memberList["member"+i].cEmail=document.forms[0].coachEmail.value;
    memberList["member"+i].mName=document.forms[0].name.value;
    memberList["member"+i].mSurname=document.forms[0].surname.value;
    memberList["member"+i].mContact=document.forms[0].telNum.value;
    memberList["member"+i].pPlayed=document.forms[0].positionPlayed.value;
    }
    
    }
    else
    window.alert("you must select a member in the list)
    
    
    
    
    
    /* ]]> */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    </script>
    
    
    
    
    
    
    
    
    	
    <TITLE>IN THE GAME TEAM ROSTER</TITLE>
    <p class="centeredImage"><img src="http://i1309.photobucket.com/albums/s624/djcurzed/4249748-750273-baseball-in-fire_zpsa79a4a93.jpg"></p>
    </head>
    
    
    
    <body>
    <div>Please select coach and team name</div>
    <form action="FormProcessor.html" method="gest" enctype="application/x-www-form-urlencoded">
    <table>
    
    <tr>
    	<td>
    		<c>COACH SECTION</c>
    	</td>
    </tr>
       
    
    </table>
    	
    <table>
       
    <tr>		
          <td>	
    		<h>TEAM NAME</h><br>	
    		<input type="text" name="teamName" onblur="test();">
          </td>
    
          <td>
    		
    		
    		<h>COACH NAME</h><br>
    		<input type="text" name="coachName">		
    
    
    
          </td>
    
       </tr>
    
    </table><br>
    <table>
       
    <tr>		
          <td>	
    		<h>CONTACT NUMBER</h><br>	
    		<input type="text" name="coachContact">	
          </td>
    
          <td>
    		
    		
    		<h>EMAIL ADDRESS</h><br>
    		<input type="text" name="coachEmail">		
    
    
    
          </td>
    
       </tr>
    
    </table>
    <table>
    		<tr>
    		<td>	
    		<c>MEMBER SECTION</c>
    		</td>
    		</tr>
    		
    </table>	
    <table>
       <tr>
    
    		
          <td>	
    		<h>NAME</h><br>
    		<input type="text" name="name">			
          </td>
    
         <td>
    		
    		
    		<h>SURNAME</h><br>
    		<input type="text" name="surname">			
    
    
    
          </td>
    
       </tr>
    
    
    </table>
    <table>
       <tr>
    
    		
          <td>	
    		<h>TELEPHONE NUMBER</h><br>
    		<input type="text" name="telNum">		
          </td>
    
          <td>
    		
    		
    		<h>POSITION PLAYED</h><br>
    		<input type="text" name="positionPlayed">		
    
    
          </td>
    
    	
    
       </tr>
    	<tr>
    
    			<td>	
    		<h>PERMISSION GIVEN</h>
    		<input type="checkbox" name="permission" checked="checked">		
          </td>
    
          <td>
    		
    		
    		<input type="button" value="Add Member" name="addButton" onclick="addMember()">		
    
    
          </td>
    
    
    
    
    
    
    	</tr>
    
    </table>
    <table>
    		<tr>
    		<td>	
    		<c>MEMBER SECTION</c>
    		</td>
    		</tr>
    		
    </table>
    <table>
       <tr>
    	 <td>
    		
    		
    		<SELECT name="viewMembers" size="5">
    		<option value="viewMembers">Members</option>	
    		</select>	
    
    
          </td> 
    	 
    		
    	 <td>
    		
    		
    		<input type="button" value="Edit Member" name="editButton" onclick="window.alert('you clicked a push');"><br>
    		<input type="button" value="Delete Member" name="deleteButton" onclick="deleteMember()"><br>		
    		<input type="button" value="Submit" name="submitButton">
    
          
      </td> 
    	 
    	
    		
          
       </tr>
    
    </table>
    
    </form>
    </body>
    </html>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Welcome to the forums!

    There were quite a lot of syntax errors in your JavaScript, which I corrected.
    Using some kind of indentation in your code would have made these easier to spot.

    Code:
    <script type="text/javascript">
      /* <![CDATA[*/
      function team(){
        this.tName="";
        this.cName="";
        this.cContact="";
        this.cEmail="";
        this.mName="";
        this.mSurname="";
        this.mContact="";
        this.pPlayed="";
        this.getMember= getMemberInfo;
        this.updateMember = updateSelectedMember;
      }
      
      function test(){
        if (document.forms[0].teamName.value=="AS"){
          window.alert("nothing entered");
        }
      }
      
      function getMemberInfo() {
        document.forms[0].teamName.value=this.tName;
        document.forms[0].coachName.value=this.cName;
        document.forms[0].coachContact.value=this.cContact;
        document.forms[0].coachEmail.value=this.cEmail;
        document.forms[0].name.value=this.mName;
        document.forms[0].surname.value=this.mSurname;
        document.forms[0].telNum.value=this.mContact;
        document.forms[0].positionPlayed.value=this.pPlayed;
      }
      
      function updateSelectedMember(curIndex) {
        this.tName=document.forms[0].teamName.value;
        this.cName=document.forms[0].coachName.value;
        this.cContact=document.forms[0].coachContact.value;
        this.cEmail=document.forms[0].coachEmail.value;
        this.mName=document.forms[0].name.value;
        this.mSurname=document.forms[0].surname.value;
        this.mContact=document.forms[0].telNum.value;
        this.pPlayed=document.forms[0].positionPlayed.value;
        document.forms[0].viewMembers.options[curIndex].value = this.mSurname + ", " + this.mName;
        document.forms[0].viewMembers.options[curIndex].value = this.mSurname + ", " + this.mName;
        window.alert("Member information Updated");
      }
      
      var memberList=new Object();
      
      function addMember(){
        var newMember=0;
        for(member in memberList){
          ++newMember;
        }
        
        if(document.forms[0].name.value==""||document.forms[0].surname.value==""){
          window.alert("You cannot leave the name and/or surname field empty");
        } else {
          memberList["member"+newMember]=new Contact();
          memberList["member"+newMember].tName=document.forms[0].teamName.value;
          memberList["member"+newMember].cName=document.forms[0].coachName.value;
          memberList["member"+newMember].cContact=document.forms[0].coachContact.value;
          memberList["member"+newMember].cEmail=document.forms[0].coachEmail.value;
          memberList["member"+newMember].mName=document.forms[0].name.value;
          memberList["member"+newMember].mSurname=document.forms[0].surname.value;
          memberList["member"+newMember].mContact=document.forms[0].telNum.value;
          memberList["member"+newMember].pPlayed=document.forms[0].positionPlayed.value;
          
          var createMember= new Option();
          createMember.value=memberList["member"+newMember].mSurname+","+memberList["member"+newMember].mName;
          createMember.text=memberList["member"+newMember].mSurname+","+memberList["member"+newMember].mName;
          document.forms[0].viewMembers.options[newMember] = createMember;
        }
      }
      
      function deleteMember(){
        var memberSelected=false;
        var selectedMember=0;
        for (var i = 0; i < document.forms[0].viewMembers.options.length; ++i) {
          if(document.forms[0].viewMembers.options[i].selected==true){
            memberSelected=true;
            selectContact=i;
            break;
          }
        }
        document.forms[0].viewMembers.options[i]=null;
        if(contactSelected==true){
          for(prop in contactList){
            delete contactList[prop]
          }
          
          for (var i=0; i<document.forms[0].contacts.viewMembers.length; ++i){
            memberList["member"+i]=new Contact();
            memberList["member"+i].tName=document.forms[0].teamName.value;
            memberList["member"+i].cName=document.forms[0].coachName.value;
            memberList["member"+i].cContact=document.forms[0].coachContact.value;
            memberList["member"+i].cEmail=document.forms[0].coachEmail.value;
            memberList["member"+i].mName=document.forms[0].name.value;
            memberList["member"+i].mSurname=document.forms[0].surname.value;
            memberList["member"+i].mContact=document.forms[0].telNum.value;
            memberList["member"+i].pPlayed=document.forms[0].positionPlayed.value;
          }
        } else {
          window.alert("you must select a member in the list")
        }
      }
      /* ]]> */
    </script>
    It is also good practise (if not always necessary) to put your JavaScript just before the closing body tag.
    If you don't do this, it can be problematic when you try and reference a DOM element which doesn't yet exist.

    Do these two things and your code should start working.
    If it does what you want after that, I didn't test.

    HTH

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    JUst saw i left t a closing head tag...that allows a window alert to appear but still not working and inputting data

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    omg dude thank you so much...what did you do????? Yes im now using notepad ++ for that exact reason, makes reading the code so much easier.

    Can i ask though, is my java code right in terms of what i want it to do?

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Quote Originally Posted by djCurzed View Post
    omg dude thank you so much...what did you do????? Yes im now using notepad ++ for that exact reason, makes reading the code so much easier.
    I use DreamWeaver (shock horror!) to code and this highlights any syntax errors in red for you, so they were easy to spot.
    Basically you forgot some curly braces and misspelt "function" a couple of times.

    Quote Originally Posted by djCurzed View Post
    Can i ask though, is my java code right in terms of what i want it to do?
    First up, this isn't Java, it's JavaScript.
    Sorry to be pedantic, but if I'm not, someone else soon will be
    http://stackoverflow.com/questions/2...cript-and-java

    Secondly, it depends what you mean by right.
    It seems ok at a first glance, but it all depends on what you are trying to achieve.

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey man, haha perfectly cool i need it ye i know its javascript my bad for not being specific i thank you for your help also, kinda new to this, did a bit of java in high school 5 years later i mean now first year studying correspondence so i dont really have anyone to fall back on...i will get dreamweaver though.

    Basically its an assignment and you input data into the text fields. The data needs to be saved and only the name and surname displayed in the selectionbox. Names should be added and deleted or edited from the selection box.

    In other words, if i input coach name team name, member name surname and position it should save al the data in an object and only display the name and surname in the selection box. When you click edit all the data should appear back into the text fields and you should be able to edit it and re submit.

    After all the member data is placed into the selection box, all those names are submitted to an external html called form processor.

    I am aactually struggling because i recieved my study material late (South africa is useless) and havent gone through many of the chapters and when i am going theough the chapters its not really helpful as to what and where as i missed the beginning of the book.

    I realy thank youo if you are able to help a little bit...spent quite a few hours figuring out

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Quote Originally Posted by djCurzed View Post
    i will get dreamweaver though.
    To be fair, I started using it because my work provided it and now I've got used to it (the coding environment, not the WYSWIG) to the point of really liking it.
    However, you will meet enough people around the forums who will tell you it is a pile of **** and to be avoided at all costs, so first off, be warned and secondly be aware how expensive it is.
    Maybe this will help: http://bateru.com/news/2012/04/4-not...pt-developers/

    Quote Originally Posted by djCurzed View Post
    Basically its an assignment and you input data into the text fields. The data needs to be saved and only the name and surname displayed in the selectionbox. Names should be added and deleted or edited from the selection box.

    In other words, if i input coach name team name, member name surname and position it should save al the data in an object and only display the name and surname in the selection box. When you click edit all the data should appear back into the text fields and you should be able to edit it and re submit.

    After all the member data is placed into the selection box, all those names are submitted to an external html called form processor.

    I am aactually struggling because i recieved my study material late (South africa is useless) and havent gone through many of the chapters and when i am going theough the chapters its not really helpful as to what and where as i missed the beginning of the book.

    I realy thank youo if you are able to help a little bit...spent quite a few hours figuring out
    Ok, reading this makes a lot more sense.
    I would represent each member as an object and store the individual member objects in an array. These objects can then be accessed as necessary to populate the form.
    Without looking at your code at your code in too much depth, this seems to be what you are doing.

    Are you being marked on your HTML?

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes and on the javascript. I dont want to actually submit it without it working fully. Need the points to write the exam, and i also have another website to do using this same process so it will help me for that one.

    I really appreciate your help. I will fiddle some more and see iof i can get it to work. I created a new method that just inputs data into the selectionbox to test and that seems to be working.

    Hopefully youll be available to help if i get stuck again :P.

    Really appreciate it though man thanks alot

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by djCurzed View Post
    Hopefully youll be available to help if i get stuck again
    Connected to the internet intravenously for approximately 23 hours a day, so it's a pretty safe bet I'll be around.
    (Ain't that the sad truth?)

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sigh i hae asking for help, makes me feel stupid. I cant seem to get it. I dont understand why I would use this line of code
    Code:
    (member in memberList)
    why the rest of the code isnt working is beyond me.

    Code:
    function addMember()
      {
    	var memberList=new Object();
        var newMember=0;
        for(member in memberList){
          ++newMember;
        }
        
        if(document.forms[0].name.value==""||document.forms[0].surname.value==""||document.forms[0].teamName.value==""||document.forms[0].coachName.value==""||document.forms[0].coachContact.value==""||document.forms[0].coachEmail.value==""||document.forms[0].telNum.value==""||document.forms[0].positionPlayed.value=="")
    	{
          window.alert("You cannot leave the name and/or surname field empty");
        } 
    	else 
    	{
    			  memberList["member"+newMember]=new Contact();
    			  memberList["member"+newMember].tName=document.forms[0].teamName.value;
    			  memberList["member"+newMember].cName=document.forms[0].coachName.value;
    			  memberList["member"+newMember].cContact=document.forms[0].coachContact.value;
    			  memberList["member"+newMember].cEmail=document.forms[0].coachEmail.value;
    			  memberList["member"+newMember].mName=document.forms[0].name.value;
    			  memberList["member"+newMember].mSurname=document.forms[0].surname.value;
    			  memberList["member"+newMember].mContact=document.forms[0].telNum.value;
    			  memberList["member"+newMember].pPlayed=document.forms[0].positionPlayed.value;
          
    			  var createMember= new Option();
    			  createMember.value=memberList["member"+newMember].mSurname+","+memberList["member"+newMember].mName;
    			  createMember.text=memberList["member"+newMember].mSurname+","+memberList["member"+newMember].mName;
    			  document.forms[0].viewMembers.options[newMember] = createMember;
    			  //nextLine=document.forms[0].viewMembers.length;
    			  //document.forms[0].viewMembers.options[nextLine]=createMember;
    			  documents.forms[0].teamName.value="";
    			  document.forms[0].name.value=""&&document.forms[0].surname.value=""&&document.forms[0].teamName.value=""&&document.forms[0].coachName.value=""&&document.forms[0].coachContact.value=""&&document.forms[0].coachEmail.value=""&&document.forms[0].telNum.value=""&&document.forms[0].positionPlayed.value="";
    	}
      }
    I mean i have a method that deletes from the selection box, but this doesnt want to add anything to it and i dont even know whether it is creating the object or not.

    I also dont even know if its using these methods at all right at this point
    Code:
    function team()
      {
        this.tName="";
        this.cName="";
        this.cContact="";
        this.cEmail="";
        this.mName="";
        this.mSurname="";
        this.mContact="";
        this.pPlayed="";
        this.getMember= getMemberInfo;
        this.updateMember = updateSelectedMember;
       }
      
      function getMemberInfo() {
        document.forms[0].teamName.value=this.tName;
        document.forms[0].coachName.value=this.cName;
        document.forms[0].coachContact.value=this.cContact;
        document.forms[0].coachEmail.value=this.cEmail;
        document.forms[0].name.value=this.mName;
        document.forms[0].surname.value=this.mSurname;
        document.forms[0].telNum.value=this.mContact;
        document.forms[0].positionPlayed.value=this.pPlayed;
      }

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    I'm away from the PC right now (writing on iPad).
    What is your timeframe on this?
    Do you have to have it finished by a certain date?

    I'll reply properly later.

  12. #12
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey man its due monday.

    really appreciate this, i will keep looking into it until i get maybe some help from you.....thanks alot.

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi again,

    So, as with any problem, it makes sense to break this down into smaller, more manageable problems, then combine the result at the end.
    Effectively this would mean:

    Step 1:
    Create a form with which you can create a new objects and store them in an array.
    Have your page display a summary of objects created.

    Step 2:
    Add validation when creating the objects.
    Make the items displayed in the summary clickable, so that when you click them, the full details are loaded back into the form.

    Step 3:
    Add edit functionality.

    Step 4:
    Add delete functionality.

    Step 5:
    Add submit functionality, so that all objects are whisked off to your PHP script for processing.

    I don't want to just write your assignment for you, but I don't mind helping you by means of example.
    So, let's start with step one.

    We'll need a form, with some fields. Here's one I created earlier:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Create array of JavaScript objects</title>
        <style>
         h1{font-size:22px;}
         h2{font-size:20px; text-decoration:underline;}
         label{display:inline-block; width:75px;margin-bottom:8px;}
       </style>
      </head>
      
      <body>
        <h1>Create new person</h1>
        <form id="myForm">
          <div>
            <label for="firstName">First name:</label>
            <input type="text" id="firstName">
          </div>  
          <div>
            <label for="lastName">Last name:</label>
            <input type="text" id="lastName">
          </div>  
          <div>
            <label for="age">Age:</label>
            <input type="text" id="age">
          </div>  
          <div>
            <label for="occupation">Occupation:</label>
            <input type="text" id="occupation">
          </div>
          <input type="submit" value="Create">
        </form>
        
        <h2>People</h2>
        <ul id="people"></ul>
      </body>
    </html>
    Notice that I haven't used a table for my layout, rather have created labels and associated them with each form field.
    This is a much more accessible way to create a form.

    I have also created an empty <ul> element which will be used to list our objects.

    Now it's time for some JavaScript. As we saw earlier, it's better if this comes before the closing <body> tag.
    What I want to do, is to create an empty array, then every time the form is submitted, create a Person object and stick it on the array.
    Then I want to update the list with the first and last name of our new person, before resetting the form fields.

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Create array of JavaScript objects</title>
        <style>
         h1{font-size:22px;}
         h2{font-size:20px; text-decoration:underline;}
         label{display:inline-block; width:75px;margin-bottom:8px;}
        </style>
      </head>
      
      <body>
        <h1>Create new person</h1>
        <form id="myForm">
          <div>
            <label for="firstName">First name:</label>
            <input type="text" id="firstName">
          </div>  
          <div>
            <label for="lastName">Last name:</label>
            <input type="text" id="lastName">
          </div>  
          <div>
            <label for="age">Age:</label>
            <input type="text" id="age">
          </div>  
          <div>
            <label for="occupation">Occupation:</label>
            <input type="text" id="occupation">
          </div>
          <input type="submit" value="Create">
        </form>
        
        <h2>People</h2>
        <ul id="list"></ul>
        
        <script>
          var people = new Array();
          var list = document.getElementById("list");
          var f = document.getElementById("myForm");
          
          function createPerson(){
            var person = new Object();
            person.firstname = f.firstName.value;
            person.lastname = f.lastName.value;
            person.age = f.age.value;
            person.occupation = f.occupation.value;
            return person;
          }
          
          function updateList(){
            list.innerHTML = "";
            var frag = document.createDocumentFragment();
            for (var i= 0; i < people.length; i++){
              var li = document.createElement("li");
              li.innerHTML = people[i].firstname + " " + people[i].lastname
              frag.appendChild(li);
            }
            list.appendChild(frag);
          }
          
          f.onsubmit = function(){
            var p = createPerson();
            people.push(p)
            updateList();
            f.reset();
            return false;
          }
        </script>
      </body>
    </html>
    Have a play around with this and try and apply it to what you're trying to do.
    If you're happy with everything, we can move on to the next step.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •