Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Help with form validation and output information from a user

    I am learning javascript and having troubles, how do I add what a user inputs into a drop down list of choices, take that value (lets say 7 ) and add it to a price ( lets say $7 ) and display it in a box.This is what I am trying to accomplish, so far I am stuck on this part and the growing of the button, I'm using onmouseover and onmouseout but it only works in FF nor webkit like Chrome Here is the assignment: When the page is loaded, pop up the message: Please complete all information and then click the “Register Now” button (extra credit – use unobtrusive Javascript to attach to load event)

     Personal information
    a. Solicit first name, last name, email, birthdate (as three separate text boxes for month, day and year)
    b. Validation:
    i. All fields are required
    ii. Email must be a valid email address (state your criteria for this near the field)
    iii. Birthdate must be validated to be numbers and also valid values (for example, 31 is not a valid day of the month for September)
     Get contestant level
    a. Create an array with at least four rank values: for example, beginner, intermediate, advanced, etc.
    b. Use a Javascript loop to create a set of radio buttons with those values.
    c. Validation:
    i. Verify that one of the radio buttons was selected

     Display a list of at least three possible tournament events using checkboxes
    a. Validation: at least one must be checked.

     Get # of spectator tickets
    a. Use a Javascript loop to create a <select> element with values: 0 through 15
    b. An adjacent text box or <div> should display the cost of spectator tickets based on the current selection. Assume tickets cost $7 each.

     A check box should have a label: “Yes! Please register me”.
    a. Validation: It must be checked.

     Create a register button as an html element or as an image. Change the button such that its height grows by 30 pixels and then shrinks back to original size when the user hovers over it (hint – use Javascript to change the style height property).

     Validation errors should be displayed in a <div> section adjacent to the offending element.

     Display a summary of all information using a “confirm” element. If the user selects “ok”, proceed to a thank you page (set form action to ‘thankyou.html’). Include sum of total costs:
    $25 entry fee includes first event
    $6 for each additional event
    $7 each for spectator tickets

  2. #2
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is what I have so far:

    <!DOCTYPE html>

    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Brown Final_Working</title>
    </head>
    <body>
    <script type="text/javascript">
    alert("Please fill out all the information, then click \'register now\'");
    function validate() {
    //validation goes here
    with (document.form1) {
    // name is required
    if(firstName.value == "") {
    alert("Your First name must be filled in.");
    firstName.focus();
    return false;
    }
    // last name is required
    if(lastName.value == "") {
    alert("What month were you born in?");
    lastName.focus();
    return false;
    }

    //
    if (year.selectedIndex == 0) {
    alert("We need to know the year you were born in");
    year.focus();
    return false;
    }

    // age of persin is 0-100
    if (isNaN(year.value)) {
    alert("Age Must be a Number");
    year.focus();
    return false;
    }

    var yearVal = parseInt(year.value); {
    if(year.value != "" && yearVal < 1900 || yearVal > 2011) {

    alert("Invalid Age");
    year.select();
    year.focus();
    return false;
    }

    // email is required
    if(email.value == "") {
    alert("We need your email");
    email.focus();
    return false;
    }

    // email must be correct format
    //has a @ and a @ comes before the .
    // password is required

    posOfAt = email.value.indexOf("@");
    posOfDot = email.value.indexOf(".");
    if(posOfAt == -1 || posOfAt == -1);

    // must match confirming password
    }//end with all validated, ok to do action

    return true;
    }

    </script>
    <script type="text/javascript">
    function makeGrow() {
    document.getElementById("btn1").style.height="30px";
    }
    function norm() {
    document.getElementById("btn1").style.height="";
    }
    </script>


    <form name='form1' onsubmit="return validate()">
    <table cellspacing='0' cellpadding='4'>
    <tr>
    <td>Enter first name:</td>
    <td><input type="text" name='firstName' /></td>
    </tr>
    <tr>
    <td>Enter Last name:</td>
    <td><input type="text" name='lastName' /></td>
    </tr>
    <tr>
    <td>Select Month</td>
    <td>
    <select name='month'>
    <option>January</option>
    <option>February</option>
    <option>March</option>
    <option>April</option>
    <option>May</option>
    <option>June</option>
    <option>July</option>
    <option>August</option>
    <option>September</option>
    <option>October</option>
    <option>November</option>
    <option>December</option>
    </select>
    </td>
    </tr>
    <tr>
    <td>Year</td>
    <td><input type="text" name="year" /></td>
    </tr>
    <tr>
    <td>Day</td>
    <td><input type="text" name="day" /></td>
    </tr>
    <tr>
    <td>Enter your email address</td>
    <td><input type="text" name="email" /></td>
    </tr>
    <tr>
    <td>Contestant Level</td>
    <td>
    <script type="text/javascript">
    level= new Array("beginner", "intermediate", "advance", "expert");

    for (var i=0; i < level.length; i++) {
    document.write(level[i] + "<input type='radio' value=' " + level[i] + " ' name='level' /> ");
    }
    </script>
    </td>
    <tr>
    <td>
    <input type="checkbox" name="box1" value="One" />Forms
    <input type="checkbox" name="box2" value="Two" />Weapons
    <input type="checkbox" name="box3" value="Three" />Full Contact.
    </td>
    </tr>
    <tr>
    <td>Number of Spectators</td>
    <td><script language="javascript">

    tickets = new Array(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15);

    document.write("<select name='tickets'>");
    for(i=0; i<tickets.length; i++) {

    document.write("<option>" + tickets[i] + "</option>");

    }
    </script></td>
    </tr>

    <tr>
    <td colspan="2"><input type="submit" id="btn1" value = "Register Now" onmouseover="makeGrow()" onmouseout = "norm()" /></td>
    </tr>
    </table>
    </form>
    </body>
    </html>

  3. #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    19,551
    Thanks
    221
    Thanked 2,712 Times in 2,686 Posts
    This is homework so we are not allowed under forum rule 1.5 to do more than give you hints.

    Please specify exactly what the problem is and post (only) the relevant code.

    Form validation of the pattern if(firstName.value == "") is barely worthy of the name, and virtually useless, as even a single space, an x or a ? will return false, that is pass the validation. Numeric values, such as zip codes and phone numbers, should be validated as such. Ditto email addresses. Simply checking for an @ and a dot is far from adequate. This topic has been covered many times before in this forum.

    When posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.


    It is your responsibility to die() if necessary….. - PHP Manual


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •