We Keep Coding

Using text instead of Select statement

I have a drop down box, this is populated with options that after selecting it shows hidden text by calling the function toggletDisplay() and sending the value of the option throug, I want it to be able to do the same but without the drop down box to select, using instead plain text with onclick() instead of onchange() or something similiar.
Current Code
<form id="criteria" name="criteria">
<table width="200px" height="700px" name="criteria_search" align="left" border="1" style="margin-right:70px">
<tr>
<td class="dataLabel" width="100%" align="left"><strong>Add Rule : </strong>
<select name="rule" id="rule" onChange="toggletdDisplay(this.form);">
<optgroup label="Simple Rules">
<option value="instructions" selected="selected"> </option>
<option value="email">Email</option>
<option value="assigned">Assigned Racecourse</option>
</optgroup>
</select>
</td>
</tr>
</table>
<table align="right" border="1" width="300px" height="400px" style="float:left;">
<tr>
<td class="dataLabel" name="assigned" id="assigned" style="display: none;">
<table border="0">
<tr>
<td colspan="3"><h4>Assigned to Racecourse</h4></td>
</tr>
<tr>
<td style="margin-left:20px">
<b>Assigned To: </b><select name="selected_assigned_location" id="selected_assigned_location"></select>
</td>
</tr>
</table>
</td>
<td width="100px" class="dataLabel" name="email" id="email" style="display: none;" >
<table>
<tr>
<td colspan="3"><h4>Registered Email</h4></td>
</tr>
<tr>
<td><b>Do they have a registered Email Account?</b></td>
</tr>
<tr>
<td>
Yes <input type="radio" name="email_c" value="true_ex" {EMAIL_TEX_CHECKED} checked="checked"> No <input type="radio" name="email_c" value="false" {EMAIL_F_CHECKED}>
</td>
</tr>
</table>
</td>
...ect
I tried just sending the value through as an onclick
<td>
<p id="rule" name="rule" value="email" onclick="toggletdDisplay(this.form);">Email</p>
</td>
But I get an error of value rule is undefined. How would I send the value through the same as before but without using a select statement?
Added the toggletDisplay, simply uses the value sent back to change the style of the datalabel from hidden to inline
function toggletdDisplay(me)
{
list = Array("instructions","sex", "email", "mobile", "account", "age", "location", "spent", "booked_anything", "internet_booked", "package_type", "package_name", "booked_location", "new_booked_event", "booked_event_range","team", "no_reorder", "newsletter","hear_about","hear_about_bookings","mosaic_group","mosaic_type","assigned","assigned_user","lead_source","target_list","awc","birthday");
// hide any previously selected elements
for(x=0; x<list.length; x++)
{
deselect = getElementsByName_iefix("TD", list[x]);
for (j=0; j<deselect.length; j++)
{
deselect[j].style.display = "none";
}
}
// display currently selected criteria
selected = getElementsByName_iefix("TD", me.rule.value);
selected[0].style.display = "inline";
}

