JavaScript - How To Select Row In Table

Hey Guys
When a user changes the select list called "reason_code_master" I need the uodatecodes() function to update all the other select list with the id of "reason_codes" with the same . How can I do this.


<select size='1' onchange="updatecodes()" name='reason_code_master'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>

<select size='1' name='reason_codes' id='reason_codes'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
<select size='1' name='reason_codes' id='reason_codes'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
<select size='1' name='reason_codes' id='reason_codes'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
<select size='1' name='reason_codes' id='reason_codes'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>

Hi JS Experts,

I am working on a class registration system that requires students to register for a main class (101, 102 or 103). The student is supposed to select one main course as well as provide a second choice in case the first is not available. I have two dropdown select fields to capture data

1) Choice -1: 101 / 102 / 103 ( Student needs to select one - Reading the classID from classes table)
2) Choice -2: 101 / 102 / 103 ( If student selects 101 in Choice-1 then the only classes available under Choice-2 should be 102 or 103).

How can I accomplish the above?

Further to this there are two fields on the form where I would like to auto populate based on what they have selected in Choice-1 and Choice-2.

For Example:
If a parent selects choice1: 101 the child Choice1 field should autopopulate with 100.
If a parent selects Choice2: 201 the child Choice2 field should autopopulate with 200

Any help would be really appreciated. Thanks

Vinny

I have a select box that has ~7000 options, that based on a different dropdown select & input field, gets filtered to 0 - 300 entries.

I have another select dropdown that has 13000+ options in total for all the ~7000 entries, but each entry may have 1 to 5 options of these 13000.

Is there a way to change the options of the last select dropdown based on what the user chooses in the filtered select box? Currently the idea I'm having is to have the browser load all 13000+ items and filter out the ones that don't apply to the currently selected item, but I'm not sure what kind of lag the user would experience while the browser loads & filters through all these items.

Any help would be appreciated. Thanks.

Ok so I'm making this form which when a selection is made in one box it will run through the javascript(function getMgmtHours), and update the div(mgmthours). Then another box shows up allowing another selection to be made which runs through the javascript(function getDays) and updates another div(mgmtdate). My problem is that when I use the second box to run through javascript, it overwrites what shows up in the first div (mgmthours) when it should be updating a different div (mgmtdate). Any ideas what I can do to get it update the relevant div and not overwrite the other one?

Here is part of the javascript I have in my page head:

Code:

function getMgmtHours(str)
{
if (str=="")
  {
  document.getElementById("mgmthours").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {
   // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("mgmthours").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getmgmthours.php?dist="+str,true);
xmlhttp.send();
}

function getDays(str)
{
if (str=="")
  {
  document.getElementById("mgmtdate").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {
   // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("mgmtdate").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getdates.php?sunday="+str,true);
xmlhttp.send();
}

Here is the HTML/PHP portion being used:
PHP Code:
echo "<p>";
echo "Submit hours:";
echo "<form>";
echo "<select name='district' onchange='getMgmtHours(this.value)'>";
echo "<option value=''>Select a district:</option>
<option value='1'>1</option>
<option value='3'>3</option>
<option value='4'>4</option>";
echo "</select>";
echo "</form>";
echo "</p>"

echo "<p>";
echo "<form action='./hours.php' method='post' onSubmit='return checkMgmtHours'>";
echo "Weekending Day: ";
echo "<select name='weekending' onchange='getDays(this.value)'>";
echo "<option value=''>Choose a Date:</option>";

while ($week < 32) {
    $nextsunday = strtotime("next Sunday");
    
    if ($week > 0) { $timestamp = strtotime("-" . $week . " week", $nextsunday); } else { $timestamp = $nextsunday;}
    
    $weekending = date('M. d, Y', $timestamp);
    echo "<option value='" . $weekending . "'>" . $weekending . "</option>";
    $week = $week + 1;
}

echo "</select>";

echo "<div id='mgmtdate' />";
echo "<div id='mgmthours' />";
echo "</p>"; 


Edit: Also, after getMgmtHours() runs, I can still use both getDays and getMgmtHours, howeer once I used getDays, I am no longer able to use getMgmtHours w/o refreshing the page.

I've got some directory list boxes on the site I'm working on. I made them big and fixed rather than drop-down so they're easier to use in this context. But I had to enable the "multiple" attribute to make that work. The site has no provision for multiple selections so it's a tad annoying when the search function selects more than one name in the list.

It doesn't really affect the site's operation but it could be confusing to some people. Is there a way to make the listbox show multiple selections without allowing multiple selections? Thanks for any help.

<select onchange="display.apply(this, this.value.split(','))" multiple="multiple" id="People" name="People" style="border-style: none; height:244px; width:220px; margin-bottom: 15px;">
<option>Loading</option>
</select>

My issue is that I have a javascript function applied on page load via an addLoadEvent function call in the head to every row (dynamic number of records retrieved) on a table. On every row of the table I also have an element (image or button) that performs a different function that is assigned on the element itself. Unfortunately, when I click the element it also performs the function that was applied to the row in the page load. Is there any way to not call this function on element click? I know usually you include code, but due to the nature of the work I am limited in that respect. Basically its:

Code:

<script type="text/javascript">
  addLoadEvent(function() { function1(1); })
  //function1 makes the table rows do something appearance wise.
</script>

<tr>
  <td></td>
  <td></td>
  <td>
    <img src="pics/delete.png" alt="Delete" onclick="function2();">
  </td>
</tr>

I apologize if my post doesn't conform to the general guidelines of proper posting on this board. I'm new on this site.

Hello all
i have to implement simple LIFO algorithm ( if i can call it like this .. )
say i have html table and and i fetching data i like thet the last data that fetched to be the first record in the table
for example :
im fetching the string "111" so it will be the first record
next im fetching the string "222" now the string "111" will be the second
and the string "222" will be the first .. and so on

hi guys i having some problems with jquery plugin table sorter on a dynamic table.
if i use it on a regular html table it works fine,but on my dynamic table its not working.
if someone could look at my code and see if i done something wrong i would appreciate it .

Thanks will43
Code:

<script type="text/javascript" src="table sorter/jquery.tablesorter/jquery-latest.js" ></script> 
<script type="text/javascript" src="table sorter/jquery.tablesorter/jquery.tablesorter.js" ></script>
<script  type="text/javascript"/>
$(document).ready(function()    
 {   
 $("#myTable").tablesorter();    
  }
   ); 
</script>

 <form id="form1" name="form1" method="post" action="">
      <label for="Position">Position</label>
      <select name="Position" id="Position">
        <option>QB</option>
        <option>HB</option>
        <option>FB</option>
        <option>WR</option>
        <option>TE</option>
        <option>RG</option>
        <option>RT</option>
        <option>C</option>
        <option>LG</option>
        <option>LT</option>
        <option>CB</option>
        <option>LB</option>
        <option>SS</option>
        <option>FS</option>
        <option>DE</option>
        <option>DT</option>
        <option>P</option>
        <option>K</option>
      </select>
      <input type="submit" name="Summit" id="Summit" value="Submit" />
    </form>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <table width="950" border="1" cellpadding="3" cellspacing="3" class="tablesorter" id="myTable">
      <thead>
      <tr>
        <th bgcolor="#FF0000">id</th>
        <th bgcolor="#FF0000">Team</th>
        <th bgcolor="#FF0000">FirstName</th>
        <th bgcolor="#FF0000">LastName</th>
        <th bgcolor="#FF0000">Position</th>
        <th bgcolor="#FF0000">Year</th>
        <th bgcolor="#FF0000">Overall</th>
        <th bgcolor="#FF0000">Speed</th>
      </tr>
      </thead>
      <?php do { ?>
      <tbody>
        <tr>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['id']; ?></td>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Team']; ?></td>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['FirstName']; ?></td>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['LastName']; ?></td>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Position']; ?></td>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Year']; ?></td>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Overall']; ?></td>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Speed']; ?></td>
        </tr>
        </tbody>
        <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
    </table>

hi all,

i have a table, just a basic table with 6 rows.

depending on the value of the first <td>thevalue</td> i want to start a end the existing table and start a new one.

the newly added table (i hope) will contain all the remaining <tr><td></td></tr> nodes until i run into the next check that will close the newly added table and begin a new table again etc....

i can get the correct node (tr) after i find the value in the td im looking for, and then try a : document.createElement("table"); , but my problem is that this newly created table tag comes with an automatically created </table> element / tag, so i end up with just inserting a new blank table after a row instead of inserting a new table tag that has all the remaining tr and tds under it.

hope that makes sense.

my entire test page is:
(click the text link and an alert will show the output with the new <table></table> after the row that my check is looking for (first td with a 2)
--------------------------------------------------------------------

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	
<script type="text/javascript">
	function reformatMe() {
	    var divObj = document.getElementById('reformatMe');
	    var numRows = document.getElementsByTagName("tr");
	    var z = "1";
	    for (i = 0; i < numRows.length; i++) {
	        if (numRows[i].childNodes[0].innerHTML == "2") {
	            var markStart = numRows[i];
	            alert(markStart.nextSibling);	        	        
	            var closeTable = document.createElement("/table");
	            var addTable = document.createElement("table");
	            //var tbody = document.createElement("tbody");
	            //addTable.appendChild(tbody);
	            addTable.setAttribute("id", "subOptionID" + z);
	                if(numRows[i+1] != null){
	                    numRows[i].parentNode.insertBefore(addTable, numRows[i+1]);
	                }
	            z++;
	        }
	    }
	    alert(divObj.innerHTML);
	}
</script>
	
</head>

<body>
<a href="#" onclick="reformatMe();">reformat table</a>
<div id="reformatMe">
	<table border="1" cellpadding="4" cellspacing="2" id="menuItemID1">							
		<tr><td>1</td>	<td>1</td>	<td>How would you like your food prepared?</td>	<td>1</td>	<td>1</td>	<td>0</td></tr>
		<tr><td>1</td>	<td>1</td>	<td>Choose two of the following sides</td>	<td>0</td>	<td>2</td>	<td>0</td></tr>
		<tr><td>1</td>	<td>1</td>	<td>What do you want on your Baked Potato?</td>	<td>0</td>	<td>2</td>	<td>1</td></tr>
		<tr><td>2</td>	<td>1</td>	<td>What type of dressing do you want on your salad?</td>	<td>1</td>	<td>1</td>	<td>1</td></tr>
		<tr><td>1</td>	<td>1</td>	<td>Do you want fries?</td>	<td>1</td>	<td>1</td>	<td>0</td></tr>
		<tr><td>1</td>	<td>1</td>	<td>Do you want ketchup on your fries?</td>	<td>1</td>	<td>1</td>	<td>1</td></tr>
	</table>
</div>	
</body>
</html>

hello,

how can I set a selected item of a drop down menu (select in html) knowing its value and given a variable "dropdown" that points to the select ?

Thanks

Code:

<select name="selectme" onChange=""> 
<option value="layer1name">1</option> 
<option value="layer2name">2</option> 
<option value="layer3name">3</option> 
</select>

how can you make a onclick for this to work. So if you cliked the seconde one it would change somthing(i dont care what).

Hi,

I have a select option inside a span, how do i get the select id.

Code:

<span id="getSelect">
  <select id="myselect" name="mySelect" option../>
</span>

document.getElementById("getSelect").innerHTML;

this will give me the whole select object...now how do i get the select id from that.

Thanks

Hi All,

First time user of this forum and need some help please. I have a webpage where I am displaying checkboxes next to rows. I would like to have one checkbox which will select everything. I have written this code but it does'nt seem to work. Can someone advice as to whats wrong here.

The HTML code for checkAll checkbox is:
Code:

<thead>
<tr>
<th>Select All <input type='checkbox' name='checkall' onclick='checkedAll(frm1);'>  </th>

The HTML code for each checbox is :
Code:

<form id="frm1" />
            <tbody>
			<?php
			foreach ($consignment_array as $ct_idx => $consignment)
			{
				$status = $consignment->getStatus();
                $id= $consignment->getId();
				?>
				<tr class="<?php echo "cls" . $status; ?>">
                    <td id="c"> <input type=checkbox id= "1" name="deleteConsignments" onclick="row_color(this)" value= <?php echo $consignment->getId(); ?> /> </td>

The javascript is :
Code:

function checkedAll (frm1) {
    alert("in check all");
    var aa= document.getElementById('frm1');
     if (checked == false)
          {
           checked = true
          }
        else
          {
          checked = false
          }
    for (var i =0; i < aa.elements.length; i++) 
    {
     aa.elements[i].checked = checked;
    }
      }

The problem is that its not even going into the Javacript because I dont get the alert.

Appreciate the help guys.

Thanks.

All,
If I have the following code:
Code:

<form name="datatoshow" id="datatoshow">
Want to learn more about the sie? Use the drop down menu:<br />
<select name="thingtoshow" onchange="javascript:showvalues(this.datatoshow);">
<option value="home">Home</option>
<option value="help">Help!</option>
<option value="refer">Refer a Friend</option>
</select>		
</form>

This doesn't do anything on the onchange. The code it's supposed to send to is:
Code:

function showvalues(selObj){
alert("it gets here");
var valuetoshow;
valuetoshow = "valuetoshow="+selObj.options[selObj.selectedIndex].value;
alert(valuetoshow);
makePOSTRequest('showhome.php', valuetoshow);
}

This is in external js file. For some reason it doesn't send it and the alert never gets triggered.

Thanks.

I have a website www.foodfinda.com and on a specific page http://www.foodfinda.com/recipecatinfo.php?id=Beef


I have the following code

<tr>
<? ?>
<td width="20%" align="center">Select a Page </td>
<td width="24%" align="left">
<?if($page > 1){
$prev = ($page - 1);
echo "<a href=\"".$_SERVER['PHP_SELF']."?page=$prev&search=$_GET[search]\"><<Previous</a>&nbsp;";
} for($i = 1; $i <= $total_pages; $i++){
if($i%20==0){ echo "<br>"; }
if(($page) == $i){
echo "$i&nbsp;";
} else {
echo "<a href=\"".$_SERVER['PHP_SELF']."?page=$i&search=$_GET[search]\">$i</a>&nbsp;";
}
}

// Build Next Link
if($page < $total_pages){
$next = ($page + 1);
echo "<a href=\"".$_SERVER['PHP_SELF']."?page=$next&search=$_GET[search]\">Next>></a>";
} ?>
</td>

This should allow me to dispaly 20 recipes and also to display additional pages for all the other recipies, but it doesn't seem to work. Can anyone shed any light on what I am doing wrong?

Thanks