Develop Reference

1 dropdown menu with multiple and different outputs

So I've got a bit of a challange..
I'm trying to get 2 or 3 predefined outputs from a input value.
The code is below, but what I need to get working is that is I select ball_1, ball_2, ball_3 or ball_4 the VLAN and IP are diffrent.
ball_1 needs to output VLAN 12 and IP 32 but ball_2 needs to be VLAN 22 and IP 33 as for ball_3 and ball_4 the VLAN needs to remain empty..
function showData() {
var theSelect = demoForm.demoSelect;
var firstP = document.getElementById('firstP');
var secondP = document.getElementById('secondP');
var thirdP = document.getElementById('thirdP');
firstP.innerHTML = (theSelect.selectedIndex);
secondP.innerHTML = (theSelect[theSelect.selectedIndex].value) - (10);
thirdP.innerHTML = (theSelect[theSelect.selectedIndex].value);
}
<form name="demoForm">
<select name="demoSelect" onchange="showData()">
<option value="zilch">Select:</option>
<option value="32">ball_1</option>
<option value="33">ball_2</option>
<option value="84">ball_3</option>
<option value="85">ball_4</option>
</select>
</form>
<table class=table2>
<tr>
<td>bla</td>
<td>VLAN</td>
<td>IP</td>
</tr>
<tr>
<td>
<p id="firstP"> </p>
</td>
<td>
<p id="secondP"> </p>
</td>
<td>
<p id="thirdP"> </p>
</td>
</tr>
</table>
bla is unused for now so that is not that important.
I've also found this bit of code which seems to better meet my needs but I can't get a dropdown menu to run the input value so it outputs a more or less correct value
<form
oninput="x.value=parseInt(a.value)*parseInt(300);y.value=parseInt(a.value)*parseInt(400);">
<table style="text-align: left; width: 100px;" border="1"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td><input name="a" value="" type="text"></td>
</tr>
<tr>
<td><output name="x" for="a b"></td>
</tr>
<tr>
<td><output name="y" for="a b"></td>
</tr>
</tbody>
</table>
</form>
I've got some basic knowledge about hmtl and java I think but I can't get it to work properly or is it impossible?
thanks in advance
kind regards
Wouter
ps. I don't use a database and have 0 knowledge on how to build and run one, also where the site runs it's almost impossible to run a SQL server.

You are not accessing drop down selected value correctly, Please look below working code.
Javascript function for accessing drop down selected value and setting IP and VLAN
function showData() {
var ddlDemo = document.getElementById("ddlDemoSelect");
var selectedValue = ddlDemo.options[ddlDemo.selectedIndex].value;
if (selectedValue == 32) {
document.getElementById('firstP').innerText = "bla";
document.getElementById('secondP').innerText = "12";
document.getElementById('thirdP').innerText = "32";
}
else if (selectedValue == 33) {
document.getElementById('firstP').innerText = "bla";
document.getElementById('secondP').innerText = "22";
document.getElementById('thirdP').innerText = "33";
}
else {
document.getElementById('firstP').innerText = "";
document.getElementById('secondP').innerText = "";
document.getElementById('thirdP').innerText = "";
}
}
Html. I have added Id for drop down to access it later on.
<form name="demoForm">
<select id="ddlDemoSelect" name="demoSelect" onchange="showData()">
<option value="zilch">Select:</option>
<option value="32">ball_1</option>
<option value="33">ball_2</option>
<option value="84">ball_3</option>
<option value="85">ball_4</option>
</select>
</form>
<table class=table2>
<tr>
<td>bla</td>
<td>VLAN</td>
<td>IP</td>
</tr>
<tr>
<td>
<p id="firstP"> </p>
</td>
<td>
<p id="secondP"> </p>
</td>
<td>
<p id="thirdP"> </p>
</td>
</tr>
</table>

Table drop down selections not respecting Div

I have a container Div and within this I have a number of tables, the tables don't respect the div container size when I have a drop down menu being called. I cannot figure this one out, If I display the class the drop down filters are on to block, it respects the div. If i display it inline it ignores it! and over flow the container. Please help!
<table cellspacing="0" cellpadding="1" border="0">
<tr>
<!--START: catFilter_Filter-->
<td class="item1" style="border-right:1px solid #ccc;" >
<select name="catFilter" id="Select1" onchange="setCatFilter(this.value, document.frmsortby, false);">
<option value="">[catFilterName]</option>
<!--START: catFilter_Filter_Item-->
<option value="[catFilterId]-*-[catFilterName]-*-[catFilterChildId]-*-[catFilterChildName]-*-[catid]-*-">[catFilterChildName] ([numItems])</option>
<!--END: catFilter_Filter_Item-->
</select></td>
<!--END: catFilter_Filter-->
</tr>
</table>
<input type="hidden" name="hdnCatFilter" id="hdnCatFilter" value="[catFilter]" />
<script type="text/javascript">
function setCatFilter(strFilter, objForm, removeSubsequent)
{
if (removeSubsequent)
{
//alert(strFilter);
objForm.hdnCatFilter.value = strFilter;
}
else
{
objForm.hdnCatFilter.value = objForm.hdnCatFilter.value + '#' + strFilter;
}
//alert(objForm.hdnCatFilter.value);
objForm.submit();
}
function removeCatFilter()
{
var objForm = document.frmsortby;
objForm.hdnCatFilter.value = "";
objForm.submit();
}
</script></td>
</tr>

Your table is close before including the <input> and the <script> tags. You have a rogue </td> and </tr>. Move </table> after the last </tr>.

DOM elements/innetHTML add to table from dialog

Okay. This is a long one. So I have a page with a table containing various information about cars and the dealerships they came from. There is a button to add more cars with different years. This button opens a dialog. The dialog has 3 drop downs and one text input. I need the information from each drop down and the text input to add to the parent page. I'm halfway there. The information is adding the value of the input box, the text to the parent table within the "son" part of the table. I need this also to add the chosen value of the "son" drop downs on the same row of this text. One more thing. The "father" drop down needs to direct where the "son" information goes. Currently, my text is adding a new row to the bottom of the table under no specific father. I have stripped my code as much as possible so it's not overwhelming to look at, if there's a bracket missing somewhere it's an oversight. Here is the code and html for the parent page.
<head>
<script>
function updateParent1(value1,value2) {
var table = document.getElementById("car_table");
var rowCount = table.rows.length;
//alert(rowCount);
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = "";
var cell2 = row.insertCell(1);
cell2.innerHTML = value2;
</script>
</head>
<body>
<legend>Vehicle Information</legend>
<input type="text" id="shore_count" />
<div class="add_icon"><img src="images/add-item-icon.png"/></div>
<table id="car_table">
<thead>
<tr>
<th>Dealership</th>
<th>Vehicle Details</th>
</tr>
</thead>
<tbody>
<tr class="row_blue_bold father" id="father3">
<td colspan="2" class="father_header">John Eagle Honda</td>
</tr>
<tr class="row_blue_bold son3">
<td> </td>
<td>Honda 2011 - Civic</td>
</tr>
<tr class="row_blue_bold son3">
<td> </td>
<td>Honda 2008 - Accord</td>
</tr>
<tr class="row_blue_bold father" id="father4">
<td colspan="2" class="father_header">John's Used Cars</td>
<td>
</tr>
<tr class="son4">
<td> </td>
<td>Toyota 2002 - Camry</td>
</tr>
</body>
and here is the iframe/dialog page.
<script type="text/javascript">
$(document).ready(function () {
var id =3;
for (i=0;i<parent.getDescCount();i++) {
id++;
var prot = $("#numbers").find(".prototype").clone();
prot.find(".id").attr("value", id);
prot.find(".apni").attr("value","");
$("#numbers").append(prot);
}
//End of Add button
$("img.exit").click(function () {
parent.$.nmTop().close();
});
$("img.save").click(function () {
var isError = false;
$("input").each(function(i) {
if(this.value == "") {
isError = true;
var newRow = "<tr style='background:#ffff99'><td colspan='4'>Please enter the year of this vehicle.</td></tr><tr>";
$(this).parent().parent().before(newRow);
}
});
if(isError) return;
for(var j=0;j<document.getElementsByName("select1").length;j++) {
parent.updateParent1(document.getElementsByName("select1").item(j).value,document.getElementsByName("text1").item(j).value);
}
parent.$.nmTop().close();
});
});
//Add button
$("img.add").click(function () {
var prot = $("#numbers").find(".prototype").clone().first();
prot.find(".apni").attr("value","");
$("#numbers").append(prot);
}
</script>
<body>
<div id="selMultipleTitle"> Add Vehicle Information </div>
<div id="btnExitDialog"><img src="images/exit.png" height="17" width="17" class="exit"/></div>
<table id="numbers">
<thead>
<tr>
<th><strong>Make</strong></th>
<th><strong>Dealership</strong></th>
<th><strong>Model</strong></th>
<th><strong>Year</strong></th>
</tr>
</thead>
<tr>
<tbody>
<td><select id="fatherDeal" name="select1">
<option selected>Select...</option>
<option>John Eagle Honda</option>
<option>Toyota of America</option>
<option>John's Used Cars</option>
</select></td>
<td><select id="sonMake">
<option selected>Select...</option>
<option>Honda</option>
<option>Toyota</option>
</select></td>
<td><select>
<option selected id="sonModel">Select...</option>
<option>Civic</option>
<option>Accord</option>
<option>Camry</option>
</select></td>
<td><input value="Enter year" id="sonComment" class="apni" name="text1"/></td>
<td> </td>
</tbody>
</tr>
<tr>
<td class="align_right"><img src="images/cancel.gif" height="21" width="21" class="exit"/> <img src="images/save-icon1.png" height="21" width="21" class="save"/></td>
</tr>
</table>
</body>
Thanks in advance.

You need a dropdown as a source
<select id="source">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
And a target table
<table id="target">
</table>
And of course some kind of controller, I used a button.
<button id="control">clickme</button>
Now you only have to bind an action to the button and make it append the contents you want from your source into your target.
$(function() {
$('#control').click(function() {
$("#target").append("<tr><td>"+$("#source").val()+"</td></tr>");
});
});
Here is a fiddle: http://jsfiddle.net/X5DUv/

Javascript modification needed

I need to be able to check a class value for a certain string. The class could have multiple values separated by commas. The code needs to be modified so when West is selected everything goes away except the rows that have West included in the class value. Examples:
<tr class="West"></tr> (shows up)
<tr class="West,NE"></tr> (shows up)
<tr class="NE"></tr> (doesn't show)
javascript
<script type="text/javascript">
$(document).ready(function(){
var links = $('#lb01'),
regions = $('.West,.NE,.Southeast,.East,.South,.Central,.Northeast,.HO,.National,.US,.Texas,.Mid-Central');
regions.not('.West').hide();
links.change(function(event) {
regions.hide().filter('.' + this.options[this.selectedIndex].id).show();
});
});
</script>
html
<div class="tabset">
<div id="tab1" class="tab-box">
<div class="form-holder">
<form action="#">
<fieldset>
<label for="lb01"><strong>Choose District:</strong></label>
<select id="lb01">
<option class="bound" id="West">WEST</option>
<option class="bound" id="NE">NE</option>
<option class="bound" id="Southeast">SOUTHEAST</option>
<option class="bound" id="East">EAST</option>
<option class="bound" id="South">SOUTH</option>
<option class="bound" id="Central">CENTRAL</option>
<option class="bound" id="Northeast">NORTHEAST</option>
<option class="bound" id="HO">HO</option>
<option class="bound" id="US">US</option>
<option class="bound" id="Mid-Central">Mid-Central</option>
<option class="bound" id="Texas">Texas</option>
</select>
</fieldset>
</form>
</div>
<div class="report-box">
<table>
<thead>
<tr>
<td class="name">Name</td>
<td class="department">Department</td>
<td class="title">Title</td>
<td class="district">District</td>
<td class="profile"> </td>
</tr>
</thead>
<tbody>
<tr class="West,NE,Southeast">
<td>Name1</td>
<td></td>
<td></td>
<td></td>
<td><a class="btn-profile" href="#">PROFILE</a></td>
</tr><tr class="West">
<td>Name2</td>
<td></td>
<td></td>
<td></td>
<td><a class="btn-profile" href="#">PROFILE</a></td>
</tr><tr class="East">
<td>Name3</td>
<td></td>
<td></td>
<td></td>
<td><a class="btn-profile" href="#">PROFILE</a></td>
</tr>

Firstly, you shouldn't have commas in your class attribute. Classes are space-delimited:
<tr class="West NE"></tr>
Now, all you need to do is this in your change function:
links.change(function(event) {
$('.report-box tr').hide().find('.' + this.value).show();
});

Ok, this is going to be a big post.
First of all, you can condense the regions variable by just selecting the elements, var regions = $('tr', '#regions'); - This is clean, a standard coders try and stick to, and more efficient/dynamic. Next, the easiest way for class comparison is by overloading the classes, so you would have class="West NE" instead of class="West,NE" - this allows you to use the jQuery.hasClass function which is extremely useful.
Based on what I just said, I came up with the new code:
$(document).ready(function(){
var links = $('#lb01');
var regions = $("tr","regions");
links.bind("change",function(){
regions.hide().hasClass(this.options[this.selectedIndex].id).show();
});
});

Do not use commas to separate your class names, for starters. That was probably the culprit if what you have isn't working.
Here's an alternate way of doing this:
$(document).ready(function() {
var $links = $('#lb01');
$(".report-box tbody tr").hide();
$('tr.West').show();
$links.change(function(event) {
var region = $(this).find(":selected").attr("id");
alert(region);
$(".report-box tbody tr").hide();
$(".report-box tbody tr." + region).show();
});
});
working example: http://jsfiddle.net/hunter/thz99/

Display Hidden Tbody Content with OnClick/A Href Tag

I have various hidden tables that become displayed with onChange events. In the content of one of these tables, I would like to put a hyperlink that will take me back to the previously hidden table. So, to begin with, I have:
<table>
<tbody id="option11" style="display: none;">
<tr>
<td>
<p>
<select name="type" onChange="display(this,'option11a','option11b');">
<option>Please select:</option>
<option value= "option11a">Missed Deadline</option>
<option value= "option11b">Application Down</option>
</select>
</p>
</td>
</tr>
</table>
The onChange associated with this table is:
function display(obj,id11a,id11b)
{
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id11a).style.display = 'none';
document.getElementById(id11b).style.display = 'none';
if ( txt.match(id11a) )
{
document.getElementById(id11a).style.display = 'block';
}
if ( txt.match(id11b) )
{
document.getElementById(id11b).style.display = 'block';
}
}
If the user selects option11a, they are presented with:
<table>
<tbody id="option11a" style="display: none;">
<tr>
<tr>
<td><p>1. Identify missing work.</p></td>
<td><p>2. Contact management.</p></td>
</tr>
</tr>
And, if the user selects option11b, they are presented with:
<table>
<tbody id="option11b" style="display: none;">
<tr>
<tr>
<td><p>1. Contact management.</p></td>
<td><p>2. Refer to Missed Deadline instructions.</p></td>
</tr>
</tr>
So- what I'd like to do is this: Place a hyperlink of some sort in the "Refer to Missed Deadline instructions" that, when clicked, displays the table with tbody id option11a once again.
Let me know if I should better clarify. Greatly appreciate all help! Thanks.

You can do this easily with jquery's .last selector.
http://api.jquery.com/last-selector/