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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Hide or Display Form Field when page loaded

    I have a form with three fields. When the user changes the value of field1, the form displays either field2 or field3. This works fine for NEW records.

    However, I'm running into a problem when trying to EDIT an existing record. When the form is loaded, I need to test the value of field1 and display either field2 or field3. I've tried using the form onload event, but do not know how to access the value of field1.

    I'm using Javascript and div tags.

    This is what I have so far.

    <script type="text/javascript">

    function hide(obj)
    obj1 = document.getElementById(obj);
    obj1.style.display = 'none';
    }

    function show(obj)
    {
    obj1 = document.getElementById(obj);
    obj1.style.display = 'block';
    }

    function show_other(optionValue)
    {
    if(optionValue=='C') { show('divClass');} else{hide('divClass'); }
    if(optionValue=='W') { show('divWorkshop');} else{hide('divWorkshop'); }
    }
    </script>

    /* Field1 - is a drop down list */
    <select name="ClassType" size="1" onchange="show_other(this.value)">
    ...
    </select>

    /* Field2 */
    <div id="divClass">
    ...
    </div>

    /* Field 3 */
    <div id="divWorkshop">
    ...
    </div>

    Appreciate any assistance.
    Thanks
    Peter

  • #2
    New Coder
    Join Date
    Feb 2011
    Posts
    41
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Hello ,

    Is that value is stored in the table ??

    if so please use retrieve the value to the variable and then check it.

    use ajax to retrieve value from database .

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Code:
    <script type = "text/javascript">
    function checkField1() {
    var val = document.getElementById("ClassType").value;
    if(val=='C') { show('divClass');} else{hide('divClass'); }
    if(val=='W') { show('divWorkshop');} else{hide('divWorkshop'); }
    }
    </script>
    
    /* Field1 - is a drop down list */
    <select name="ClassType" id = "ClassType" size="1" onchange="show_other(this.value)">
    
    <body onload = "checkField1()">

    Quizmaster: In which English county is the Cornish language spoken?
    Contestant: Devon.

    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.

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, the value of field1 is stored in a database table.

    I've never used AJAX, so I was hoping there would be a simple solution with Javascript and div tags.

    Regards
    Peter

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for the code Philip.

    Your solution works fine in IE, but Firefox does not like this line -
    var val = document.getElementById("ClassType").value;

    It aborts with this error message:
    Error ``document.getElementById("ClassType") is null

    What do you think?

    Regards
    Peter

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    I think you forgot to add id = "ClassType" to the element. Philip_M marked this part BLUE

  • #7
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, you are absolutely right.

    The script is now working perfectly in IE and Firefox.
    Thank you for your help.

    Here is the final working version.

    <script type="text/javascript">
    function checkField()
    {
    var val = document.getElementById('ClassType').value;

    if(val=='C') {
    show('divClass');
    hide('divWorkshop');
    }
    else {
    show('divWorkshop');
    hide('divClass');
    }
    }

    function hide(obj)
    {
    var obj1 = document.getElementById(obj);
    obj1.style.display = 'none';
    }

    function show(obj)
    {
    var obj1 = document.getElementById(obj);
    obj1.style.display = 'block';
    }
    </script>

    <body onload=checkField();>

    /* Field1 - is a drop down list */
    <select name="ClassType" id = "ClassType" size="1" onchange="checkField(this.value)">
    ...
    </select>

    /* Field2 */
    <div id="divClass">
    ...
    </div>

    /* Field 3 */
    <div id="divWorkshop">
    ...
    </div>

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    BTW, when posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.

    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.


  •  

    Tags for this Thread

    Posting Permissions

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