Create a Line-Up

Wire up a click handler to the CREATE Line-up button such that the form can be submitted and the data is pulled from the form for processing.

Every time a new player is submitted: the data must be displayed below the form using the example html.

The fields that have drop downs should have their text values displayed (ie. Position should show "CF" and not "1")

If the user does not select a position you should show an alert that tells them to select a a position

After a player is added to the line-up, the form must be reset back to it's original state (i.e. all fields empty and the dropdown should says "Please Select").

The image should show the team logo as the example does. this is done by manipulating the src attribute of the image.

Add a red delete button for each individual player added. when clicked this button should remove only that one player from the list.

When you click anywhere on a player in the Line-up, you should populate the form above with the data of the given player. So if you were to click on the "Robert Clemente" name element (anywhere in that div) the text book for "First Name" should change to "Roberto".

After clicking submit on the button (after you clicked on a player) the player in question should be updated instead of creating adding to the line-up in the list.

Helpful tip:

Focus first on trying to post, delete, and updating your form. Once those are wokring than try and do the additional tasks like creating an alert or manipulating the src.

While we are looking for working pages, however you can make that happen, we would like to see code with:

JavaScript Namespacing

No inline functions unless absolutely required

Functional pages are the #1 priorty though.

First Name

Last Name

Jersey #

Position

Please Select P C 1B 2B 3B SS CF LF RF

Batting Style

Please Select Left Right Switch

Add to Line-Up

Roberto Clemente #21

Position: RF

Batting Style: Right

View Page Source:

	Sabio Web Assessment
	Create a Line-Up
	Wire up a click handler to the CREATE Line-up button such that the form can be submitted and the data is pulled from the form for processing.
	Every time a new player is submitted: the data must be displayed below the form using the example html.
	The fields that have drop downs should have their text values displayed (ie. Position should show "CF" and not "1")
	If the user does not select a position you should show an alert that tells them to select a a position
	After a player is added to the line-up, the form must be reset back to it's original state (i.e. all fields empty and the dropdown should says "Please Select").
	The image should show the team logo as the example does. this is done by manipulating the src attribute of the image.
	Add a red delete button for each individual player added. when clicked this button should remove only that one player from the list.
	When you click anywhere on a player in the Line-up, you should populate the form above with the data of the given player. So if you were to click on the "Robert Clemente" name element (anywhere in that div) the text book for "First Name" should change
	to "Roberto".
	After clicking submit on the button (after you clicked on a player) the player in question should be updated instead of creating adding to the line-up in the list.
	Helpful tip:
	Focus first on trying to post, delete, and updating your form. Once those are wokring than try and do the additional tasks like creating an alert or manipulating the src.
	While we are looking for working pages, however you can make that happen, we would like to see code with:
	JavaScript Namespacing
	No inline functions unless absolutely required
	Functional pages are the #1 priorty though.
	First Name
	Last Name
	Jersey #
	Position
	Please Select
	P
	C
	1B
	2B
	3B
	SS
	CF
	LF
	RF
	Batting Style
	Please Select
	Left
	Right
	Switch
	Roberto Clemente
	#21
	Position:
	RF
	Batting Style:
	Right
	Home
	Contact Us
	©
	document.write(new Date().getFullYear())
	, Sabio Assessment. Coded by
	Sabio.

CLEMENTE