www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 22

Thread: It seems so easy..am I just THAT stupid!

  1. #1
    Join Date
    Apr 2006
    Posts
    63

    It seems so easy..am I just THAT stupid!

    Ok, I have literally worked for an entire day trying to solve this problem.

    I figured out how to create buttons that can be hovered over and remain in the depressed state when selected. However, since these are buttons, I also need them to transfer the values associated with the buttons to a textarea box, where I could ideally sort and order them appropriately. I cannot seem to figure out how to activate 2 onclick commands at the same time. One onclick command is dealing with the toggle...the other needs to be passing the variable to the textbox. I am new to Javascript so ANY help you could provide would be greatly appreciated!

    Thanks in advance!
    <html>

    <head>

    <!-- define on/off styles -->
    <style type="text/css">
    .on {
    display: inline-block;
    border: 0px solid #ffffff;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 12px Arial;
    font-weight: bold;
    padding: 15px 15px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    text-shadow:-1px 3px 0px #444444;
    -moz-box-shadow:inset 0px 0px 0px 0px #444444;
    -webkit-box-shadow:inset 0px 0px 0px 0px #444444;
    box-shadow:inset 0px 0px 0px 0px #444444;
    color: #ffffff;
    background: #eeee02;
    }
    .off {
    display: inline-block;
    border: 0px solid #ffffff;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 12px Arial;
    font-weight: bold;
    padding: 15px 15px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    text-shadow:-1px 3px 0px #444444;
    -moz-box-shadow:inset 0px 0px 0px 0px #444444;
    -webkit-box-shadow:inset 0px 0px 0px 0px #444444;
    box-shadow:inset 0px 0px 0px 0px #444444;
    color: #ffffff;
    background: #5873cc;
    }
    .on:hover {
    background: #eeee02;
    text-decoration: none;
    color: #ffffff;
    }
    .off:hover {
    background:#eeee02;
    color: #ffffff;
    position: relative;
    top: 1px;
    }

    </style>
    <SCRIPT LANGUAGE="JavaScript">

    </script>

    <!-- define the toggle function -->
    <script language="javascript">
    function toggleState(item){
    if(item.className == "on") {
    item.className="off";
    } else {
    item.className="on";
    }
    }

    </script>

    </head>

    <FORM NAME="Calc" method="POST" action="takeassessment.asp" width="90%" align="center">
    <body>

    <input type="button" name="icdcode" value="Cervical Subluxation" class="off" onclick="toggleState(this)" />
    <input type="button" name="icdcode" value="Cervicalgia" class="off" onclick="toggleState(this)" />
    </body>
    <TABLE BORDER=4 align="center" width="38%">
    <TR>
    <TD>
    <INPUT TYPE="text" NAME="Input" Size="16" style="width:620px; height:100px;font-size:48px;">
    <br>
    </TD>
    <input type="submit" class="off" value="go">

    </TR>

  2. #2
    Join Date
    Feb 2012
    Location
    youTUBE
    Posts
    234

    more than one way.

    This:
    Code:
     
    <input type="button" name="icdcode" value="Cervicalgia" class="off" onclick="toggleState(this)" />
    becomes
    Code:
     
    <input type="button" name="icdcode" value="Cervicalgia" onclick="toggleState(this);toggleAgain(this);" class="off" />
    OR
    Code:
     
    <input type="button" name="icdcode" value="Cervicalgia" class="off" onclick="toggleBOAT(this)" />
    where toggleBOAT(_X) emulates a procedure rather than a function.

    In Computer Science, functions perform one duty, whereas procedures take care of multiple duties, and the noun procedure has a different connotation from the adjective procedural.
    Last edited by WyCnet; 05-06-2012 at 08:11 AM. Reason: to quote.

  3. #3
    Join Date
    Nov 2010
    Posts
    1,049
    you can load as many function calls as you like into an onclick by separating them with a semi colon -

    Code:
    <input type="button" name="icdcode" value="Cervical Subluxation" class="off" onclick="toggleState(this); otherFunc()" />
    there may well be a better way to do this, but being that you haven't shown your other function or the variable you want to put in the textbox, it's hard to say

  4. #4
    Join Date
    Mar 2011
    Posts
    1,136
    xelawho is absolutely correct that you can include more than one JavaScript function in the 'onclick' attribute, but I would suggest that if you believe you will need more than one that it's better to create a new function to be called by the element in question, and then have that new function call all of the functions that are required. As with this in the HTML:
    Code:
    <input type="button" name="icdcode" value="Cervical Subluxation" class="off" onclick="icdCodeClick(this);" />
    and then this in your JavaScript:
    Code:
     function icdCodeClick(theButton) {
       toggleState(theButton);
       otherFunc();
      }
    It makes the code much easier to maintain, especially in situations where it's necessary to return the results of one of the functions to the originating element. With the code all centralized in an easily located function in your JavaScript, changes are simple. Good luck!
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Apr 2006
    Posts
    63
    there may well be a better way to do this, but being that you haven't shown your other function or the variable you want to put in the textbox, it's hard to say
    Wow this site is awesome! Thanks so much for your prompt assistance.
    Good point. You are right...I still have some difficulties because now I'm trying to take the value of the button (if it is depressed) and insert that dynamically into a text box below, where a list of everything selected would be able to be put in a specific order (my list will have probably around 50 to 60 options, however, I will likely only have 10 to 15 selected at any given point.

    Any ideas on how to do this? I am currently doing this with checkboxes in asp, breaking out the variables and then putting them in a text box with JavaScript that has the ability to reorder. However, if a mistake is made on selecting the checkboxes then, the user has to go back, add/subtract the appropriate checkbox, resubmit and then reorder.

    That is why I am trying to make this more dynamic and have the value dynamically be shown in a text are list where some sorting can take place. I don't know anyway to that as of, yet so I would appreciate any help anyone could offer.
    Last edited by seanbennington; 05-06-2012 at 03:12 PM.

  6. #6
    Join Date
    Nov 2010
    Posts
    1,049
    being that you are already passing the button to the toggle function you can just grab its value there and insert it into the textbox. I assume that if somebody toggles off the button you would want the box to clear...

    Code:
    <script type="text/javascript">
    function toggleState(item){
    if(item.className == "on") {
    item.className="off"; 
    document.Calc.Input.value=""
    } else {
    item.className="on";
    document.Calc.Input.value=item.value
    	}
    }
    </script>
    if you are planning on having multiple lines of text in that box, it would be better to make it into a textarea - stripping the content out in the case of the user toggling off a button is a little more involved in that case, but not too much.

  7. #7
    Join Date
    Nov 2010
    Posts
    1,049
    (like this...)

    Code:
    function toggleState(item){
    if(item.className == "on") {
    item.className="off"; 
    document.Calc.Input.value=document.Calc.Input.value.replace(item.value+"\n","")
    } else {
    item.className="on";
    document.Calc.Input.value+=item.value+"\n"
    	}
    }

  8. #8
    Join Date
    Apr 2006
    Posts
    63
    Yes, you are correct I would like the function to clear if the button is de-selected. I mistyped when I said text box, I did mean "text area" as that is the way I have it set up. I was kind of thinking along the same lines...in regards to the function to toggle could also be the place where we include the function to insert into the text area. I'm excited to think that this is a real possibility I had reached the frustration point where I didn't know that it was doable.

  9. #9
    Join Date
    Apr 2006
    Posts
    63
    Quote Originally Posted by xelawho View Post
    (like this...)

    Code:
    function toggleState(item){
    if(item.className == "on") {
    item.className="off"; 
    document.Calc.Input.value=document.Calc.Input.value.replace(item.value+"\n","")
    } else {
    item.className="on";
    document.Calc.Input.value+=item.value+"\n"
    	}
    }
    Hmmmm....it seems to be close, but something isn't quite working correctly with the toggle / clear portion. For some reason it isn't clearing and now my toggle button remains depressed without changing. Any ideas?

    Also, when the selections are being added is there anyway to move the second selection to the next line?
    So if both options are selected it would look like:

    Cervical Subluxation
    Cervicalgia

    I think If this can be resolved I will be up and running!
    Last edited by seanbennington; 05-06-2012 at 05:27 PM.

  10. #10
    Join Date
    Nov 2010
    Posts
    1,049
    sounds to me like you haven't changed the text box to a textarea but it's hard to say at this distance. here's what I'm looking at, which works ok for me...

    Code:
    <html>
    
    <head>
    <!-- define on/off styles -->
    <style type="text/css">
    .on {
    display: inline-block;
    border: 0px solid #ffffff;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 12px Arial;
    font-weight: bold;
    padding: 15px 15px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    text-shadow:-1px 3px 0px #444444;
    -moz-box-shadow:inset 0px 0px 0px 0px #444444;
    -webkit-box-shadow:inset 0px 0px 0px 0px #444444;
    box-shadow:inset 0px 0px 0px 0px #444444;
    color: #ffffff;
    background: #eeee02;
    }
    .off {
    display: inline-block;
    border: 0px solid #ffffff;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 12px Arial;
    font-weight: bold;
    padding: 15px 15px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    text-shadow:-1px 3px 0px #444444;
    -moz-box-shadow:inset 0px 0px 0px 0px #444444;
    -webkit-box-shadow:inset 0px 0px 0px 0px #444444;
    box-shadow:inset 0px 0px 0px 0px #444444;
    color: #ffffff;
    background: #5873cc;
    }
    .on:hover {
    background: #eeee02;
    text-decoration: none;
    color: #ffffff;
    }
    .off:hover {
    background:#eeee02;
    color: #ffffff;
    position: relative;
    top: 1px;
    }
    
    </style>
    
    <!-- define the toggle function -->
    <script type="text/javascript">
    function toggleState(item){
    if(item.className == "on") {
    item.className="off"; 
    document.Calc.Input.value=document.Calc.Input.value.replace(item.value+"\n","")
    } else {
    item.className="on";
    document.Calc.Input.value+=item.value+"\n"
    	}
    }
    
    </script>
    
    </head>
    <body>
    <FORM NAME="Calc" method="POST" action="takeassessment.asp" width="90%" align="center">
    
    <input type="button" name="icdcode" value="Cervical Subluxation" class="off" onclick="toggleState(this)" />
    <input type="button" name="icdcode" value="Cervicalgia" class="off" onclick="toggleState(this)" />
    <TABLE BORDER=4 align="center" width="38%">
    <TR>
    <TD>
    <textarea NAME="Input" cols=20 rows=5 style="font-size:48px;"></textarea> 
    <br>
    </TD>
    <input type="submit" class="off" value="go">
    
    </TR>
    </body>
    </html>

  11. #11
    Join Date
    Apr 2006
    Posts
    63
    Quote Originally Posted by seanbennington View Post
    Hmmmm....it seems to be close, but something isn't quite working correctly with the toggle / clear portion. For some reason it isn't clearing and now my toggle button remains depressed without changing. Any ideas?

    Also, when the selections are being added is there anyway to move the second selection to the next line?
    So if both options are selected it would look like:

    Cervical Subluxation
    Cervicalgia

    I think If this can be resolved I will be up and running!
    Actually....ignore all of that. It works beautifully. I WAS using a textbox, which was the problem.

    Now that this is a textarea, and idea on how I can now move and sort the data? Last question I promise!

  12. #12
    Join Date
    Nov 2010
    Posts
    1,049
    how would you like to move and sort it?

  13. #13
    Join Date
    Apr 2006
    Posts
    63
    Quote Originally Posted by xelawho View Post
    how would you like to move and sort it?
    I just need to be able to change the order it is displayed. For example if I have a list of 10 things, but I need to change the order it is displayed in, this gets to be quite tedious going in and untoggling everything to remove and then retoggling in the appropriate order.

    I was thinking that if I could select what I want to move and just hit an arrow button up or down that would be perfect. I have this on the check box site but want to now create this for a more visually appealing and touchscreen capable application.

    Here are the links: (these are obviously still in development)
    http://www.internalcornerstone.com/EXAM/Assessment.asp
    - this is the way I was able to make the selections and sort, it is just a bit of pain if I make a mistake in the order of selecting items.

    http://www.internalcornerstone.com/EXAM/ehr.asp
    - this is the with the most recent changes you have helped me with. Essentially, if I can accomplish the same thing on one page, that it takes me to do on two pages I will be thrilled!

    Thanks again!

  14. #14
    Join Date
    Nov 2010
    Posts
    1,049
    oh... it's a select box. well, if we can "borrow" some of your existing functions, it's easily done (apologies in advance for the layout, but you get the idea )...

    Code:
    <html>
    
    <head>
    <!-- define on/off styles -->
    <style type="text/css">
    .on {
    display: inline-block;
    border: 0px solid #ffffff;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 12px Arial;
    font-weight: bold;
    padding: 15px 15px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    text-shadow:-1px 3px 0px #444444;
    -moz-box-shadow:inset 0px 0px 0px 0px #444444;
    -webkit-box-shadow:inset 0px 0px 0px 0px #444444;
    box-shadow:inset 0px 0px 0px 0px #444444;
    color: #ffffff;
    background: #eeee02;
    }
    .off {
    display: inline-block;
    border: 0px solid #ffffff;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 12px Arial;
    font-weight: bold;
    padding: 15px 15px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    text-shadow:-1px 3px 0px #444444;
    -moz-box-shadow:inset 0px 0px 0px 0px #444444;
    -webkit-box-shadow:inset 0px 0px 0px 0px #444444;
    box-shadow:inset 0px 0px 0px 0px #444444;
    color: #ffffff;
    background: #5873cc;
    }
    .on:hover {
    background: #eeee02;
    text-decoration: none;
    color: #ffffff;
    }
    .off:hover {
    background:#eeee02;
    color: #ffffff;
    position: relative;
    top: 1px;
    }
    
    </style>
    
    <!-- define the toggle function -->
    <script type="text/javascript">
    
    function toggleState(item){
    var listbox = document.Calc.Input;
    if(item.className == "on") {
    item.className="off"; 
    for (var i = listbox.length - 1; i>=0; i--) {
        if (listbox.options[i].value==item.value) {
          listbox.remove(i);
        }
      }
    } else {
    item.className="on";
    listbox.options[listbox.length]=new Option(item.value, item.value);
    	}
    listbox.style.display=listbox.length>0?"block":"none"	
    }
    
    function listbox_move(direction) {
    			var listbox = document.Calc.Input;
    			var selIndex = listbox.selectedIndex;
    			if(-1 == selIndex) {
    				alert("Please select an option to move.");
    				return;
    			}
    			var increment = -1;
    			if(direction == 'up')
    				increment = -1;
    			else
    				increment = 1;
    			if((selIndex + increment) < 0 ||
    				(selIndex + increment) > (listbox.options.length-1)) {
    				return;
    			}
    			var selValue = listbox.options[selIndex].value;
    			var selText = listbox.options[selIndex].text;
    			listbox.options[selIndex].value = listbox.options[selIndex + increment].value
    			listbox.options[selIndex].text = listbox.options[selIndex + increment].text
    			listbox.options[selIndex + increment].value = selValue;
    			listbox.options[selIndex + increment].text = selText;
    			listbox.selectedIndex = selIndex + increment;
    		}
    
    		function listbox_selectall(isSelect) {
    			var listbox = document.Calc.Input;
    			for(var count=0; count < listbox.options.length; count++) {
    				listbox.options[count].selected = isSelect;
    			}
    		}
    
    
    </script>
    
    </head>
    <body>
    <FORM NAME="Calc" method="POST" action="takeassessment.asp" width="90%" align="center">
    
    <input type="button" name="icdcode" value="Cervical Subluxation" class="off" onclick="toggleState(this)" />
    <input type="button" name="icdcode" value="Cervicalgia" class="off" onclick="toggleState(this)" />
    <TABLE BORDER=4 align="center" width="38%">
    <TR>
    <TD>
    <select NAME="Input" size=30 style="font-size:48px; display:none" multiple></select> 
    <br>
    </TD>
    
    </TR>
    <br/><br/>
    
    <font size="2">Move <input type="button" class="off" onclick="listbox_move('up')" value="up"/>
    <input type="button" onclick="listbox_move('down')" class="off" value="down"/>&nbsp;&nbsp;&nbsp;&nbsp; 
    Select
    <input type="button" onclick="listbox_selectall(true)" class="off" value="all"/>
    <input type="button" onclick="listbox_selectall(false)" class="off" value="none">
    <input type="submit" class="off" value="go"></FORM>
    </body>
    </html>

  15. #15
    Join Date
    Apr 2006
    Posts
    63
    Quote Originally Posted by xelawho View Post
    oh... it's a select box. well, if we can "borrow" some of your existing functions, it's easily done (apologies in advance for the layout, but you get the idea )...

    Code:
    <html>
    
    <head>
    <!-- define on/off styles -->
    <style type="text/css">
    .on {
    display: inline-block;
    border: 0px solid #ffffff;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 12px Arial;
    font-weight: bold;
    padding: 15px 15px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    text-shadow:-1px 3px 0px #444444;
    -moz-box-shadow:inset 0px 0px 0px 0px #444444;
    -webkit-box-shadow:inset 0px 0px 0px 0px #444444;
    box-shadow:inset 0px 0px 0px 0px #444444;
    color: #ffffff;
    background: #eeee02;
    }
    .off {
    display: inline-block;
    border: 0px solid #ffffff;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 12px Arial;
    font-weight: bold;
    padding: 15px 15px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    text-shadow:-1px 3px 0px #444444;
    -moz-box-shadow:inset 0px 0px 0px 0px #444444;
    -webkit-box-shadow:inset 0px 0px 0px 0px #444444;
    box-shadow:inset 0px 0px 0px 0px #444444;
    color: #ffffff;
    background: #5873cc;
    }
    .on:hover {
    background: #eeee02;
    text-decoration: none;
    color: #ffffff;
    }
    .off:hover {
    background:#eeee02;
    color: #ffffff;
    position: relative;
    top: 1px;
    }
    
    </style>
    
    <!-- define the toggle function -->
    <script type="text/javascript">
    
    function toggleState(item){
    var listbox = document.Calc.Input;
    if(item.className == "on") {
    item.className="off"; 
    for (var i = listbox.length - 1; i>=0; i--) {
        if (listbox.options[i].value==item.value) {
          listbox.remove(i);
        }
      }
    } else {
    item.className="on";
    listbox.options[listbox.length]=new Option(item.value, item.value);
    	}
    listbox.style.display=listbox.length>0?"block":"none"	
    }
    
    function listbox_move(direction) {
    			var listbox = document.Calc.Input;
    			var selIndex = listbox.selectedIndex;
    			if(-1 == selIndex) {
    				alert("Please select an option to move.");
    				return;
    			}
    			var increment = -1;
    			if(direction == 'up')
    				increment = -1;
    			else
    				increment = 1;
    			if((selIndex + increment) < 0 ||
    				(selIndex + increment) > (listbox.options.length-1)) {
    				return;
    			}
    			var selValue = listbox.options[selIndex].value;
    			var selText = listbox.options[selIndex].text;
    			listbox.options[selIndex].value = listbox.options[selIndex + increment].value
    			listbox.options[selIndex].text = listbox.options[selIndex + increment].text
    			listbox.options[selIndex + increment].value = selValue;
    			listbox.options[selIndex + increment].text = selText;
    			listbox.selectedIndex = selIndex + increment;
    		}
    
    		function listbox_selectall(isSelect) {
    			var listbox = document.Calc.Input;
    			for(var count=0; count < listbox.options.length; count++) {
    				listbox.options[count].selected = isSelect;
    			}
    		}
    
    
    </script>
    
    </head>
    <body>
    <FORM NAME="Calc" method="POST" action="takeassessment.asp" width="90%" align="center">
    
    <input type="button" name="icdcode" value="Cervical Subluxation" class="off" onclick="toggleState(this)" />
    <input type="button" name="icdcode" value="Cervicalgia" class="off" onclick="toggleState(this)" />
    <TABLE BORDER=4 align="center" width="38%">
    <TR>
    <TD>
    <select NAME="Input" size=30 style="font-size:48px; display:none" multiple></select> 
    <br>
    </TD>
    
    </TR>
    <br/><br/>
    
    <font size="2">Move <input type="button" class="off" onclick="listbox_move('up')" value="up"/>
    <input type="button" onclick="listbox_move('down')" class="off" value="down"/>&nbsp;&nbsp;&nbsp;&nbsp; 
    Select
    <input type="button" onclick="listbox_selectall(true)" class="off" value="all"/>
    <input type="button" onclick="listbox_selectall(false)" class="off" value="none">
    <input type="submit" class="off" value="go"></FORM>
    </body>
    </html>
    Wow....all I can say is thank you. Thank you very very much! Your kindness is more than I could have even asked for. I so much appreciate your help. As a result of this I have decided that I am going to start taking some classes in javascript. I typically use ASP, and have only dabbled in Javascript.

    Maybe javascript will be where I need to turn for my next/final dilemma. Maybe you can help point me in the right direction with my last problem.

    I want to be able to have someone enter information into a form and immediately after it is entered have it show up on a list. Obviously, I can get the information from the form to the database using ASP quite easily, but I was thinking that I probably need to use javascript of some sort so that the list is immediately updated. I know I could do some sort of auto-refresh, but I think this could interfere with our ability to work on this list (I fear the constant changing will result in us selecting the wrong patients regularly). I was thinking something more like a chat function/feature would be more realistic. Any thoughts? Which direction would you go with this?

    Thanks again,
    Sean

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles