We Keep Coding

Simpler function to reset classes, add to target class 'active', and filter map based on different parameters

I'm working on a map project where I built my own UI. Part of it is a navigation where you can filter the map by clicking a div button in a column floating at the edge of the map. It works perfectly fine, currently, but it is overly complicated and will be a major issue to explain how to add new buttons as the data expands.
The gist is that it first defines a variable as the button id, and on click resets all the classes to a default set, except for the button which is clicked gains the class 'active', and executes a function which sets filtering based on an assigned id in the dataset or return true for All.
The way I have it, which is functional but extremely cluttered
Edit: I've made a few changes that substantially reduce the lines, but I still don't know how to combine multiple similar copies of these into a single function
//define variable to point to a specific button
var navigation = document.getElementById('navigation').children;
var all = document.getElementById('filter-all');
....
//[Currently] nine additional variables of nearly the same thing (now just for selecting the button pressed)
//Show all
all.onclick = function() {
navigation.className = navigation.className.replace(new RegExp('\b' + active + '\b'),'');
this.className += ' active'; //for some reason this doesn't actually add the space
map.featureLayer.setFilter(function(f) {
// Returning true for all markers shows everything.
return true;
});
map.fitBounds(map.featureLayer.getBounds());
return false;
};
....
//Followed by nine nearly identical functions that just reset classes, and sets filtering parameters
I know there is a way to combine the functions to do the same thing without so much bulk, but my search is so far fruitless.

Can CSS or JS effect the submission of a form?

I have a large form spread over 3 tabs. The tabs are controlled by JS which simply changes the css property display: block to display:none depending what tab you click on.
This form also submits data to 3 different tables via php. When i submit my form at the end of the the 3rd tab some of my data is missing in a table that accepts multiple rows (the other two tables only accept a single row) In this section of the form I let the user add as many "Rooms" as they need. The rooms are just a few selection boxes, and the extra selection boxes are also added with JS. When i submit my form only the first "room" is added to the table.
I am positive every thing is working as if I remove the tabs it works perfectly or even if i add all three sections of the form to one tab it works. Below is the PHP that inputs the rooms and loops depending how many there are. Sorry this is a very large form so i dont want to just stick it all in, but it is all very simple and all working. Please let me know if I should add any other part of my code if that helps.
$level = $_POST['level'];
$room_type = $_POST['room_type'];
$width = $_POST['width'];
$length = $_POST['length'];
$num_rooms = count($level);
for($x=0;$x<$num_rooms;$x++)
{
$room_insert = mysqli_query($dbcon, "INSERT INTO listing_rooms (Listing_ID, Level, Type, Length, Width) VALUES ('$listing_id', '$level[$x]', '$room_type[$x]', '$length[$x]', '$width[$x]')") or die(mysql_error());
}
To trigger this I have an if(isset()) just above this. Thanks for any help.
This is the JS that shows and hides the tabs...
function showHideTab(tab_id) {
if (tab_id == 'details_tab'){
document.getElementById('listing_details').style.display='block';
document.getElementById('listing_info').style.display='none';
document.getElementById('photo_upload').style.display='none';
}else if (tab_id == 'info_tab') {
document.getElementById('listing_info').style.display='block';
document.getElementById('listing_details').style.display='none';
document.getElementById('photo_upload').style.display='none';
}
else if (tab_id == 'upload_tab') {
document.getElementById('photo_upload').style.display='block';
document.getElementById('listing_info').style.display='none';
document.getElementById('listing_details').style.display='none';
}
}

As I thought this was a very simple error. As i said I have 3 divs being shown or hidden by JS. My issue was I had my opening FORM tag inside my first div!
I still dont know why everything other then the array of "rooms" worked fine regardless of where the opening form tag was, and even the array held the first value?

Disable Applet button using javascript

I would like to disable a button
<BUTTON name="Next Page" onClick="Next()" VALUE="NextPage">NextPage</button>
based on a javascript variable
var opening = 0;
function Next()
{
var currentdoc = viewONE.getDocIndex();
if (currentdoc == 5)
{
**[DISABLE BUTTON]**
}
what is the javascript code please?
Background information:
Simply browsing through documents using a next and previous buttons. on the first document i want the "previous" button greyed out and on the the last document i want the "next" button greyed out.
Appologise for any incorect terms, newb and never asked this type of question before.
you are welcome to correct my term in a constructive way... need to learn.

Sam's solution is good and will disable the action of the button but won't disable it functionally.
You can disable the input button by changing changing the "disabled" attribute, but you really need to give your button a valid identifier first (I wouldn't even want to let jQuery select it by name due to the space).
jQuery would look something like this:
$('#yourbuttonid').attr('disabled','disabled');
Regular Javascript would be the following:
document.getElementById('yourbuttonid').disabled = true;
Here's an example on JSBin.

All you need to do is:
var opening = 0;
function Next()
{
var currentdoc = viewONE.getDocIndex();
if (currentdoc == 5)
{
return; //This will end the function immediately.
}
}
In terms of greying out buttons, can you not add / remove classes to show different versions of the buttons? We would need more to see your html, and what you have tried so far to help further.
Tutorial on return

Removing an <option> from a <select> tag according to previously selected <option> tag? (POLL Example)for

I have 50 rows of data and i want users to give them points by 1 to 50. I put dropdown boxes near them with options 1/50. But all i want is when a user selects 15(for example) for a row, 15 will be deleted from all other select tags of other rows. I am not as good as you in JavaScript. How can i accomplish this?
Hi casablanca i couldnt make he script you sent work. I need it to work on just one select tag so i give select tag an ID and an ID for the form too. I edit the scripts getElementsByTagName with getElementsByTagID (select tag's ID) to effect only one select tag. But the function doesnt triggered?

This might not be a very good idea, because it is very difficult for the user to modify choices -- for example, if I want to give 15 to a different option, I need to change the old one to something else and then change the new one to 15. Also, once all points have been assigned, it's impossible to make any changes because all options are gone.
A better idea would be to let the user do whatever he/she wants and then validate the form in the end. You could do that like this:
function validate() {
var used = []; // This array stores already used options
var rows = document.getElementById('myForm').getElementsByTagName('select');
for (var i = 0; i < rows.length; i++) {
var points = rows[i].value;
if (used[points]) {
// This value was already used
alert('Please choose a different value.');
rows[i].focus();
return false;
} else {
// This value was not used before; mark it as used now
used[points] = true;
}
}
return true;
}
And call this function in the onsubmit handler of your form:
<form id="myForm" onsubmit="return validate();">

EDIT1: id -> class
give each option the class of the number it is
<option class="15">15</option>
<option class="16">16</option>
etc.
Then jquery can remove() an item by class
$('.15').remove();
obviously have to do an on change and get the value just set. "remove()" is nice in this instance because I believe it will yank every instance of that class.
EDIT3: upon further consideration the above method would be further complicated by the need to not remove the "selected" option. Not going to figure out the exact method but I think changing the class from "15" to "selected15" with a $(this).append() or something of the sort before calling the remove would get the job done fairly safely.
EDIT2:
As noted by casblanca below this is not an ideal user interface at all for this type of input. You may want to look into this: http://www.utdallas.edu/~jrb048000/ListReorder/
Allows user to drag and drop items in a list to reorder them. Much more natural.

multiple set of check box?

im having a set of multiple check bxes, like one set contain 3 check box share same name another set contain 3 check sharing same name . how can i get the value of these two different set of check box using a single code .
var form = $('usersurvey');
checkboxes = form.getInputs('checkbox');
for(count=0; count< checkboxes.length; count++){
if(checkboxes[count].checked){
retValue=true;
break;
}
}
return retValue;
}
im tried with this code but it fetch all the check boxes , i want only that have the same name, i used prototype.js

if you give each set of checkboxes a different class you could select them using jquery like:
$(".className").each(function(index, element) { ... });
for instance. somebody may be able to improve on this solution by selecting by name (i wasnt sure if you could do that, i always just select by class).
EDIT: sorry i should elaborate probably. the $(".className") piece will select all the checkboxes of class 'className'. since it sounds like you want to DO something with each of them though, i just added the each call on the end. inside the each call, you can define a function (shown) that will do something for each checkbox that was selected. reference the jquery each docs here:
http://api.jquery.com/each/