Question

In: Computer Science

You are designing a web page that allows users to create an event listing. The event...

You are designing a web page that allows users to create an event listing.
The event listing should include the date, time, location, title, phone,
email, coordinator, and description of the event.
The location should be between 10 and 100 characters long.
The title should be between 1 and 50 characters long.
The description should be between 10 and 200 characters long.
Phone number consists of numbers and dashes.
Email has to have an @ symbol.

All data elements should be entered by the user.

Create a form and use JavaScript to validate the user data.

Submitting valid data should result in a page that displays the date, time, location, title and description.

Solutions

Expert Solution

<!--###########################################################-->
<!--event.html-->
<html>
<head>
<title>
</title>
<script type="text/javascript">
   function validate(){
       var location=document.forms["myForm"]["txtLocation"].value;
       var title=document.forms["myForm"]["txtTitle"].value;
       var description=document.forms["myForm"]["txtDescription"].value;
       var phone=document.forms["myForm"]["txtPhone"].value;
       var email=document.forms["myForm"]["txtEmail"].value;
      
      
      
       if(location.length<10 || location.length>100){
           alert("Location length must be in between 10 and 100!");
           return false;
       }
       if(title.length>50){
           alert("Title length must be in between 1 and 50!");
           return false;
       }
      
       var phoneParse = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
       if(!(phone.match(phoneParse))){
           alert("Phone number should be in XXX-XXX-XXXX format!");
           return false;
       }
      
       var atposition=email.indexOf("@");
       var dotposition=email.lastIndexOf(".");
       if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){
           alert("Please enter a valid e-mail address");
           return false;
       }
      
       if(description.length<10 || description.length>200){
           alert("Description length must be in between 10 and 200!");
           return false;
       }
              
   }
</script>
</head>
<body>
   <form name="myForm" action="next.html" onsubmit="return validate()" method="get">
       Date: <input type="date" name="eventDate" required><br><br>
       Time: <input type="time" name="eventTime" required><br><br>
       Location: <input type="text" name="txtLocation" required><br><br>
       Title: <input type="text" name="txtTitle" required><br><br>
       Phone: <input type="text" name="txtPhone" required><br><br>
       Email: <input type="email" name="txtEmail" required><br><br>
       Coordinator: <input type="text" name="txtCoordinator" required><br><br>
       Description: <input type="text" name="txtDescription" required><br><br>  
       <input type="submit" value="Submit">
   </form>
  
</body>
<!--###########################################################-->

<!--###########################################################-->
<!--next.html-->
<html>
<head>
<title>
</title>
</head>
<body>

   <p><b>Date: </b> <span id="date" ></span></p>
   <p><b>Time: </b><span id="time"></span></p>
   <p><b>Location: </b> <span id="location" ></span></p>
   <p><b>Title: </b><span id="title"></span></p>
   <p><b>Phone: </b> <span id="phone" ></span></p>
   <p><b>Email: </b> <span id="email" ></span></p>
   <p><b>Coordinator: </b><span id="coordinator"></span></p>
   <p><b>Description: </b> <span id="description" ></span></p>
  
   <script language="JavaScript">
   function processUser()
   {
       var parameters = location.search.substring(1).split("&");

       var temp = parameters[0].split("=");
       dt = unescape(temp[1]);
       temp = parameters[1].split("=");
       tm = unescape(temp[1]);
       temp = parameters[2].split("=");
       loc = unescape(temp[1]);
       temp = parameters[3].split("=");
       title = unescape(temp[1]);
       temp = parameters[4].split("=");
       phone = unescape(temp[1]);
      
       temp = parameters[5].split("=");
       mail = unescape(temp[1]);
       temp = parameters[6].split("=");
       coord = unescape(temp[1]);
       temp = parameters[7].split("=");
       desc = unescape(temp[1]);
      
      
      
      
       document.getElementById("date").innerHTML = dt;
       document.getElementById("time").innerHTML = tm;
       document.getElementById("location").innerHTML = loc;
       document.getElementById("title").innerHTML = title;
       document.getElementById("phone").innerHTML = phone;
      
       document.getElementById("email").innerHTML = mail;
       document.getElementById("coordinator").innerHTML = coord;
       document.getElementById("description").innerHTML = desc;
      
  
   }
   processUser();
   </script>
</body>
<!--###########################################################-->

venereology answered 1 year ago
Next > < Previous

Related Solutions

You are designing a web page that allows users to create an event listing. The event...
You are designing a web page that allows users to create an event listing. The event listing should include the date, time, location, title, phone, email, coordinator, and description of the event. The location should be between 10 and 100 characters long. The title should be between 1 and 50 characters long. The description should be between 10 and 200 characters long. Phone number consists of numbers and dashes. Email has to have an @ symbol. All data elements should...
Create a web page using PHP that allows the users to create an account (a username...
Create a web page using PHP that allows the users to create an account (a username and a password). There should be a login page that allows users to create an account by entering their preferred username and password. The same page should also let users login if they already have an account. If a user is logged in successfully , they should be able to enter a comment and also read the comments entered by others previously.
Choose a software system (or a web page) that you think will benefit the users if...
Choose a software system (or a web page) that you think will benefit the users if it employed the principles of direct manipulation. Illustrate some of the operations under the direct manipulation scheme
Web Projects If you are learning a web technology, you must create a new page that...
Web Projects If you are learning a web technology, you must create a new page that is web-accessible (use your individual burrow account) that includes a form with a field that allows the user to enter a number only. ● Create an input that allows a number to be entered. Only whole numbers should be allowed. ● Add a button below the input that says "Translate". ● When the button is clicked, it should grab the current number in the...
For this assignment you are required to create a web page displaying a recipe of your...
For this assignment you are required to create a web page displaying a recipe of your choosing. Your submission should appropriately use the basic head and body construction of an HTML document. Additionally you are required to appropriately use at least three different HTML element types. For example you might use an unordered list for your ingredients, an ordered list for the steps of your recipe, and an image to show the final result. If you choose to use an...
IN JAVA 12.11 PRACTICE: Branches*: Listing names A university has a web page that displays the...
IN JAVA 12.11 PRACTICE: Branches*: Listing names A university has a web page that displays the instructors for a course, using the following algorithm: If only one instructor exists, the instructor's first initial and last name are listed. If two instructors exist, only their last names are listed, separated by /. If three exist, only the first two are listed, with "/ …" following the second. If none exist, print "TBD". Given six words representing three first and last names...
 In this exercise, you will create two external style sheet files and a web page. You...
 In this exercise, you will create two external style sheet files and a web page. You will experiment with linking the web page to the external style sheets and note how the display of the page is changed. Create an external style sheet (call it format1.css) to format as follows: document background color of white, document text color of #000099, and document font family of Arial, Helvetica, or sans-serif. Hyperlinks should have a background color of gray (#CCCCCC). Configure the...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...
In this assignment you will create a web page about your favorite sports to play or...
In this assignment you will create a web page about your favorite sports to play or teams to watch. If you don’t watch or play sports, please make up your favorite sports to play or teams to watch. You will be incorporating images into your web page, as well as other concepts learned in this unit. Create an external style sheet using a text editor of your choosing. In the CSS file add the following style rules: A background image...
1 -​Create the code to generate a default web page. The contents of this page should...
1 -​Create the code to generate a default web page. The contents of this page should be Your​​Name, right justified
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT