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 10 of 10
  1. #1
    New Coder
    Join Date
    Apr 2012
    Location
    SLC, UT
    Posts
    23
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Having issues with form validation

    I am new here, and having massive difficulties with JavaScript, so like everything else I'm interested in, there's an awesome forum available so here I am. I have been browsing the site all night, checking stickies, searching related issues, etc but still having trouble.

    I am creating a pizza order form. Yes I see that there are previous issues with Pizza order forms, but they did not help. I've got issues with validation, and my test code does not respond at all when I click the submit button. What am I doing wrong?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Final Test 2</title>
    <script type="text/javascript">
    function crust_form() {
        if ( document.crust_form.crust.selectedIndex == false )
        {
            alert ( "Please select a Crust type." );
            return false;
        }
        else if ( document.crust_form.crust.selectedIndex == deep )
        {
    	alert ( "You selected Deep Dish Pizza.");
    	return true;
    }
    	else if ( document.crust_form.crust.selectedIndex == thin )
        {
    	alert ( "You selected Thin Crust Pizza.");
    	return true;
    }
    	else if ( document.crust_form.crust.selectedIndex == parmesagn )
        {
    	alert ( "You selected Parmesagn Cheese Crust Pizza.");
    	return true;
    }
    	else if ( document.crust_form.crust.selectedIndex == sourdough )
        {
    	alert ( "You selected Sourdough Crust Pizza.");
    	return true;
    }
    }
    </script>
    </head>
    <body>
    <form action="" onsubmit="return crust();" name="crust_form" method="post">
    <select name="crust">
      <option selected value="false">Select Crust Type</option>
      <option value="deep">Deep Dish</option>
      <option value="thin">Thin Crust</option>
      <option value="Parmesagn">Parmesagn Cheese</option>
      <option value="sourdough">Sourdough</option>
    </select>
    <input type="submit" value="Submit">
    </form>
    </body>
    </html>

  • #2
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by theratdude64 View Post
    my test code does not respond at all when I click the submit button. What am I doing wrong?

    Code:
    function crust_form() {
        
    <form action="" onsubmit="return crust();" name="crust_form" method="post">
    for 1 thing, see red bits.

  • Users who have thanked Mishu for this post:

    theratdude64 (04-02-2012)

  • #3
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,386
    Thanks
    11
    Thanked 565 Times in 558 Posts
    First: Your <select> doesn't have the attribute "multiple" so the value property of the <select> is the same as the value attribute of the selected option.

    Second, and more important: The type of the value attribute is "string", and string literals must be wrapped in string delimiter quotes like " or '

    Last but not least: Strings in Javascript are case sensitive. And "Parmesagn" has an uppercase P

    Ooooh and I nearly missed that: In onsubmit you are trying to call crust() whereas the name of the function is crust_form()!

    I strongly recommend to start using debugging techniques on your code. You wouldn't have missed any of those errors by just looking at the Javascript Console for once!

    So this should do the trick:
    Code:
    function crust() {
        if ( document.crust_form.crust.value == "false" )
        {
            alert ( "Please select a Crust type." );
            return false;
        }
        else if ( document.crust_form.crust.value == "deep" )
        {
    	alert ( "You selected Deep Dish Pizza.");
    	return true;
        }
    	else if ( document.crust_form.crust.value == "thin" )
        {
    	alert ( "You selected Thin Crust Pizza.");
    	return true;
        }
    	else if ( document.crust_form.crust.value == "Parmesagn" )
        {
    	alert ( "You selected Parmesagn Cheese Crust Pizza.");
    	return true;
        }
    	else if ( document.crust_form.crust.value == "sourdough" )
        {
    	alert ( "You selected Sourdough Crust Pizza.");
    	return true;
        }
    }
    Last edited by devnull69; 04-01-2012 at 07:54 AM.

  • Users who have thanked devnull69 for this post:

    theratdude64 (04-02-2012)

  • #4
    New Coder
    Join Date
    Dec 2010
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    <option value="Parmesagn">Parmesagn Cheese</option>

    Parm has a capitol letter.



    On your script it's lower case:

    else if ( document.crust_form.crust.selectedIndex == parmesagn )

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,892
    Thanks
    202
    Thanked 2,528 Times in 2,506 Posts
    Parmesan is so spelled
    capital is so spelled.

    else if ( document.crust_form.crust.selectedIndex == parmesagn ) does not appear in devnull's code.

    selectedIndex returns a number.


    Once a powerful king went to see an old hermit who lived in a bird's nest in the top of a tree, "What is the most important Buddhist teaching?"
    The hermit answered, "Do no evil, do only good. Purify your heart." The king had expected to hear a very long explanation. He protested,
    "But even a five-year old child can understand that!" "Yes," replied the wise sage, "but even an 80-year-old man cannot do it."

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    theratdude64 (04-02-2012)

  • #6
    New Coder
    Join Date
    Apr 2012
    Location
    SLC, UT
    Posts
    23
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Thank you all very much for your replies. I'm kicking myself for the capital P, I swear I checked that a hundred times lol. I have the firebug plugin for firefox, but I admit I'm so noobish I don't understand the console. Do you need to put code in that will write errors to the console? I'm replying on my phone but I really look forward to playing with your suggestions on my laptop

    Edit : I played with selected index versus value, and couldn't get either to work. Now I know the difference
    Last edited by theratdude64; 04-02-2012 at 12:52 AM.

  • #7
    New Coder
    Join Date
    Apr 2012
    Location
    SLC, UT
    Posts
    23
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Working great Thanks. Got firebug console working too, and have already solved issues with it. Huge relief off my chest. I'm going to be changing that up, using variables, etc.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,892
    Thanks
    202
    Thanked 2,528 Times in 2,506 Posts
    Quote Originally Posted by theratdude64 View Post
    Edit : I played with selected index versus value, and couldn't get either to work. Now I know the difference
    Study this example:-

    Code:
    <select id = "mysel" onchange = "show()">
    <option value = "">Choose a color ... </option>
    <option value = "Red">Red</option>
    <option value = "Green">Green</option>
    </select>
    
    <script type = "text/javascript">
    function show() {
    var val = document.getElementById("mysel").value;
    alert (val);
    var si = document.getElementById("mysel").selectedIndex;
    alert (si);
    }
    </script>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by Philip M View Post
    Quote Originally Posted by theratdude64 View Post
    Edit : I played with selected index versus value, and couldn't get either to work. Now I know the difference
    Study this example:-
    I think the op now knows the difference because they said

    I played with selected index versus value, and couldn't get either to work. Now I know the difference
    Last edited by Mishu; 04-02-2012 at 07:39 AM.

  • #10
    New Coder
    Join Date
    Apr 2012
    Location
    SLC, UT
    Posts
    23
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Mishu View Post
    I think the op now knows the difference because they said
    I did learn the difference above, but this helps clarify so it is greatly appreciated


  •  

    Posting Permissions

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