nuccio nuccio - 4 months ago 17
HTML Question

javaScript Collecting information from a Form

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>

Answer

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>";
Comments