#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    13
    Rep Power
    0

    Dynamically unhide input field


    Hi I have created a html form in Cold Fusion. This form allows a user to select a trasnporation mean for a particular day and the user can add as many days as desired. So the form may look like this after the user had added the information for 2 days:

    Day 1:
    Choose one: 0 Auto x Train
    Train info:_________

    Day 2:
    Choose one: x Auto 0 Train
    Auto info:_________

    Add a day Button

    Here's some explaination:
    - The radio box controls which input field to display for that day.
    - Every time the user clicks on the Submt Button it will add a 'day' with a screen 'refreshed'.
    The problem I am encountering is when the user adds a new day, the screen refreshed but 'does not' display the Train/Auto field/value that was entered before. How do I force the screen to display them? Here is a portion of the code:


    <form name="Test" action="Travelform.cfm" method="post" onSubmit="checkFields()">

    <cfloop from="1" to="#DaysToShow#" index="i">
    Choose One: <input type="radio" name="Day#i#TrType" value="Auto" <cfif IsDefined('FORM.Day#i#TrType) AND (Evaluate('FORM.Day& i & TrType) EQ "Auto" )>checked</cfif> onclick="checkTransType(this.value, #i#)"> Auto
    <input type="radio" name="Day#i#TrType" value="Train" <cfif IsDefined('FORM.Day#i#TrType) AND (Evaluate('FORM.Day& i & TrType) EQ "Train" )>checked</cfif> onclick="checkTransType(this.value, #i#)"> Train

    <div id="Day#i#AutoID" style="display:none;">
    Auto:
    <input type="text" id="Day#i#Auto" <cfif IsDefined('FORM.Day#i#Auto)>value="#Evaluate('FORM.Day& i & 'Auto')#"</cfif>size=5">
    <input type="text" id="Day#i#Train" <cfif IsDefined('FORM.Day#i#Train)>value="#Evaluate('FORM.Day& i & 'Train')#"</cfif>size=5">
    </cfloop>
    <input type="submit" name="SubmitButton" value="Add Another Day">

    Here's the javascript that hide/unhide the field:
    function checkTransType(selectedType, row){
    if (selectedType == 'Auto'){
    document.getElementById('Day'+row+'AutoID').style.display = 'block';
    document.getElementById('Day'+row+'TrainID').style.display = 'none';
    } else if (selectedType == 'Train'){
    document.getElementById('Day'+row+'AutoID').style.display = 'none';
    document.getElementById('Day'+row+'TrainID').style.display = 'block';
    }

    Can someone please help?
  2. #2
  3. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,281
    Rep Power
    968
    Are you saying the ones you added aren't even created again after the refresh? Or are they created but just not visible?

    If it's the first of those, the issue is probably that you're not passing the new DaysToShow back into the form. Since that variable controls the loop that creates the form elements, if DaysToShow doesn't have the right number, you won't get the right number of elements created.

    Where is DaysToShow coming from?
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    13
    Rep Power
    0
    Hi:
    DaysToShow is incremented everytime after I click the Add-A-Button. So it keeps track of how many days have been added.
    I have other input fields (not shown here) on the form too. The values of those fields from each of the previous days are redisplayed correctly when the screen is refreshed. The only thing that does not get redisplayed is the dynamic input fields 'Day#i#Auto' and 'Day#i#Train' as they only become visible when the radio button is clicked.
    You see, as a day is added, the user clicks the radio button to select Auto or Train. With that key click, either the Auto or Train input field will become 'visible'. But when the screen is re-displayed to display all the previous days and the newly-added day, there is no keypress that wll trigger either 'Day#i#Auto' and 'Day#i#Train' to become visible.

    And I don't know how to force an invocation of the function checkTransType() to unhide either 'Day#i#Auto' or 'Day#i#Train'.
    Did I explain this clearly?
  6. #4
  7. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,281
    Rep Power
    968
    When they click the button, does the page actually reload from the server? Or does the button click add the new elements dynamically to DOM?
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    13
    Rep Power
    0
    Originally Posted by kiteless
    When they click the button, does the page actually reload from the server? Or does the button click add the new elements dynamically to DOM?
    It is a CF application. So I assume when I click the 'Add A Day' submit button, it submitted the form so the page must have reloaded from the server. But I am not sure...

    Well I tried something different, I created the following Javascript function to invoke the other javascript function 'checkTransType() to turn the selected field to become visable. But it does not work.

    function RedisplayField(searchType, row) {
    for (var i=0;i<searchType.length;i++) {
    if (searchType[i].checked) {
    if (searchType[i].value == "Auto")
    { checkTransType("UPC", row); }
    else
    { checkTransType("PLU", row); }

    break;
    }
    }
    }

    <input type="submit" name="SubmitButton" value="Add A Day" onClick="RedisplayField('FORM.Issue#i-1#SearchType');">
  10. #6
  11. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,281
    Rep Power
    968
    Yes, the issue is that the hidden field is only made visible when the user actually clicks on the radio button. So you need to conditionally determine whether the style of the wrapping DIV should include the "display:none" style or not. Because right now it will ALWAYS be display:none until the user actually clicks on the radio button.

    So my guess is something like this. (Note that you don't need all the Evaluate() calls in your current code, just use the bracket notation to specify the dynamic structure key in the form scope):

    <cfset showThisDay = StructKeyExists( Form, 'Day#i#TrType' ) AND Form[ 'Day#i#TrType' ] EQ 'Auto' />
    <div id="Day#i#AutoID" style="display:<cfif showThisDay>block<else>none</cfif>;">
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    13
    Rep Power
    0
    Hi:
    Thanks for so much replying to me....

    I followed your code example and made the changes but still does not work, as a matter of fact, now both fields are always displayed instead of one displayed/one hide. Here is my changes:

    <<cfset showDayField = StructKeyExists( Form,'Day#i#TrType' ) AND (Form['Day#i#TrType'] EQ "Auto")>
    <div id="Day#i#AutoID" style="display:<cfif showDayField >block<else>none</cfif>;">
    <input type="text" id="Day#i#Auto" <cfif IsDefined('FORM.Day#i#Auto)>value="#Evaluate('FORM.Day& i & 'Auto')#"</cfif>size=5">
    </div>

    <cfset showDayField = StructKeyExists( Form,'Day#i#TrType' ) AND (Form['Day#i#TrType'] EQ "Train")>
    <div id="Day#i#TrainID" style="display:<cfif showDayField >block<else>none</cfif>;">
    <input type="text" id="Day#i#Train" <cfif IsDefined('FORM.Day#i#Train)>value="#Evaluate('FORM.Day& i & 'Train')#"</cfif>size=5">
    </div>

    It should work as it finds the radio button value and from there set to 'block' or 'none' dynamically based on the result. But issteadit displayes both fields all the time now.
  14. #8
  15. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,281
    Rep Power
    968
    I don't see how what you're saying is possible. The two conditions test different things. It's impossible for both of them to evaluate to true.

    One checks whether Form['Day#i#TrType'] equals "Auto", the other checks whether it equals "Train". It can't be both.

    You can make it a bit more clear by using separate variable names:

    Code:
    <cfset showAutoField = StructKeyExists( Form,'Day#i#TrType' ) AND (Form['Day#i#TrType'] EQ "Auto")>
    <div id="Day#i#AutoID" style="display:<cfif showAutoField>block<else>none</cfif>;">
    <input type="text" id="Day#i#Auto" <cfif IsDefined('FORM.Day#i#Auto)>value="#Evaluate('FORM.Day& i & 'Auto')#"</cfif>size=5">
    </div>
    
    <cfset showTrainField = StructKeyExists( Form,'Day#i#TrType' ) AND (Form['Day#i#TrType'] EQ "Train")>
    <div id="Day#i#TrainID" style="display:<cfif showTrainField>block<else>none</cfif>;">
    <input type="text" id="Day#i#Train" <cfif IsDefined('FORM.Day#i#Train)>value="#Evaluate('FORM.Day& i & 'Train')#"</cfif>size=5">
    </div>
    If they both still always display, you're doing something else that you're not showing. Because, again, there's no way the Day#i#TrType can be both "Auto" and "Train" at the same time.
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    13
    Rep Power
    0
    My bad. I have <else> instead of <cfelse> so it always execute the 'Block' on both coditions, that's why both fields showed u. Now I made he chage and only one field is displayed.


    However , the value of the input field is not being displayed even though I have the field checks for if it is defined then put in the value as followed:

    <input type="text" id="Day#i#Train" <cfif IsDefined('FORM.Day#i#Train)>value="#Evaluate('FORM.Day& i & 'Train')#"</cfif>size=5">
    </div>

    All the other fields on the form displayed the value except those two input fields that was hidden before. I'll check to make sure the value was saved like all the other onces.

IMN logo majestic logo threadwatch logo seochat tools logo