ZuoTi.Pro
Question

Create a Web application that stores name and ID into an array. The GUI should asked...

Create a Web application that stores name and ID into an array.

The GUI should asked the user to enter a last name, a first name, and an ID. Make it sure that the inputs are valid:

names contain only letters and ID 6-digit number. Add to buttons to the interface: Add button to insert the inputs into an array, and a Show button to list all the inputs.

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Here is code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<script>

var student = [];

function checkInp(x)

{

if (isNaN(x) || x.length != 6)

{

alert("Must input numbers");

return false;

}

return true;

}

function checkTxt(x)

{

var regex=/^[a-zA-Z]+$/;

if (!x.match(regex))

{

alert("Must input string");

return false;

}

return true;

}

function onSubmit() {

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

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

var id = document.getElementById("txtID").value;

if(checkTxt(fName) && checkTxt(lName) && checkInp(id)){

student.push({

fName:fName,

lName:lName,

id:id

});

loadData();

document.getElementById("txtFirstName").value = "";

document.getElementById("txtLastName").value = "";

document.getElementById("txtID").value = "";

}else{

// alert("Invalid input");

}

}

function loadData() {

var body = document.getElementById("tBodyData");

student.forEach(x => {

var tr = `<tr>

<td>` + x.fName + `</td>

<td>` + x.lName + `</td>

<td>` + x.id +

`</td>

</tr>`

body.innerHTML += tr;

})

}

</script>

<body onload="loadData()">

<div class="container">

<h2>Student Data</h2>

<table class="table" border="1">

<thead>

<tr>

<th>First name</th>

<th>Last name</th>

<th>ID</th>

</tr>

</thead>

<tbody id="tBodyData">

</tbody>

</table>

</div>

<table>

<tbody>

<tr>

<td>

first name :

</td>

<td>

<input type="text" id="txtFirstName">

</td>

</tr>

<tr>

<td>

last name :

</td>

<td>

<input type="text" id="txtLastName">

</td>

</tr>

<tr>

<td>

ID :

</td>

<td>

<input type="text" id="txtID">

</td>

</tr>

<tr>

<td>

</td>

<td>

<button onclick="onSubmit()">Submit</button>

</td>

</tr>

</tbody>

</table>

</body>

</html>

Output:

0 0
Add a comment
Know the answer?
Add Answer to:
Create a Web application that stores name and ID into an array. The GUI should asked...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • In Java. Write a GUI contact list application. The program should allow you to input names...

    In Java. Write a GUI contact list application. The program should allow you to input names and phone numbers. You should also be able to input a name and have it display the previously entered phone number. The GUI should look something like the following, although you are welcome to format it in any way that works. This should be a GUI application with a JFrame. The program should contain two arrays of Strings. One array will contain a list...

  • I. User Interface Create a JavaFX application with a graphical user interface (GUI) based on the...

    I. User Interface Create a JavaFX application with a graphical user interface (GUI) based on the attached “GUI Mock-Up”. Write code to display each of the following screens in the GUI: A. A main screen, showing the following controls: • buttons for “Add”, “Modify”, “Delete”, “Search” for parts and products, and “Exit” • lists for parts and products • text boxes for searching for parts and products • title labels for parts, products, and the application title B. An add...

  • INSTRUCTIONS #6. Your science teacher has asked you to create an application that displays how much...

    INSTRUCTIONS #6. Your science teacher has asked you to create an application that displays how much a person would weigh on the following planets: Venus, Mars, and Jupiter. The application's interface should allow the user to enter the person's weight on Earth. Perform the steps involved in creating an OO application. (See the Note at the beginning of the Exercises section.) Include a button for clearing the screen. . Create an application, using the following names for the solution and...

  • The purpose of this Java application is to create a simple user interface on top of...

    The purpose of this Java application is to create a simple user interface on top of a relational database. The database you should use is the Java DB database. Setup of the Java DB database is covered in section 24.5. The user interface will allow a user to insert, delete, and update names from a table in the database. The database table will look like this: ID FIRST_NAME LAST_NAME 1452962065165       Rita                           Red                           1452962067770       Oscar                          Orange                        1452962070010       Yet                            The ID value...

  • answer in c# console application. File l/O Create a Person class (firstName, lastName, phoneNumber, gender (Use...

    answer in c# console application. File l/O Create a Person class (firstName, lastName, phoneNumber, gender (Use radioButtons for gender in the GUI) ) Create a List<Person> Create a GUI that will collect the Person information from the user and have 3 buttons: Add, Display, Read. Add button Add the just created person to List<Person>, and append to a text file Display button > print out all persons currently in the List<Person> in a label in a visually attractive way Read...

  • Create a windows form application in c# The form must look like a calculator and do...

    Create a windows form application in c# The form must look like a calculator and do the following. Add, subtract, multiply, and divide. Account for division by zero. Show at least two decimal places. Retain the last number on the window so that, when the user opens the calculator the next time, the number that was in the window at the last close appears. Have a memory, so that users can store values and recall them. Operate with a mouse...

  • In JAVA please! Write program for exercises You will write a Graphical User Interface(GUI) application to manage student...

    In JAVA please! Write program for exercises You will write a Graphical User Interface(GUI) application to manage student information system. The application should allow: 1. Collect student information and store it in a binary data file. Each student is identified by an unique ID. The user should be able to view/edit an existing student. Do not allow student to edit ID. 2. Collect Course information and store it in a separate data file. Each course is identified by an unique...

  • In this assignment you will combine HTML, PHP, and SQL in order to create a web...

    In this assignment you will combine HTML, PHP, and SQL in order to create a web form that allows a manager to add films to the sakila database. You will also create a method to allow the manager to view a list of all films along with their related information, and a list of actors in the movies. Task 1 Create an initial HTML page titled manager.html with 2 buttons. The first button will be labeled “View Films”, and the...

  • In Java please Create a GUI application that accepts student registration data. The GUI with valid...

    In Java please Create a GUI application that accepts student registration data. The GUI with valid data Shudent Fagtrtion x Rt Name Haold Moore Lst Name Yar of Brth 2001 Temporary PesowordHal200 Wlcome Harald Moore! RegsterEt The GUI with invalid data Shudent Fegtrtion DX Fect Name Haold Last Name ar of Brth 2001 Tempoay Pawod Haold 200 Pesse eer St and lact name and ye of bith Regster Et Specifications Use FXML to create the GUI The text box that...

  • A fitness tracking app company has asked you to develop a windows application using a GUI...

    A fitness tracking app company has asked you to develop a windows application using a GUI to determine the total amount of hours somebody has exercised during their lifetime, assuming on average a user has exercises 2.5 hours per week. When the user uses the app, they will enter the following: First Name: Last Name: Date of Birth (in mm/dd/yyyy): Current Date (in mm/dd/yyyy) This program should display the users name and the number of hours the user has exercised...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT