SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2003
    Location
    London, UK.
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamically building a form

    Hi,



    Im trying to make a "step through" form.

    The form consists of 3 headings with fields in each.

    For the first heading it has a Browse button and a text field... what I want to happen is that as soon as the user has typed in to the text field - the next part of the form appears.

    In the next part of the form the user has to select 4 different options from a drop down menu - once all of these are filled in I want the next part of the form to come up - which is a Submit button.

    Can anyone give me any pointers with this?




    James

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2003
    Location
    London, UK.
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    more...

    I'm new to javascript - so this is what I bashed out just now... it doesnt work though... its probably something stupidly simple though:


    <SCRIPT LANGUAGE="JavaScript"><!--
    function showLayer(){
    if (document.form1.text1.value.length > 0) {
    document.layers['layer1'].visibility="visible";
    }
    }
    //--></SCRIPT>




    <form name="form1" id="form1">
    <input name="text1" type="text" onChange="showLayer();" size="50" maxlength="50">
    </form>
    <br>
    <div id="layer1" style="position:absolute; z-index:1; visibility: hidden;">
    This is a test</div>





    Thanks,



    James

  3. #3
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Is something like this what you need?

    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var divObj = (document.layers) ? document.layers : ( (document.all) ? document.all : document.getElementById) ;

    function showLayer(divID)
    {
    var divStyleObj = (document.getElementById) ? divObj(divID).style : ( (document.layers) ? document.layers[divID] : document.all[divID].style );
    //if (document.form1.text1.value.length > 0) {
    divStyleObj.visibility = 'visible';
    //document.all['layer1'].style.visibility="visible";
    //}
    }
    function submitIt(url)
    {
    window.open(url);
    }
    //--></SCRIPT>


    <form name="form1" id="form1">
    <input name="text1" type="text" onChange="showLayer('layer1');" size="50" maxlength="50">
    </form>
    <br>
    <div id="layer1" style="position:absolute; z-index:1; visibility: hidden;">
    <select name="a" onChange="submitIt(this.options[selectedIndex].value)">
    <option value="return(false">Select a site</option>
    <option value= "http://members.aol.com/grassblad"> GrassBlade</option>
    </select>
    </div>

    If interested, you might look at the "Validating Forms" tutorial/script at my site (GrassBlade) to see how to submit from a function (without using the onsubmit handler) You also might want to look at the dHTML tutorials.

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2003
    Location
    London, UK.
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    this is what worked for me

    Thanks Vincent. I figured this out about 2 minutes ago...

    This worked for me:


    function showLayer(){
    if(document.layers){
    if (document.uploadform.description.value.length > 0) {
    document.layers['layer1'].visibility = "visible";
    }
    else
    {
    document.layers['layer1'].visibility = "hidden";
    }
    } else {
    theDiv = document.getElementById('layer1');
    if (document.uploadform.description.value.length > 0) {
    theDiv.style.visibility = "visible";
    }
    else
    {
    theDiv.style.visibility = "hidden";
    }
    }
    }



    Then the extra part of the form was in div tags....

    The extra part of the form was triggered by onKeyUp on the text field form element.



    James

  5. #5
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    if you just copied the following from your code, it will not work since you didn't define theDiv (as you did for "...ElementBy..."
    else
    {
    theDiv.style.visibility = "hidden";
    }
    Also, you neglected 'document.all[...' (IE 4+)
    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2003
    Location
    London, UK.
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I did define theDiv.. its before the if...

    Can you expand on the document.all problem?




    James

  7. #7
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Yes I did define theDiv.. its before the if...
    So you did. Guess I need new eyeballs.

    Can you expand on the document.all problem?
    nn4+ = document.layers[...]
    ie4+ = document.all[...]
    new browsers = document.getElementById(...)

    that's why I wrote this earlier:
    Code:
    var divObj = (document.layers) ? document.layers : ( (document.all) ? document.all : document.getElementById) ;
    
    function showLayer(divID)
    {
    var divStyleObj = (document.getElementById) ? divObj(divID).style : ( (document.layers) ? document.layers[divID] : document.all[divID].style );

    If still confused, see the dHTML tutorials/scripts at my site (GrassBlade).

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  8. #8
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    A warning using "visibility:hidden".
    Search engines penalize sites that they find this in.
    Make sure that all objects load as visible, then make them hidden onload. Do this and it'll save you alot of work in the future.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if


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
  •