SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Modifying form button style after two selections made

    Hello all,

    This is my first time here and my first post so please bear with me as I an new to the world of JS. I have been asked to implement a "unique" function on a form on our Website. You see we are setting up a PayPal cart and we need to have 2 SELECT fields where users select their country and tax. To prevent users from submitting before an option is selected from each field I would like the submit button the be hidden using CSS. I was able to creating something basic using the coding below for only 1 form field:

    HTML

    <form id="form1">
    <select name="country">
    <option value="">Please choose...</option>
    <option value="CA">Canada</option>
    <option value="US">United States</option>
    </select>
    <input type="submit" value="Submit" style="display:hidden;">
    </form>

    JS

    function showButton(objectID) {
    var theElementStyle = document.getElementById(objectID);
    if(theElementStyle.style.display == "hidden") {
    theElementStyle.style.display = "visible"; }
    }

    Mergine the two

    <form id="form1">
    <select name="country">
    <option value="">Please choose...</option>
    <option value="CA" onSelect="showButton('omega');return false;">Canada</option>
    <option value="US" onSelect="showButton('omega');return false;">United States</option>
    </select>
    <input id="omega" type="submit" value="Submit" style="display:hidden;">
    </form>

    Of course this does not handle two form elements. In a perfect world the final product would work as follows:

    A user MUST select a value from each select field that is not "Please choose..." as it has a null value.

    Only after a valid selection is made from both fields would the button be set to visible

    And the script would need some sort or protection against a user selecting two valid options, making the button appear, and then selecting the "Please choose..." which would leave the button visible. It might work like something below (not real code):

    if (form.form1.country.value NOT == null AND form.form1.tax.value NOT == null {
    omega.style.display = "visible";
    } else {
    omega.style.display = "hidden";
    }

    I would have no idea however, how to call this fantasy function ... it would need to be monitoring the form at all times for valid selections. If two valid selections are made the button is visible otherwise it is not. Please, any help with this would be forever appreciated. I am studying my JS manuals and maybe one day I can return the favor. Thank you.

    Hugz

    Jenny

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <script type="text/javascript">
                function validateCombo() {
                    var combo = document.getElementById('country');
                    var button = document.getElementById('omega');
                    if(combo.value != "")
                        button.style.visibility = 'visible';
                    else
                        button.style.visibility = 'hidden';
    
                        // it seems that style.display when set to block puts the
                        // button below the combo box.
                }
            </script>
        </head>
        <body>
            
            <form id="form1">
                <select id="country" onchange="validateCombo()">
                    <option>Please choose...</option>
                    <option value="CA">Canada</option>
                    <option value="US">United States</option>
                </select>
                <input id="omega" type="submit" value="Submit" style="visibility:hidden;">
            </form>
    
    
        </body>
    </html>

    Any good?



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
  •