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 14 of 14
  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    44
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Using Function Multiple Places

    I am using this following function to have the user select an option and have it report back what option was selected i am trying to use this same function multiple times on the same form so i dont have write seperate function

    Code:
    function favBrowser()
    {
    var mylist=document.getElementById("myList");
    document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].id;
    }
    </script>
    </head>
    
    <body>
    <form>
    Select your favorite browser 1:
    <select id="myList" onchange="favBrowser()">
      <option></option>
      <option id="30">Google Chrome</option>
      <option id="15">Firefox</option>  
      <option id="10">Internet Explorer</option>
      <option id="5">Safari</option>
      <option id="30">Opera</option>
    </select>
    
    Select your favorite browser 2:
    <select id="myList" onchange="favBrowser()">
      <option></option>
      <option id="30">Google Chrome</option>
      <option id="15">Firefox</option>  
      <option id="10">Internet Explorer</option>
      <option id="5">Safari</option>
      <option id="30">Opera</option>
    </select>
    
    <p>Your favorite browser 1 is: <input type="text" id="favorite" size="20"></p>
    <p>Your favorite browser 2 is: <input type="text" id="favorite" size="20"></p>
    
    </form>
    </body>
    This works for the first inputbox
    Obviously I cant have two input boxes with the same id, but I am not sure what to do, I am assuming there is a way to accomplish this and not write out 2 seperate functions?

    Thank you

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You have multiple copies of the same id in your code - an id van only occur once in a page.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Feb 2013
    Posts
    44
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    You have multiple copies of the same id in your code - an id van only occur once in a page.
    Yes I know that, thank you see the last line in my post

  • #4
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    852
    Thanks
    173
    Thanked 94 Times in 94 Posts
    Hi

    something like this?

    EDIT:
    Options should have values, not ids,
    Ah good catch philip m --- I changed my code to reflect that.
    It's not as good as yours anyway :-)

    Code:
    <form>
    Select your favorite browser 1:
    <select id="myList_1" onchange="favBrowser(this)">
      <option></option>
      <option value="30">Google Chrome</option>
      <option value="15">Firefox</option>  
      <option value="10">Internet Explorer</option>
      <option value="5">Safari</option>
      <option value="30">Opera</option>
    </select>
    
    Select your favorite car 2:
    <select id="myList_2" onchange="favBrowser(this)">
      <option></option>
      <option value="30">Ford</option>
      <option value="15">Merc</option>  
      <option value="10">Suzuki</option>
      <option value="5">Mini</option>
      <option value="30">Other</option>
    </select>
    Select your favorite food 3:
    <select id="myList_3" onchange="favBrowser(this)">
      <option></option>
      <option value="30">Fries</option>
      <option value="15">Burger</option>  
      <option value="10">Chicken</option>
      <option value="5">Vegi</option>
      <option value="30">Other</option>
    </select>
    
    <p>Your favorite browser 1 is: <input type="text" id="favorite1" size="20"></p>
    <p>Your favorite car 2 is: <input type="text" id="favorite2" size="20"></p>
    <p>Your favorite food 3 is: <input type="text" id="favorite3" size="20"></p>
    
    </form>
    
    <script type="text/javascript">
    function favBrowser(ref)
    {
    var mylist= ref;
    var num = mylist.id.split("_");
    var which = num[1];
    document.getElementById("favorite"+which).value=mylist.options[mylist.selectedIndex].value;
    }
    </script>
    Last edited by low tech; 02-09-2013 at 08:43 AM.
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,146
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    You may not have two elements of any kind with the same id. ids must be unique. Select list options should have values, not ids, and presumably you want the text of the chosen options to appear in the results boxes. Also I assume that you do not want the same browser selected twice.

    Code:
    <html>
    <head>
    </head>
    <body>
    
    <script type = "text/javascript">
    var firstchosen = "a";
    var secondchosen = "b";
    function favBrowser(which, lst) {
    var si = which.selectedIndex;
    if (si == 0) {
    alert ("Please make a selection");
    return false;
    }
    
    if (lst == "1") {firstchosen = si}
    if (lst == "2") {secondchosen = si}
    if (firstchosen == secondchosen) {
    alert ("You have already chosen that browser");
    which.selectedIndex = 0;
    return false;
    }
    
    var fb = which.options[si].text;
    var f = "favorite" + lst;
    document.getElementById(f).value = fb;
    }
    </script>
    </head>
    
    <body>
    <form>
    Select your favorite browser 1:
    <select id="myList1" onchange="favBrowser(this, '1')">
      <option></option>
      <option value="30">Google Chrome</option>
      <option value="15">Firefox</option>  
      <option value="10">Internet Explorer</option>
      <option value="5">Safari</option>
      <option value="30">Opera</option>
    </select>
    
    Select your favorite browser 2:
    <select id="myList2" onchange="favBrowser(this, '2')">
      <option></option>
      <option value="30">Google Chrome</option>
      <option value="15">Firefox</option>  
      <option value="10">Internet Explorer</option>
      <option value="5">Safari</option>
      <option value="30">Opera</option>
    </select>
    
    <p>Your favorite browser 1 is: <input type="text" id="favorite1" size="20"></p>
    <p>Your favorite browser 2 is: <input type="text" id="favorite2" size="20"></p>
    
    </form>
    </body>
    
    </body>
    </html>
    In case it matters, there are other browsers apart from those listed. Such as Maxthon (popular in China) and Konqueror (for Linux). Perhaps you should include an "Other" option.

    Assuming that the results will be sent to a server-side script, it would be better to make the values of the options the same as the texts, not some arbitrary(?) number.

    Quizmaster: Name an instrument which can be found hanging on the wall in many households.
    Contestant: A piano.
    Last edited by Philip M; 02-09-2013 at 11:06 AM. Reason: Noticed typo

    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.

  • #6
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    @ Philip

    You're a seasoned member in this forum and you generally make good posts. But the one thing that really bugs me is that your code is never indented correctly. You should change that.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,146
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Quote Originally Posted by Airblader View Post
    @ Philip

    You're a seasoned member in this forum and you generally make good posts. But the one thing that really bugs me is that your code is never indented correctly. You should change that.
    That is my house style! Possibly dating from the days (before you were born) of 360K floppy discs and 64K RAM when every byte of code was precious. I find it easier to read without indentation, but with blank lines placed to separate sub-sections. And as I have pointed out before, I have to please only myself (and my clients).

    Do not criticise the coffee - you may be old and weak yourself one day.
    Last edited by Philip M; 02-09-2013 at 06:36 PM.

    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.

  • #8
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Oh, well, I really didn't think it was on purpose. Now that is really just not what's considered to be good style these days, but of course it is up to you.

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,098
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Exclamation

    Quote Originally Posted by Airblader View Post
    @ Philip

    You're a seasoned member in this forum and you generally make good posts. But the one thing that really bugs me is that your code is never indented correctly. You should change that.
    It's OK. I usually indent his code myself as I read it to get a better understanding of each command. It may by old style but it forces me to read and understand each line of his suggestions!

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,146
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Quote Originally Posted by jmrker View Post
    It's OK. I usually indent his code myself as I read it to get a better understanding of each command. It may by old style but it forces me to read and understand each line of his suggestions!
    Thank you for that, jmrker!

    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.

  • #11
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Well I could go on and discuss why I don't think that this is the right way of forcing you to deal with the code in detail, but I find it rather pointless – I would take any bet that not a single book written in the last ten years (probably longer) about any high-level language would recommend no indentation (not even Perl!). It's an industry standard and developers who need to show their code to others will be frowned upon for that. Luckily, if I had the questionable joy of doing so, I could just hit two keys and have the code auto-format.
    The advantages of indented code are too obvious and he just chooses to not do it on purpose, which, to emphasize this, is fine for me because I don't have to work with the code. And about here on the forums – it's free help in his private time, so he is pretty much allowed to present it whatever way he wants. It's not like the people asking the questions generally present their code any better (quite the contrary).

    I really wanna make sure Philipp knows that I'm not trying to attack him. I appreciate his posts from the point of view of pure content, but his code style is more than out of date (which he probably agrees on) and I come from the "school" of writing extremely clean code, so I always shake a little when I see unindented code.

    In any case, I have some respect for someone who can work with unindented code. I couldn't, if it was more than a few lines.

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,146
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Quote Originally Posted by Airblader View Post
    I really wanna make sure Philip knows that I'm not trying to attack him. I appreciate his posts from the point of view of pure content, but his code style is more than out of date (which he probably agrees on) and I come from the "school" of writing extremely clean code, so I always shake a little when I see unindented code.

    In any case, I have some respect for someone who can work with unindented code. I couldn't, if it was more than a few lines.
    Noted. But I am afraid you will have to keep on shaking!

    At one time I wrote programs in a language called Databus which involved hundreds of lines of unindented code. I think it is still used but is nowadays named PL/B.
    Last edited by Philip M; 02-09-2013 at 08:24 PM.

    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.

  • #13
    New Coder
    Join Date
    Feb 2013
    Posts
    44
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for all the help guys and I enjoyed the side discussion about indented code as well. I came up with this before I recieved the suggestions posted above, my question is what are the pitfalls if any to doing this way


    Code:
    function loanProgram()
    
    {
    
    var mylist=document.getElementById("myList");
    
    document.getElementById("program").value=mylist.options[mylist.selectedIndex].value;
    
    
    var mylist2=document.getElementById("myList2");
    
    document.getElementById("program2").value=mylist2.options[mylist2.selectedIndex].id;
    
    
    var mylist3=document.getElementById("myList3");
    
    document.getElementById("program3").value=mylist3.options[mylist3.selectedIndex].id;
    
    
    var mylist4=document.getElementById("myList4");
    
    document.getElementById("program4").value=mylist4.options[mylist4.selectedIndex].id;
    
    
    
    
    }
    Code:
    <td colspan="1"><b>Select Loan Program:</b></td>
    <td colspan="1">
    <select id="myList" onchange="loanProgram()">
    
      <option></option>
    
      <option id="30"value="30">30 Year Fixed</option>
    
      <option id="20">20 Year Fixed</option>
    
      <option id="15">15 Year Fixed</option>
      
    <option id="30">FHA 30 Year</option>
    
      <option id="15">FHA 15 Year</option>
    
      </select>
    
    </td>
    
    <td colspan="1">
    <select id="myList2" onchange="loanProgram()">
    
    
      <option></option>
    
      <option id="30">30 Year Fixed</option>
    
      <option id="20">20 Year Fixed</option>
    
      <option id="15">15 Year Fixed</option>
      
    <option id="30">FHA 30 Year</option>
    
      <option id="15">FHA 15 Year</option>
    
      </select>
    
    </td>
    
    <td colspan="1">
    <select id="myList3" onchange="loanProgram()">
    
    
      <option></option>
    
      <option id="30">30 Year Fixed</option>
    
      <option id="20">20 Year Fixed</option>
    
      <option id="15">15 Year Fixed</option>
      
    <option id="30">FHA 30 Year</option>
    
      <option id="15">FHA 15 Year</option>
    
      </select>
    
    </td>
    
    
    <td colspan="1">
    <select id="myList4" onchange="loanProgram()">
    
    
      <option></option>
    
      <option id="30">30 Year Fixed</option>
    
      <option id="20">20 Year Fixed</option>
    
      <option id="15">15 Year Fixed</option>
      
    <option id="30">FHA 30 Year</option>
    
      <option id="15">FHA 15 Year</option>
    
      </select>
    
    </td>
    Code:
    <tr>
    <td align="right">Years:</td>
    <td><input
        type="text"
        name="term1"    
        id="program"
        value="" 
        size="4"
        onblur="checkForZero(this)"
        onchange="checkForZero(this)"/>
    </td>
    <td><input
        type="text"
        name="term2"
        id="program2" 
        size="4"
        onblur="checkForZero(this)"
        onchange="checkForZero(this)"/>
    </td>
    <td><input
        type="text"
        name="term3"
        id="program3" 
        size="4"
        onblur="checkForZero(this)"
        onchange="checkForZero(this)"/>
    </td>
    <td><input
        type="text"
        name="term4"
        id="program4" 
        size="4"
        onblur="checkForZero(this)"
        onchange="checkForZero(this)"/>
    </td>
    </tr>

    My program isnt for selecting different browsers s I originally posted. I was using that example I got from W3 schools to learn and build from. I am actually trying to make a loan comparison calculator and have the user select four different loan programs, based on the selection the term will change, 15, 30 10, etc...

    What I have seems to working great again my question is are there any pittfalls

    Also can someone explain what the "this" parameter is I am a bit confused and I need to make the form recalculate after a selection is changed

    Thanks again for all the advice and discussion

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,146
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Options should have values, not ids. It is the value which is passed to the server-side script. And, once again, you may not have two elements with the same id. id's must be unique. OK?

    You have assigned different names and ids to the same form elements. name="term1" id="program"
    That is very poor practice.

    It looks as though your question was not to do with your favourite browser at all. You would do better to come clean at the outset and say what your real purpose is. Otherwise people who help you are wasting their time. You don't tell your doctor that you have a pain in your chest, and then after he has treated you say "That was only an example - the pain was really in my rectum".

    The this keyword in Javascript refers to the current object. Google for more extended information.
    Last edited by Philip M; 02-10-2013 at 11:11 AM.

    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.


  •  

    Posting Permissions

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