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


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


<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 10 months ago

Next > < Previous

Question

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

Solutions

Expert Solution

Related Solutions

Create a web page using PHP that allows the users to create an account (a username...

Choose a software system (or a web page) that you think will benefit the users if...

For this assignment you are required to create a web page displaying a recipe of your...

Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...

In this assignment you will create a web page about your favorite sports to play or...

1 -Create the code to generate a default web page. The contents of this page should...

3.32 Prog4-Branches-Listing names A university has a web page that displays the instructors for a course,...

Create a web page that contains a simple math test. The page should have the following...

Problem Description Write a web page that allows a person to enter address information, salutation, and...

For your final project, you are to create a two-page web application of your choice. ASP.NET...