Results 1 to 4 of 4

Thread: Help on Javascript Task - DOM

  1. #1
    Join Date
    Jun 2008
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Help on Javascript Task - DOM

    I am not very proficient in Javascript but I need to create a cross-browser (works in Firefox and MS IE) input screen that takes in a user’s information for an order via the following:

    Full Name (text field)
    Address (textarea)
    Gender (radio button)
    Date of birth (three dropdown lists – day, month, year)
    “Send me newsletter” (checkbox)
    Hidden total value for order (hidden field)
    “Submit Order” button (button).

    When the user is done inputting the info, I need to validate using the rules below:
    At least 3 characters required in name
    Must be over 18 years old
    Gender must be selected

    If validation passes, show the information in an alert box and write ‘Your order has been submitted’. Otherwise, alert the user with the appropriate validation error and set focus on the input field that failed validation.

    I have a script that I've been working with all week and weekend and I am truly frustrated. The script is quite lengthy but if you would take a look and see where I'm going wrong I would truly appreciate it. I attached it below.

    Jus

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Total mess. I question some of your choices for input names, and especially the use of a nested form for the order field, but I'm not going to worry too much about any of that, as they could be dictated by other things I have no knowledge of. Here's the script:

    Code:
    <script type='text/javascript'>
    function validate(f){
    var e = f.elements;
    if(e['name'].value.length < 3){
    alert('At least 3 characters required in name');
    e['name'].focus();
    return false;
    }
    for (var fbut, cbut, v = false, i = e.length - 1; i > -1; --i)
    if(e[i].name && e[i].name == 'radioGroup'){
    fbut = e[i];
    if(fbut.checked){
    v = true;
    cbut = fbut.value == 'first'? 'Male' : 'Female';
    }
    }
    if (!v){
    alert('Gender must be selected');
    fbut.focus();
    return false;
    }
    var y = new Date().getFullYear();
    if(y - e['birthYear'].options[e['birthYear'].selectedIndex].value < 18){
    alert('Must be at least 18 years old');
    e['birthDate'].focus();
    return false;
    }
    var a = 'name: ' + e['name'].value + '\n' +
    'address:\n' + e['address'].value + '\n' +
    'gender: ' + cbut + '\n' +
    'DOB: ' + e['birthDate'].options[e['birthDate'].selectedIndex].value + ' ' +
    e['birthMonth'].options[e['birthMonth'].selectedIndex].text + ' ' +
    e['birthYear'].options[e['birthYear'].selectedIndex].value + '\n' +
    'newsletter: ' + (e['news'].checked? 'Yes' : 'No') + '\n' +
    'total: ' + document.forms['order'].elements[0].value;
    alert(a);
    return true;
    }
    </script>
    Your markup can remain mostly unchanged. However, do make these few additions/changes (highlighted):

    Code:
    <form id="form1" name="form1" action="#" onsubmit="return validate(this);">
    and at the bottom:

    Code:
    <input type="submit" id="order_button" name="order_button" value="Submit Order" />
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2008
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    John,

    Thank a bunch. It worked great. Question: Would the below portion of the script I did have worked and if so, what was wrong with it? Forgive me, I know not what I do.

    function isRequired(formField) {
    switch (formField.type) {
    case 'text':
    if (form1.name.value.length<3)
    alert('At least 3 characters required in name');
    return false;
    case 'select-one':
    bday = new Date(getOp("birthYear"), getOp("birthMonth"), getOp("birthDate"));
    return !! (((new Date()).getTime() - bday.getTime() ) > 568021248000)
    if (formField.value)
    return true;
    return false;
    case 'radio':
    for radios = formField.form[formField.name];
    for (var i=0;i<radios.length;i++) {
    if (radios[i].checked) return true;
    }
    else {
    alert('Gender must be selected');
    return false;
    case 'checkbox':
    return formField.checked;
    }
    }

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I don't think so, and a lot. For one thing:

    Code:
    switch (formField.type)
    could never equal/trigger:

    Code:
    case 'select-one':
    For another:

    Code:
    for radios = formField.form[formField.name];
    is meaningless at best, probably would trigger an error. And even if it there weren't a problem with it, this part:

    Code:
    formField.form[formField.name]
    means:

    Code:
    formField
    So why bother with all that?


    Their are numerous other lapses in logic (and/or whatever), as well as dependence upon other code that I cannot see or evaluate.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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