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
    Aug 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Showing arrays based on conditions

    Hi all,

    I am relatively new to the forum, so I apologize if I am out of line asking generic questions on Javascripts.

    The issue I am having is showing arrays or hiding arrays based on selections of a drop-down menu then again for a checkbox or toggle selection. I managed to accomplish only half of this, is javascript capable of doing so? pasted below is working code for showing and hiding arrays based on one condition ( the drop down selection)

    Thanks for the help !

    Code:
    function togglespan(strState,strSpanList) {
    // shows or hides an array of elements
    	var arrSpanList=strSpanList.split(";");
    	// parse the array
    	for (strSpanID in arrSpanList) {
    		if (!strState) {
    			if (document.getElementById(arrSpanList[strSpanID]).style.display=='none') {
    				document.getElementById(arrSpanList[strSpanID]).style.display='block';
    			} else if (document.getElementById(arrSpanList[strSpanID]).style.display=='block') {
    				document.getElementById(arrSpanList[strSpanID]).style.display='none';
    			}
    		} else if (strState!='null'){
    			document.getElementById(arrSpanList[strSpanID]).style.display=strState;
    		}
    	}
    }
    function changeValue(strValue,strInput) {
    // update form fields with the requested template
    	document.getElementById(strInput).value = strValue;
    	switch (strValue) {
    	case 'Email - Standard':
    		updateSignature();
    		document.getElementById('alertspan').innerHTML="<b style='background-color:white;color:red;font-size:14px;font-family:segoe UI'>Please remember to <u>Always proof read emails</u> before sending them to your customer</b><br />";
    		togglespan('block','customernamespan;servicerequestnumberspan;servicerequestnumberspan;standardspan;signaturespan');
    		togglespan('none','casewellnessspan;rimcasenumberspan;onbehalfofspan;timezonespan;randomcodespan;SOAP;PSIDTemplate;closing;batchdatespan;businessjustifcation;emailaddressspan;phonenumberspan;tslconsultspan;optinspan;optspan;psidstandardspan');
    		document.getElementById('ptochange').innerHTML = 'Email Message Body:';
    		document.form1.standard.value = document.form1.assessment.value;
    		break;
    	case 'Email - Unsupported':
    		updateSignature();
    		document.getElementById('alertspan').innerHTML="<b style='background-color:white;color:red;font-size:14px;font-family:segoe UI'>Please remember to <u>Always proof read emails</u> before sending them to your customer</b><br />";
    		togglespan('block','customernamespan;servicerequestnumberspan;standardspan;signaturespan');
    		togglespan('none','casewellnessspan;rimcasenumberspan;onbehalfofspan;timezonespan;randomcodespan;SOAP;PSIDTemplate;closing;batchdatespan;businessjustifcation;emailaddressspan;phonenumberspan;tslconsultspan;optspan;optinspan;psidstandardspan');
    		document.getElementById('ptochange').innerHTML = 'Unsupported issue:';														
    		break;
    	case 'Email - Closing':
    		updateSignature();
    		document.getElementById('alertspan').innerHTML="<b style='background-color:white;color:red;font-size:14px;font-family:segoe UI'>Please remember to <u>Always proof read emails</u> before sending them to your customer</b><br />";
    		togglespan('none','casewellnessspan;rimcasenumberspan;onbehalfofspan;timezonespan;randomcodespan;SOAP;PSIDTemplate;batchdatespan;businessjustifcation;emailaddressspan;phonenumberspan;tslconsultspan;optspan;optinspan;psidstandardspan');
    		togglespan('block','standardspan;customernamespan;servicerequestnumberspan;closing;signaturespan');
    		document.getElementById('ptochange').innerHTML = 'Issue Description: ';
    		document.form1.standard.value = document.getElementById('ProblemStatement').value;
    		document.form1.input4.value = document.form1.assessment.value;
    		break;
    .....
    PS

    I added the ... on the end because it repeats basically.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    It certainly seems possible, but there may well be a simpler way of going about it than what you have chosen.

    Which half did you accomplish? and what are you having trouble with? maybe posting some accompanying html and the full code (or a simplified version of both) will elicit some answers.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,641 Times in 4,603 Posts
    I would like to point out that if you are really toggling <span> elements (you call your function togglespan) then toggling between "none" and "block" may be the wrong thing, entirely.

    <span>s are *inline* elements, meaning (for example) that you can do stuff like this:
    Code:
    This is an <span style="color: red;">example</span> of an inline element.
    and it will appear in the browser all on the same line.

    If you change span to display: block; then that line would end up broken:
    Code:
    This is an 
    <span style="display: block; color: red;">example</span> 
    of an inline element.
    That is, on multiple lines in the browser.

    Normally, with <span>, you would want to toggle between "none" and "inline" (instead of "block").
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    @ xelawho

    I would value input on an easier way, have any suggestions? I only chose Javascript because its what i knew best... and that's not saying much. I managed to have elements hide or show depending on the dropdown selection which wasn't posted in the code (sorry )

    @ Old Pedant
    Thanks for pointing this out. It was a concern I was having on the overall format, but just getting down my basic idea is still holding me back.


    My main goal of this script was to simply take input values and have them generate auto responses for email's. Its essentially a form that once completed, copies to your clipboard and paste wherever you wish. Problem I am having relates to the overall format, I want values that are relevant to present them selves for input and non-relevant values to hide. When I run the script, a the values do change when you select the first drop down menu. The same doesn't apply when you apply another value to a toggle later in the code.

    If you couldn't tell I work in Tech support, so I have a lot of emails that need to be sent out. I am hoping byu the end of this it will make things easier in the long run.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,641 Times in 4,603 Posts
    A better way might be to simply hide everything to begin with and then make an array of things to show for each category, putting them all into a master object.

    After all, you don't really need to ever hide anything, do you? Once you have checked a category for the response, you want to show (additional) items, not hide ones already selected.

    And then just start over with each response, starting with everything hidden?

    Example:
    Code:
    var categories = {
        "Email - Standard" : ["customernamespan", "servicerequestnumberspan", 
                                         "servicerequestnumberspan", "standardspan", "signaturespan" ],
        "Email - Unsupported" : ["customernamespan", "servicerequestnumberspan", 
                                               "standardspan", "signaturespan"].
         ...
    };
    
    ... get the value from checkbox/select ...
    var choice = ... one of the above categoried ...
    
    var category = categories[choice];
    for ( var s = 0; s < category.length; ++s )
    {
         document.getElementById(category[s]).style.display = "block"; /* or "inline" */
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    tony0706 (08-29-2012)

  • #6
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    @Old Pedant

    Thanks, I suppose it doesn't need to be hidden. the first two selections in this are the ones that dictate what should be filled in, seems to have worked. I will do some more work on the formatting, but this saved my sanity. I appreciate the assistance!


  •  

    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
    •