There seem to be a number of issues with your code. One of them is the undefined function toggletdDisplay() that is called whenever you change the selection in your select field.
But, basically, if you want to send a value of an input field or a select box within a form to a php script on your server you will need to define an action attribute in your <form> tag and make sure that the form is submitted. This can be achieved in your case by changing the onchange attribute in your select box (simplified code, without the table architecture):
Whenever you change the selection in your select box the form will be submitted and the value of that select box will be sent to target.php. The address line in your browser will show something like
...<your URL>/target.php?rule=email
It is also not clear to me why you use colspan attributes in some of your <td>-elements, as there is only one column to display in that table.
My advice is to be economical with "cut and paste" and only use code that you fully understand. Build your page slowly, step by step. That way you will be able to understand what needs to be fixed if something goes wrong.
Edit
With your toggletdDisplay() script we have something to work on. The first thing that springs to my mind is that you are not using jquery functions where they might be helpful. And secondly, you don't do anything to display the form values in the console window or send them to a php script.
It is also important to note that name attributes can only be assigned to <input> or <select> elements and not to <td> elements. In my following script I used the id attribute instead.
var tds,tdis;
$(function(){
var list = ["instructions","sex", "email", "mobile", "account", "age", "location", "spent", "booked_anything", "internet_booked", "package_type", "package_name", "booked_location", "new_booked_event", "booked_event_range","team", "no_reorder", "newsletter","hear_about","hear_about_bookings","mosaic_group","mosaic_type","assigned","assigned_user","lead_source","target_list","awc","birthday"];
// consider only TDs with IDs from list array:
tds= $('td').filter(function(i,el){return $.inArray(el.id,list)>-1;});
// trigger the display of results only for select and input elements within tds:
tdis=$('select,input', tds).on('change',listResults);
// assign the toggletdDispla function to the rule selector:
$('.action').on('change',toggletdDisplay);
});
function toggletdDisplay(){ tds.hide().filter('#'+this.value).show()}
function listResults(){
$('#show').html('<p>Values to be sent:</p>'+tdis.serialize().replace(/&/g,'<br/>'))
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="target.php">
<table name="criteria_search" align="left" border="1" style="margin-right:70px">
<tr><td class="dataLabel"><strong>Add Rule : </strong>
<select name="rule" id="rule" class="action">
<optgroup label="Simple Rules">
<option value="instructions" selected="selected"> </option>
<option value="email">Email</option>
<option value="assigned">Assigned Racecourse</option>
</optgroup>
</select>
</td><td class="dataLabel" id="email" style="display:none">
<b>email:</b>
<br/><label><input type="radio" name="email_c" value="true_ex"> yes</label>
<br/><label><input type="radio" name="email_c" value="false"> no</label>
<br/><label><input type="radio" name="email_c" value="soon"> not yet</label>
</td>
<td class="dataLabel" id="assigned" style="display:none">
Racecourse<br/>
<b>Assigned To: </b>
<select name="selected_assigned_location">
<option value=""></option>
<option value="a">racecourse A</option>
<option value="b">racecourse B</option>
<option value="c">racecourse C</option>
</select>
</td>
</tr>
</table>
</form><br style="clear:both" />
<div id="show"></div>

validate selected dropdown value in gridview and populate label with selected value

I am trying to avoid duplicate selection of persons for the same room number and also populate label with selected person.PLease see jsfiddle for the issue
http://jsfiddle.net/bharatgillala/9o1gxa1h/4/
html
<table id="gridviewInfo" runatr="server">
<TBODY><TR>
<TH scope=col>Available Person</TH>
<TH scope=col>RooNumber</TH>
<TH scope=col>SelectedPerson</TH>
</TR>
<TR>
<TD style="WHITE-SPACE: nowrap" align=left><SELECT onchange=checkforvalue(this) id=ddlAvailableJudges name=ctl00$contentBody$gvwRoomInformation$ctl02$ddlAvailableJudges>
<OPTION selected value=>
</OPTION>
<OPTION value=maxico>maxico
</OPTION> <OPTION value=chennai>chennai</OPTION> <OPTION value=newdelhi>newdelhi</OPTION> <OPTION value=hongkong>hongkong</OPTION> </SELECT> </TD>
<TD style="WIDTH: 100px">1</TD>
<td>
<label > populate </label>
</td>
</TR>
<TR>
<TD style="WHITE-SPACE: nowrap" align=left>
<SELECT onchange=checkforvalue(this) id=ddlAvailableJudges name=ctl00$contentBody$gvwRoomInformation$ctl03$ddlAvailableJudges>
<OPTION selected value=>
</OPTION>
<OPTION value=maxico>maxico</OPTION> <OPTION value=chennai>chennai</OPTION> <OPTION value=newdelhi>newdelhi</OPTION> <OPTION value=hongkong>hongkong</OPTION></SELECT> </TD>
<TD style="WIDTH: 100px">2</TD>
<td>
<label > populate </label>
</td>
</tr>

You can't have the same ids for the dropdowns (IDs should be unique). Here is the code. I've added class names to dropdowns and given unique IDs to each dropdown.
Here is a link to the updated fiddle
$('.judges').change(function(){
//on change get selected dropdown's value
var curVal = $('option:selected',this).val();
//get the id of the dropdown changed
var curId = this.id;
//set the label with selected value
$(this).parents().eq(1).find('td:nth-child(3) > label').html(this.value);
//loop through all the dropdowns
$('.judges').each(function() {
//for each dropdown get the selected value
var innerVal = $('option:selected',this).val();
if(innerVal !== ''){
//if id of the dropdown is different to that of the original dropdown selected & the selected values are the same clear the selection of the old dropdown
if(innerVal === curVal && curId != this.id){
$(this).val(" ");
$(this).parents().eq(1).find('td:nth-child(3) > label').html('populate from selected');
}
}
else {
$(this).parents().eq(1).find('td:nth-child(3) > label').html('populate from selected');
}
});
});

Show and hide dynamically created table rows from a SELECT change

I have a Bootstrap modal popup that gets filled dynamically with a table that is created from the database. It has a SELECT element that can have a variable number of elements. The value contain a season code.
As the table is created each row is given a class called "season" with the season code appended to it. The end result is that we can get a class list that looks like this:
season1
season2
etc.
Here is an example of the code:
<select id="seaCombo">
<option value="1">1 - Summer 2013</option>
<option value="2">2 - Fall 2013</option>
<option value="3">3 - Winter 2013</option>
<option value="4">4 - Spring 2013</option>
<option value="5">5 - Holiday 2013</option>
</select>
<table>
<tr class="season1">
<td>Something here</td>
<tr>
<tr class="season2">
<td>Something here</td>
<tr>
<tr class="season3">
<td>Something here</td>
<tr>
<tr class="season4">
<td>Something here</td>
<tr>
<tr class="season5">
<td>Something here</td>
<tr>
</table>
What I want is to SHOW the season that is selected in the SELECT control and hide all others. The problem is that the table and the select are dynamic. Thus, the select might only have 2 seasons listed which means the table will only have two season classes. The select might have 4 seasons listed which means the table will only have the 4 season classes.
How can I write some JQuery that will show the class for the season selected yet hide all other classes in the table?

Try this,
$(function () {
$('#seaCombo').on('change', function () {
s = this.value;
$('tr').hide(); // first hide all rows
if ($('.season' + s).length) { // check the row-class exists or not
$('.season' + s).show(); // show only the seasonal row
}
});
});
Demo

Here you have:
$(document).ready(function() {
function showProperSeason() {
var seasonNumber = $('#seaCombo').val(); //Get the season number selected
$('table tr').hide(); //Hide all rows
$('.season' + seasonNumber).show(); // show only the seasonal row
}
$('#seaCombo').change(showProperSeason);
showProperSeason();
});
Demo: http://jsfiddle.net/edgarinvillegas/e4s2J/3/
This way you'll initially show the selected season, and also when you change the selection.
Cheers

Add disabled to form option that are on the table list

I have a table and a form with a dropdown:
<table>
<tr>
<td class="text">Apple</td>
<td class="name">John</td>
</tr>
<tr>
<td class="text">Orange</td>
<td class="name">Smith</td>
</tr>
</table>
<form>
<select>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Orange">Orange</option>
<option value="Grape">Grape</option>
</select>
</form>
and I want to add a disabled attribute to every option on the dropdown that is already on the table resulting in this:
<table>
<tr>
<td class="text">Apple</td>
<td class="name">John</td>
</tr>
<tr>
<td class="text">Orange</td>
<td class="name">Smith</td>
</tr>
</table>
<form>
<select>
<option value="Apple" disabled>Apple</option>
<option value="Banana">Banana</option>
<option value="Orange" disabled>Orange</option>
<option value="Grape">Grape</option>
</select>
</form>
Is there any way to achieve using jQuery?

$("td.text").text(function(i, txt) {
$("select option[value='" + $.trim(txt) + "']").prop("disabled", true);
});
DEMO: http://jsfiddle.net/322PA/

Get each item value from the select option and compare it with the data inside table row. If both matches then disable the data/option in dropdownlist/select element.
$(document).ready(function(){
//loop through the select option
$("form > select").children().each(function(){
//store each option to check later
var item = $(this).val();
//loop through table row
$("table").children().each(function(){
//loop through table data
$("tr").children().each(function(){
//compare previously stored item with table data value
if(item == $(this).text()){
//disable option
$("form > select > option:contains(" + item + ")").attr("disabled", "disabled");
}
});
});
});
});
jsFiddle Demo

I am guessing you will be dynamically changing the content of the table and want the select element to update when the table changes. You must therefore make sure it updates each time it's used.
$("#theSelector").bind("mouseenter", disableOptions);
function disableOptions() {
var tableData = [];
$("#theTable tr").each(function() {
tableData.push($(this).children(":first").text());
});
$("#theSelector option").each(
function() {
if(jQuery.inArray(this.text, tableData) > -1) {
$(this).prop('disabled', true);
}
}
);
}

Why is my jQuery hide and show function on the Form Select element only working in firefox?

I have created this form with several select menu and a couple of jQuery hide and show functions. The way the form is supposed to work is that, when you click on the options from the main select menu it sould autimatically show you the corresponding select submenu.
Here is my code:
jQuery:
$("#mankleding").bind("click",menclothes);
$("#manschoen").bind("click",menshoes);
$("#manaccessoires").bind("click",menaccessoires);
function menclothes(evt){
$("#subkledingheren").show("fast");
$("#subschoenenheren").hide("fast");
$("#subsaccessoiresheren").hide("fast");
}
function menshoes(evt){
$("#subkledingheren").hide("fast");
$("#subschoenenheren").show("fast");
$("#subsaccessoiresheren").hide("fast");
}
function menaccessoires(evt){
$("#subkledingheren").hide("fast");
$("#subschoenenheren").hide("fast");
$("#subsaccessoiresheren").show("fast");
}
HTML:
<tr>
<td> Artikel hoofd-categorie: </td> <td> <select id="manhoofd">
<option>HEREN</option>
<option id="mankleding">KLEDING</option>
<option id="manschoen">SCHOENEN</option>
<option id="manaccessoires">ACCESSOIRES</option>
</select>
</td>
</tr>
<tr>
<td> Artikel sub-categorie: </td> <td id="subcategorie"> <select id="subkledingheren">
<option>HEREN-KLEDING</option>
<option>Broeken & Jeans</option>
<option>Jassen</option>
<option>Sweaters & Hoodies</option>
<option>Zwemkleding</option>
</select>
<select id="subschoenenheren">
<option>HEREN-SCHOENEN</option>
<option>Sneakers / Casual</option>
<option>Slippers & Sandalen</option>
<option>Instappers</option>
</select>
<select id="subsaccessoiresheren">
<option>HEREN-ACCESSOIRES</option>
<option>Horloges</option>
<option>Brillen & Zonnebrillen</option>
<option>Stropdassen</option>
</select>
</td>
</tr>

Try using change event:
$('#manhoofd').change(function(){
var i = $('option:selected', this).text();
$('select(:not(:first))').hide();
$('select:contains('+i+')').show()
})
DEMO