Create a Line-Up Wire up a click handler to the CREATE Line-up button such that

ID: 3717470 • Letter: C

Question

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:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <link rel="sabio-icon" sizes="76x76" href="https://sabio-checkin.azurewebsites.net/assets/img/sabio_logo.png"> <link rel="icon" type="image/png" href="https://sabio-checkin.azurewebsites.net/assets/img/sabio_logo.png"> <title>Sabio Practical Assessment - Web Section</title>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">     <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" /> <link href="https://sabio-checkin.azurewebsites.net/assets/css/now-ui-kit.css?v=1.1.0" rel="stylesheet" /> <link href="https://sabio-checkin.azurewebsites.net/Content/assessments/assessments-content.css" rel="stylesheet" /> </head> <body class="template-page sidebar-collapse">  <nav class="navbar navbar-expand-lg bg-primary fixed-top "> <div class="container"> <div class="navbar-translate"> <a class="navbar-brand template-page" > Sabio Web Assessment </a> </div> </div> </nav> <div class="wrapper"> <div class="container"> <div class="assess-template col-sm-12"> <div class="container"> <br /> <div class="row"> <div class="col-sm-12"> <h1>Create a Line-Up</h1> <hr /> <p> <ol>  <li> 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. </li> <li> Every time a new player is submitted: the data must be displayed below the form using the example html. <ul> <li> The fields that have drop downs should have their text values displayed (ie. Position should show "CF" and not "1") </li> <li> If the user does not select a position you should show an alert that tells them to select a a position </li> </ul> </li> <li> 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"). </li> <li> The image should show the team logo as the example does. this is done by manipulating the src attribute of the image. </li> <li> Add a red delete button for each individual player added. when clicked this button should remove only that one player from the list. </li> <li> 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". </li> <li> 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. </li> </ol> </p> <div class="alert alert-warning"> Helpful tip: <p>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. </p> </div> <div class="well"> <p> While we are looking for working pages, however you can make that happen, we would like to see code with: <ul> <li>JavaScript Namespacing</li> <li>No inline functions unless absolutely required</li> </ul> </p> <p>Functional pages are the #1 priorty though.</p> </div> <hr /> <hr /> <form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">First Name</label> <div class="col-sm-10"> <input type="text" class="form-control" id="fName" placeholder="First Name"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Last Name</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lName" placeholder="Last Name"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Jersey #</label> <div class="col-sm-10"> <input type="number" class="form-control" id="jersey" placeholder="Jersey Number"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Position</label> <div class="col-sm-10">  <select id="position" class="form-control input-xlarge"> <option value="" selected>Please Select</option> <option value="P">P</option> <option value="C">C</option> <option value="1B">1B</option> <option value="2B">2B</option> <option value="3B">3B</option> <option value="SS">SS</option> <option value="CF">CF</option> <option value="LF">LF</option> <option value="RF">RF</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Batting Style</label> <div class="col-sm-10"> <select id="position" class="form-control input-xlarge"> <option value="" selected>Please Select</option> <option value="LH">Left</option> <option value="RH">Right</option> <option value="SH">Switch</option> </select> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary" id="lineUpBtn">Add to Line-Up</button> </div> </div> </form> <br /> <div id="LineUp" class="col-md-6 col-sm-12 account-sidebar hidden-sm listings">  <div class="row listing-row"> <div class="col-sm-2"> <a class="thumbnail " href="register.html"> <img src="https://upload.wikimedia.org/wikipedia/commons/a/a1/Pirates_21RC.png" alt="176 * 120"> </a> </div> <div class="col-sm-10"> <h3 class="user-name">Roberto Clemente <strong>#21</strong> </h3> <p></p> <p>Position: <strong>RF</strong> </p> <p>Batting Style: <strong>Right</strong> </p> </div> </div>  </div> </div> </div> </div> </div> </div>  <footer class="footer"> <div class="container"> <nav> <ul> <li> <a href="" class="home"> Home </a> </li> <li> <a href="#"> Contact Us </a> </li> </ul> </nav> <div class="copyright"> © <script> document.write(new Date().getFullYear()) </script>, Sabio Assessment. Coded by <a href="https://www.sabio.la" target="_blank">Sabio</a>. </div> </div> </footer> </div>   <script src="https://sabio-checkin.azurewebsites.net/Scripts/jquery-2.1.4.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://sabio-checkin.azurewebsites.net/Scripts/sabio.js"></script>  <script type="text/javascript"> </script> </body> </html> CLEMENTE

Explanation / Answer

<!DOCTYPE html>

<html>

<head>

<title>Sabio Practical Assessment - Web Section</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

Sabio Web Assessment

</a>

</div>

</nav>

<br />

<h1>Create a Line-Up</h1>

<hr />

<p>

<ol>

<!--<li>

Wire up a click handler to the CREATE ADDRESS button such that the form can be submitted and the data is pulled from the

form for processing.

</li>-->

<li>

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.

</li>

<li>

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

<ul>

<li>

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

</li>

<li>

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

</li>

</ul>

</li>

<li>

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

</li>

<li>

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

</li>

<li>

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

</li>

<li>

to "Roberto".

</li>

<li>

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.

</li>

</ol>

</p>

<div class="alert alert-warning"> Helpful tip:

<p>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.

</p>

</div>

<p>

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

<ul>

<li>JavaScript Namespacing</li>

<li>No inline functions unless absolutely required</li>

</ul>

</p>

<p>Functional pages are the #1 priorty though.</p>

</div>

<hr />

<label class="col-sm-2 control-label">First Name</label>

</div>

</div>

<label class="col-sm-2 control-label">Jersey #</label>

</div>

<label class="col-sm-2 control-label">Position</label>

<option value="" selected>Please Select</option>

</select>

</div>

<label class="col-sm-2 control-label">Batting Style</label>

<option value="" selected>Please Select</option>

<option value="RH">Right</option>

<option value="SH">Switch</option>

</select>

</div>

</div>

</form>

<br />

</a>

</div>

<h3 class="user-name">Roberto Clemente

</h3>

<p></p>

<p>Position:

</p>

<p>Batting Style:

<strong>Right</strong>

</p>

</div>

</div>

<nav>

<ul>

<li>

Home

</a>

</li>

<li>

</a>

</li>

</ul>

</nav>

document.write(new Date().getFullYear())

</script>, Sabio Assessment. Coded by

<a href="https://www.sabio.la" target="_blank">Sabio</a>.

</div>

</footer>

</div>

<!-- Bootstrap core JavaScript

================================================== -->

function addToLineUp(){

var i=2;

var firstName = document.getElementById("fName").value;

var lastName = document.getElementById("lName").value;

var jersey = document.getElementById("jersey").value;

var position = document.getElementById("position").value;

var bStyle = document.getElementById("position").value;

if(firstName==null)

alert("First Name cannot be left empty");

if(lastName==null)

alert("Last Name cannot be left empty");

if(jersey==null)

alert("Jersey number cannot be left empty");

if(position==null)

alert("Position cannot be left empty");

if(bStyle==null)

alert("Batting Style cannot be left empty");

else{

var div = document.createElement('div');

div.id = "LineUp"+i;

i=i+1;

div.onclick = showDetails();

document.getElementsByTagName('body')[0].appendChild(div);

document.getElementById('lineUpForm').reset();

}

function showDetails(){

}

</script>

</body>

</html>

Navigate

Create a Library class. Include vectors of Books and patrons. Include a struct c

Create a LinkedList Class in C++ to manipulate Node objects. This class must be

Create a Line-Up Wire up a click handler to the CREATE Line-up button such that

Question

Explanation / Answer

Related Questions

Navigate