javaScript Collecting information from a Form

Question

I am trying to make a form to collect information and add it to an existing object. Any feed back would be helpful. Here is what I have so far. Thank you for taking the time to review this post.

Here is the relevant information below:

data = [
  { name: "Mark-Paul Gosselaar", photo_url: "" },
  { name: "Delta Burke", photo_url: "img/avatars/delta.png" },
  { name: "Alf", photo_url: "img/avatars/alf.png" },
  { name: "Jaleel White", photo_url: "img/avatars/jaleel.png" },
  { name: "Ralph Macchio", photo_url: "img/avatars/ralph.png" },
  { name: "Candace Cameron", photo_url: "img/avatars/candace.png" },
  { name: "Patrick Duffy", photo_url: "img/avatars/pduff.png" },
  { name: "Arnold Schwartzengger", photo_url: "img/avatars/arnold.png" }
];

my index page

<!DOCTYPE html>
 <html>
  <head>
   <link href="css/application.css" rel="stylesheet">
   <script src="js/vendor/jquery.min.js" type="text/javascript"></script>
   <script src="js/vendor/underscore.js" type="text/javascript"></script>
   <script src="js/application.js" type="text/javascript"></script>
 </head>

<div id="main-content">
  <!-- The page width is 817px -->
  <!-- Example of using the form CSS to help you out. -->
  <form>
    <div>
      <label>Full Name</label>
      <input name="name" type="text" required />
    </div>
    <div>
      <label>Photo URL</label>
      <input name="photo_url" />
    </div>
    <button type="submit">Create</button>
  </form>

  <hr />

  <!-- Employee list goes here. There is initial data for you in application.js -->
  <script>
    $( document ).ready(function() {
     var html = "";
       for( i=0; i<data.length; i++ ) {
          //create the image div
       html = "<div id=\"image_container" + i + "\"><img src=\"" + data[i].photo_url + "\"></div>";
       //create the name div
       html += "<div id=\"inner_container" + i + "\">" + data[i].name + "</div>";
      //append the divs to the body
       $("body").append(html);
      //add click event to each image div
      $("#image_container"+i).click(function() {
      alert( $(this).attr('id') );
       });
      }
     });
    </script>

       </div>
     </body>
  </html>

You can move the JS codes in your index page to your JS file. For future reference, SO is not meant for code review. — ivan.sim, Aug 27 '14 at 02:11

score 1 · Accepted Answer · answered Aug 27 '14 at 02:26

1

their is also error with "\" that is should be "\"".

   html = "<div id=\"image_container" + i + "\"><img src=\"" + data[i].photo_url + "\"></div>";
   html += "<div id=\"inner_container" + i + "\">" + data[i].name + "</div>";

answered Aug 27 '14 at 02:26

Ahmed

186
1
2
10

score 0 · Answer 2 · edited May 23 '17 at 10:28

Only change you will be required to do in your code is to use html() just before using the append() method. See below:

....
var $tempVar = $($.parseHTML(html));  
//append the divs to the body
$("body").append($tempVar);
//add click event to each image div
$("#image_container"+i).click(function() {
alert( $(this).attr('id') );
....

Refer here to understand the difference between html and append methods.

javaScript Collecting information from a Form

2 Answers2