Using Function Multiple Places

billboy · 02-09-2013, 05:32 AM

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

felgall · 02-09-2013, 05:41 AM

You have multiple copies of the same id in your code - an id van only occur once in a page.

billboy · 02-09-2013, 06:05 AM

Quote:

Originally Posted by felgall

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

low tech · 02-09-2013, 07:45 AM

Hi

something like this?

EDIT:

Quote:

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>

Philip M · 02-09-2013, 07:59 AM

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.

Airblader · 02-09-2013, 06:20 PM

@ 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.

Philip M · 02-09-2013, 06:30 PM

Quote:

Originally Posted by Airblader

@ 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.

Airblader · 02-09-2013, 06:52 PM

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.

jmrker · 02-09-2013, 07:02 PM

Quote:

Originally Posted by Airblader

@ 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!

Philip M · 02-09-2013, 07:03 PM

Quote:

Originally Posted by jmrker

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!

Airblader · 02-09-2013, 07:15 PM

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.

Philip M · 02-09-2013, 08:19 PM

Quote:

Originally Posted by Airblader

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.

billboy · 02-09-2013, 08:31 PM

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

Philip M · 02-10-2013, 10:54 AM

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.