JavaScript - <select>

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 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.

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>

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

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

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.

Hi all,

I am a newbie to JS. So please extend your help suggesstion to solve this problem I have.

I have 2 select boxes. Data in one select box is corresponding to the data in the other select box. When the user comes in and selects example the 3rd element from the first or second select box the correspoinding 3rd element from the other select box should be selected.

Please help with the solution.Thanks in advance

Hello,

I have a form generated by mySQL and PHP, and inside the form (named 'UpdateDB') each line has checkboxes, like so:

Code:

<input type="checkbox" name="checkbox[]" value="96" onclick="highlight(this,'check_96')">

The onclick is to highlight the row, that works fine. However, I wrote a javascript function that toggles the select all the checkboxes or none. This is done by an image:

Code:

<img src="img/select.png" align="top">
<a href="#" onClick="togBox('updateDB');"><img src="img/all.png" name="listToggle" align="top"></a>

Easy, right? So heres the Javascript function that the above image (the 'none' part) links to:

Code:

function togBox(form) 
	{	var myForm = document.forms[form];
		document.listToggle.src=='http://gospeltruth.tv/admin/img/all.png' ? toggle = true : toggle = false;
		(toggle) ? document.listToggle.src='img/none.png' : document.listToggle.src='img/all.png';
		for( var i=0; i < myForm.length; i++ ) 
		{ 
			(toggle) ? myForm.elements[i].checked = 'checked' : myForm.elements[i].checked = '';
		}
	}

Its a brilliant function if I do say so myself, and this is what I dont get: two days ago, it was working fine, today, its not working at all. The image changes, but IE flags up the 'myForm.length' as an error.

How was it working 2 days ago and not today, when I havent touched it? Can anybody advise why its not currently working?

Thanks for your help,

~Chud37

I'm working on a content management system for my website, and when you add a new user, there is an option to select the users class, such as member, moderator, administrator. I want to make it that when moderator or admin is selected, a new table row appears under it showing options for the users permissions. Also, the PHP script for adding users checks the information for errors. If there are errors, it will display them. All of the form info is posted to the error page. Therefore if moderator or admin is selected, the permissions need to come up as well.

I tried googling this but I could only find ways to make this happen with DIV's. Thank you in advance for any help you may be able to give me.

Hi Guys,

A bit stuck here and was wondering what you guys think.

I have an HTML Select Option with a list of countries. A user saves that page and when he wants to return to the same page later at some point, i would like to populate the countries drop down list with what he entered initially.

Is there an easy way to do this?

Thanks.

Hi !

I would need to select whole word (same thing as when you double click a word) just by single clicking on it, or by positioning the cursor above the word(any letter of a word). Then i would need to manipulate the selection(to change selected text to some other text).

The outcome would be an editor with a possibility to change selected word (to add diacritical marks to selected word).

I've been googling for this for long time and can't find an answer. It can be connected to range object that is not the same in IE a firefox - but i did not manage to make it work. Or is my approach wrong ?

Do you have any idea how to do this?


Thank you in advance !

Tomas

I use an api which is javascript and jQuery enabled. I have function with sender and args parameters. With args.cell.innerHTML I can change inner html property of the cell.

How can I change row background color?

I can change cell background with
Code:

args.cell.style.background = "#ff0000";

I tried with

Code:

args.cell.childNodes.style.background = "#AFD4EF";
args.cell.parent().childNodes.style.background = "#AFD4EF";
args.cell.parent().parent().childS().style.background = "#AFD4EF";
args.row.style.background = "#AFD4EF";

I am trying but I can't figure it out, let say you select something on your select values, after selecting that value, how can you dynamically put that value on an input box?

I have got this piece of code where JavaScript will change a FORM OPTION if it has been selected before (incase the user returns to the page - doesn't have to refill in things), but its not working and my web browser reports this error:
Quote:
Error: document.getElementById("Dr") is null
This is the code:
Code:

<SCRIPT type="text/javascript">
	document.getElementById("<?php echo $_SESSION['recipient']['title']; ?>").selected = "selected";
</SCRIPT>

Code:

<FORM action="process.html" method="post">
	<DIV class="deliveryinformationdata">
		<DIV>
			<B>Title:</B>	<SELECT name="title">
						<OPTION></OPTION>
						<OPTION id="Dr">Dr</OPTION>
						<OPTION id="Miss">Miss</OPTION>
						<OPTION id="Mr">Mr</OPTION>
						<OPTION id="Mrs">Mrs</OPTION>
						<OPTION id="Ms">Ms</OPTION>
					</SELECT>
		</DIV>
		<INPUT type="submit" value="Submit">
	</DIV>
</FORM>

Can anyone see a problem?

Hy ! I have this form:
PHP Code:
<form name = "myform" method = "POST" action = "proba1.php">
        Name:<br /> <input type = "text" name = "name" size = "30" onBlur = "namecheck()" /><br />
        Username:<br /> <input type = "text" name = "username" size = "30" onBlur = "usercheck()" /><br />
        Password:<br /> <input type = "password" name = "password" size = "30" /><br />
        Repeat password:<br /> <input type = "password" name = "password2" size = "30" onBlur = "passcheck()"/><br />
        Email:<br /> <input type = "text" name = "email" size = "30" onBlur = "mailcheck()" /><br /><br />
       
                                <input type = "reset" name = "reset" value = "Reset" />
                                <input type = "submit" name = "submit" value = "Submit" />
                       
</form> 


and a Js file to check it:
PHP Code:
function namecheck()
{
        var name = document.myform.name.value;
                if(name.indexOf(" ") < 0)
                {
                        document.myform.name.focus();
                        document.myform.name.select();
                        alert("Pleaase enter your full name!")
                        return false;
                }
        return true;   
}

function usercheck()
{
        var username = document.myform.username.value;
                if(username.length < 6)
                {
                        alert("Username must be at least 6 chars!");
                        document.myform.name.focus();
                        document.myform.name.select();
                        return false;
                }
        return true;   
}

function passcheck()
{
        var password = document.myform.password.value;
        var password2 = document.myform.password2.value;
                if(password != password2)
                {
                        alert("The two passwords not identical!")
                }
}

function mailcheck()
{
        var mail = document.myform.email.value;
        var diff = mail.lastIndexOf(".") - mail.indexOf("@");
        var diff2 = mail.length - mail.lastIndexOf(".");
                if(mail.indexOf("@") < 0 || mail.indexOf(".") < 0 || diff < 2 || diff2 > 3)
                {
                        alert("Not a valid email adress!")
                }
} 


So when a value is not proper,there should be an alert message,then select and focus on the field.But only the alert works.I can set the select and the focus to any other field from the current one ,but not to the current.(For instance:if the name is not good:document.myform.username.select() works,but :document.myform.name.select() not.)
Can somebody help me?