SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Feb 2003
    Location
    Las Vegas
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JS form flow control

    Hi guys,

    I'm very new to Javascript, and have really only used some drop-in form validation code.

    What I'm looking for is some client-side control over the flow of user input in my forms. Things like enabling/disabling different parts of the form depending on checkboxes, or other options that the user selects.

    For instance, say I have a form where the user can input their billing and shipping address. I currently have a checkbox right above the shipping address so the user can check it to indicate that their shipping address is the same as their billing address. What would be cool is if, when the user checked that box, that the values are copied into the shipping fields and then they become un-editable.

    Does anybody know of any drop-in style JS libraries that can accomplish this?

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    beetle's fValidate is pretty amazing; it's about the closest thing you'll find to a really portable, full-featured client-side form processing script around. Don't know if it does the specific behavior you cited (really more of a convenience feature than an input checker) but, if it doesn't, he's probably working on one as we speak. Pretty easy to write, actually:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    
    <script type="text/javascript" language="javascript">
    
    function too_lazy_to_populate()
    {
    		var oForm = document.forms[0];
    		oForm.elements['bill_name'].value = 'Milton Knish';
    		oForm.elements['bill_street'].value = '33 Hellish Crescent';
    		oForm.elements['bill_city'].value = 'Homer';
    		oForm.elements['bill_state'].value = 'AK';
    		oForm.elements['bill_zip'].value = '99989';
    }
    
    function is_same_as_bill(oCheckbox)
    {
    	var oForm = oCheckbox.form;
    	var bWhich = oCheckbox.checked;
    	var fields = ['name' , 'street' , 'city' , 'state' , 'zip'];
    	for (var i = 0; i < fields.length; ++i)
    	{
    		oForm.elements['ship_' + fields[i]].value = (bWhich) ? oForm.elements['bill_' + fields[i]].value : '';
    		oForm.elements['ship_' + fields[i]].readOnly = (bWhich) ? true : false;
    	}
    	if (!bWhich)
    		oForm.elements['ship_name'].focus();
    	return true;
    }
    
    </script>
    </head>
    <body>
    <form>
    <input type="button" value="do it for me" 
    onclick="too_lazy_to_populate()"><br /><br />
    <h5>Billing Address</h5>
    <input id="bill_name" name="bill_name" value="" type="text">____name<br />
    <input id="bill_street" name="bill_street" value="" type="text">____street address<br />
    <input id="bill_city" name="bill_city" value="" type="text">____city<br />
    <input id="bill_state" name="bill_state" value="" type="text">____state<br />
    <input id="bill_zip" name="bill_zip" value="" type="text">____zip code<br />
    <h5>Shipping Address / check if same as Billing Address____<input type="checkbox" 
    onclick="return is_same_as_bill(this)"></h5>
    <input id="ship_name" name="ship_name" value="" type="text">____name<br />
    <input id="ship_street" name="ship_street" value="" type="text">____street address<br />
    <input id="ship_city" name="ship_city" value="" type="text">____city<br />
    <input id="ship_state" name="ship_state" value="" type="text">____state<br />
    <input id="ship_zip" name="ship_zip" value="" type="text">____zip code<br />
    </form>
    </body>
    </html>
    Problem is, other enabling/disabling/write-preventing/whatever scenarios can become pretty application-specific, necessitating some custom code. Anything can be generalized, of course, if you have the time. Might check here.
    Last edited by adios; Nov 3, 2003 at 02:48.
    ::: certified wild guess :::

  3. #3
    SitePoint Member
    Join Date
    Feb 2003
    Location
    Las Vegas
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, fValidate is very very impressive. I just found my new JS validation tool

    Thank you for the code snippet as well. Although I don't know much about coding in javascript, I think this will help me get a foothold to what I want to do.

    Thanks again!

  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the props, adios.

    You may also want to check out qForms. It's a bit more developer-oriented, so it may be harder to use, but it has a lot of other stuff besides form validation, which is the only thing that fValidate handles.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





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
  •