FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Assign unique rank in html form using javascript possibly?





powers1983
Does anyone know how to have a number of <select> inputs that all must have unique values?

eg.
Rank these in order of preference:
Cheese: 3
Milk: 1
Butter: 2

Where the numbers represent a <select> <option> input in a form.

I have found something based on using javascript and Chained Selects but this isn't quite what I need.

It seems simple enough and common enough that HTML might implement it but having searched the HTML Specifications I can't spot anything.

I also found a script that when you press submit it performs a check and you must change your options but again this isn't quite what I need.

I have seen it done somewhere but for the life of me I can't remember where or I'd be there ha!

Thanks for any help.

David.
Q5U8
I don't undersand very well the question. Do you wanna to select one tag with a number?

If so, put the number at the beginning of the tags, you can choose it pressing the number.
ALostSoul
I understand what you mean, I think...So. you want the script to order checkboxes in order of preference?
powers1983
Stubru Freak
You can do this using javascript. If you know any javascript, check the onchange event.
powers1983
Stubru Freak wrote:
You can do this using javascript. If you know any javascript, check the onchange event.


Cheers. I've not used javascript that much but I'll give it a shot not I know what to search the manual for. It can't be that difficult (ha).

David.
powers1983
OK I've managed it phew.

The code I used is basically this:


Code:

<script type="text/javascript">
var rank= new Array();
var stuff;

rank["bread"]=0;
rank["toast"]=0;
rank["water"]=0;

function check_index(x,y)
{ // x is bread, y is 3
var orange;
var clash = "nope";

if (y>0) {
   for (stuff in rank) {
      var col_stuff;
      if (rank[stuff]==y) // selected position is already taken
         {
         clash="yup";
         col_stuff=stuff;
       
         var new_value="0";       
         orange = col_stuff + '_' + new_value;
         document.getElementById(orange).selected=true;
         
           rank[col_stuff]=new_value;
         
      } // end if already taken
   } // end for
} // end if
rank[x]=y;   
if (clash=="yup") {
   alert('Selected rank was already taken by ' + col_stuff + ' and so that position has been changed to ' + new_value);
}   

return false;
} // end function
</script>


with the form looking like:

Code:

<form method="post" action="arg.php" name="rank_taste">
<select  name="bread" onchange="check_index(this.name, window.document.rank_taste.bread.options[selectedIndex].text)">
<option value="0" id="bread_0">0</option>
<option value="1" id="bread_1">1</option>
<option value="2" id="bread_2">2</option>
<option value="3" id="bread_3">3</option>
</select>
<select  name="toast" onchange="check_index(this.name, window.document.rank_taste.toast.options[selectedIndex].text)">
<option value="0" id="toast_0">0</option>
<option value="1" id="toast_1">1</option>
<option value="2" id="toast_2">2</option>
<option value="3" id="toast_3">3</option>
</select>
<select  name="water" onchange="check_index(this.name, window.document.rank_taste.water.options[selectedIndex].text)">
<option value="0" id="water_0">0</option>
<option value="1" id="water_1">1</option>
<option value="2" id="water_2">2</option>
<option value="3" id="water_3">3</option>
</select>


I did change it from what I was doing cos I had php making a lot of options and it was for something a bit differnet but I have tested this and it works.

It pops up an alert just to inform you it has changed something but this was just for my information in developing.

The code gets longer as you add more selects which is why I used php to generate the form and code, so I think it must be a clumsy way of doing it.

If anyone can suggest anything for the code then that would be very helpful.

Cheers everyone for the help.

David.

PS some of my variable names will not be helpful so sorry but they all mean something to me Smile
Related topics
Handling Css using Javascript
Prevent my website from being downloaded
Java tutorials
HTML form, list of options or text input
Send Mail HTML Form
Pop-Ups
Where;s better way using javascript link or write inside htm
I am trying to build a contact form using php and flash
Using Javascript to Encrypt Data then POST to PHP
Where do you stand on using Javascript in websites?
Help needed with getting table to auto update via html form
Does anyone now how to make a website like this?
upload file to server using html form and CGI C
<input> MUST be in <form>?
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.