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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Location
    Bozeman, MT
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Dynamically showing field based on text value from another field

    I have a text field, call it income, that when the input is > 0 I need to dynamically show the next text box, and if it is blank hide the next text box. I would like to use onBlur but can't seem to get it to work.

    Can I do this?

    Help

  • #2
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    Show some code please to help you.
    Software and cathedrals are much the same - first we build them, then we pray.

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Location
    Bozeman, MT
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This is what I have been messing with, What I need is a function to show or hide the second field, what I can't figure out is how to get the value from the first field into the javascript to determine whether to show/hide the second field. Hope this makes sense.



    <tr>
    <td>
    <table border="0" cellpadding="1" cellspacing="0" align="left" width="575" summary="">

    <tr>
    <td width="40%" align="left" class="display">*Additional Income<span class="smallBlack"></span>:</td>
    <td><input name="addIncome" type="text" size="12" maxlength="12" value="<? echo $_SESSION["addIncome"]; ?>"

    onBlur="showField(addIncSource)"
    >

    </td>
    <td>&nbsp;</td>
    </tr>


    </table>
    </td>
    </tr>
    <tr>
    <td>
    <div id="addIncSource" style="<? if ($_SESSION["addIncome"] > "0"){echo "display: block;";}else {echo "display: none;";}?>">
    <table border="0" cellpadding="1" cellspacing="0" align="left" width="575" summary="">
    <tr>
    <td width="40%" align="left" class="display">*Source of Additional Income:</td>
    <td><input name="addIncSource" type="text" size="30" maxlength="25" value="<? echo $_SESSION["addIncSource"]; ?>" /></td>
    <td>&nbsp;</td>
    </tr>
    </table>
    </div>
    </td>
    </tr>

  • #4
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    It might be easier to do it all with JS.

    Code:
    <input type="text" name="field1" onkeypress="toggleField(this.value,'field2')">
    <input type="text" name="field2" id="field2">
    Code:
    function toggleField(value, id) {
    document.getElementById(id).style.display=(value>0)?"block":"none";
    }
    Edit: just tested that code, if you use it use onkeyup instead of onkeypress (onkeypress toggles based on the value before the key press, onkeyup uses the most recent value)
    Last edited by gusblake; 11-18-2009 at 07:35 PM.

  • Users who have thanked gusblake for this post:

    s_martin (11-18-2009)

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Try this (includes some validation code):-

    Code:
    <form name = "myform">
    INCOME <input type = "text" name = "income" id = "income"  onblur = "showNextBox()">
    <div id = "div1" style="display:none">
    NEXT TEXT BOX <input type = "text" name = "nextTextBox" id = "nextTextBox" >
    </div>
    </form>
    
    <script type = "text/javascript">
    function showNextBox() {
    var val = parseFloat(document.myform.income.value);
    if (!val) {return false}
    if ((isNaN(val)) || (val<0)) {
    alert ("Please enter a positive numeric value for Income")
    document.myform.income.value = "";
    document.myform.income.focus();
    return false;
    }
    document.getElementById("div1").style.display="block";
    }
    </script>
    "Of course mistakes are made. Some of them are even accidental". - Spokesman for Royal Mail

  • #6
    New to the CF scene
    Join Date
    Nov 2009
    Location
    Bozeman, MT
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Yes!

    GUSBLAKE,

    Thank you, that seems to work perfectly. I am doing the actual validation with php, so I just needed a way to toggle the second field according to the value in the first.

    Sweet.


  •  

    Posting Permissions

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