JavaScript - Suggestions For Improving The Look Of Select Listboxes?

Hi all!

I'm new to the forum and hope to get some help on how to make my javascript shorter then how its now. Now i have 8 functions doing the same thing, but i dont know how to make it to one function, if possible. I have worked much with PHP with the other code on the website, so if u have sugestions with that feel free to make them.

It are working with some checkboxes, if u press the first checkbox u will get a textfield after every checkbox exept the first one. If u just press one checkbox u get a textfiled after that one.

P.S. All the code bellow are working together.

Javascript code
Code:

<script type="text/javascript">
        function showHide1()
        {
            if(document.getElementById('64bitxref2').style.display == 'none')
            {
                document.getElementById('64bitxref2').style.display = '';
                document.getElementById('64bitxref3').style.display = '';
                document.getElementById('64bitxref4').style.display = '';
                document.getElementById('64bitxref5').style.display = '';
                document.getElementById('64bitxref6').style.display = '';
                document.getElementById('64bitxref71').style.display = '';
                document.getElementById('64bitxref72').style.display = '';
                document.getElementById('64bitxref73').style.display = '';
                document.getElementById('64bitxref8').style.display = '';
            }
            else
            {
                document.getElementById('64bitxref2').style.display = 'none';
                document.getElementById('64bitxref3').style.display = 'none';
                document.getElementById('64bitxref4').style.display = 'none';
                document.getElementById('64bitxref5').style.display = 'none';
                document.getElementById('64bitxref6').style.display = 'none';
                document.getElementById('64bitxref71').style.display = 'none';
                document.getElementById('64bitxref72').style.display = 'none';
                document.getElementById('64bitxref73').style.display = 'none';
                document.getElementById('64bitxref8').style.display = 'none';
            }
        }
        function showHide2()
        {
            if(document.getElementById('64bitxref2').style.display == 'none')
            {
                document.getElementById('64bitxref2').style.display = '';
            }
            else
            {
                document.getElementById('64bitxref2').style.display = 'none';
            }
        }
        function showHide3()
        {
            if(document.getElementById('64bitxref3').style.display == 'none')
            {
                document.getElementById('64bitxref3').style.display = '';
            }
            else
            {
                document.getElementById('64bitxref3').style.display = 'none';
            }
        }
        function showHide4()
        {
            if(document.getElementById('64bitxref4').style.display == 'none')
            {
                document.getElementById('64bitxref4').style.display = '';
            }
            else
            {
                document.getElementById('64bitxref4').style.display = 'none';
            }
</script>

html code (with possible php help)
Code:

<form method="post" action="index.php?id=2">
<table border="0">
  <tr>
    <td colspan="2">
        <input type="text" name="search" value="<? echo $keyword; ?>" size="80" maxlength="250" />
        <input type="submit" name="send" value="S&ouml;k">
        <br />
    </td>
  </tr>
  <tr width="100%">
    <td>
        <input id="checkbox1" type="checkbox" onClick="showHide1()" value="allt"/>
        <label for="allt">Allt</label>
    </td>
    <td width="90%">
        <input name="64bitxref1" type="text" value="" id="64bitxref1" style="display:none" size="32" maxlength="32"><br />
    </td>
  </tr>
  <tr>
    <td>
        <input id="checkbox2" type="checkbox" onClick="showHide2()" value="fotograf"/>
        <label for="foto">Fotograf</label><br />
    </td>
    <td width="90%">
        <input name="64bitxref" type="text" value="" id="64bitxref2" style="display:none" size="32" maxlength="32"><br />
    </td>
  </tr>
  <tr>
    <td>
        <input id="checkbox3" type="checkbox" onClick="showHide3()" value="plats"/>
        <label for="plats">Plats</label><br />
    </td>
    <td width="90%">
        <input name="64bitxref" type="text" value="" id="64bitxref3" style="display:none" size="32" maxlength="32"><br />
    </td>
  </tr>
  <tr>
    <td>
        <input id="checkbox4" type="checkbox" onClick="showHide4()" value="fritext"/>
        <label for="fritext">Fritext</label><br />
    </td>
    <td width="90%">
        <input name="64bitxref" type="text" value="" id="64bitxref4" style="display:none" size="32" maxlength="32"><br />
    </td>
  </tr>
</table>
</form>

I hope the code could be to help i put in there, and thanks in advance.

/Spikey

In order to learn "cool" javascript such as rollovers that you find on websites today; what would any of you guys reccomend me doing. I want to learn how to make my webpage interactive and i know what i want to do;

i just dont know how to do it

any suggestions are welcome;
thank you

I have a search box on my website, that gets users from my database using php. And uses Javascript to display suggestions as the users type. What I'd like to be able to is to use the arrows to toggle down through the different suggestions. Any ideas how I would go about doing this?

Here's the javascript part of the code:
Code:

function createObject() {
	var request_type;
	var browser = navigator.appName;
	if(browser == "Microsoft Internet Explorer"){
	request_type = new ActiveXObject("Microsoft.XMLHTTP");
	}else{
		request_type = new XMLHttpRequest();
	}
		return request_type;
}

var http = createObject();

/* -------------------------- */
/* SEARCH					 */
/* -------------------------- */
function autosuggest() {
q = document.getElementById('search-q').value;
// Set te random number to add to URL request
nocache = Math.random();
http.open('get', 'lib/search.php?q='+q+'&nocache = '+nocache);
http.onreadystatechange = autosuggestReply;
http.send(null);
}
function autosuggestReply() {
if(http.readyState == 4){
	var response = http.responseText;
	e = document.getElementById('results');
	if(response!=""){
		e.innerHTML=response;
		e.style.display="block";
	} else {
		e.style.display="none";
	}
}
}

As it is, I'm using Walter Zorn's JS Graphics Library in an attempt to write a small screensaver-type-thing for jailbroken iPhones/iPod touches. However, on my mom's AMD Athlon 64 3000+, the drawing gets pretty laggy, so you can imagine how utterly choppy it is on my iPod. The look I'm going for is the Windows XP Mystify screen saver, with corners bouncing around the screen. So, my first question is this: are there any alternatives for this sort of thing, short of manually generating a video, gif, or multiple images to switch through, or is there any way to make my code more efficient for the CPU? (Code below)

NOTE: I know I could make it look a lot nicer by making a 'corner' class, and having each corner be an object (and even nicer by using an array of 'corners'). But I'm not sure that would help the CPU's calculations much, and make the code more efficient as a whole.

Code:

<div id="Mystify">
			<script type="text/javascript">
				var mystifyCanvas = new jsGraphics("Mystify");
				
				var tetraCorner1x = Math.floor(Math.random()*300) + 5;
				var tetraCorner1y = Math.floor(Math.random()*460) + 5;
				var tetraCorner2x = Math.floor(Math.random()*300) + 5;
				var tetraCorner2y = Math.floor(Math.random()*460) + 5;
				var tetraCorner3x = Math.floor(Math.random()*300) + 5;
				var tetraCorner3y = Math.floor(Math.random()*460) + 5;
				var tetraCorner4x = Math.floor(Math.random()*300) + 5;
				var tetraCorner4y = Math.floor(Math.random()*460) + 5;
				
				go1x = true;
				go1y = false;
				go2x = true;
				go2y = true;
				go3x = false;
				go3y = true;
				go4x = false;
				go4y = false;
				
				function MystifyJavaScript()
				{
					mystifyCanvas.clear();
					mystifyCanvas.setColor("#ff0000");
					mystifyCanvas.setStroke(2);
					
					if (go1x)
					{
						tetraCorner1x++;
						
						if (tetraCorner1x > 315)
						{
							go1x = false
						}
					}
					else
					{
						tetraCorner1x--;
						
						if (tetraCorner1x < 5)
						{
							go1x = true
						}
					}
					if (go1y)
					{
						tetraCorner1y++;
						
						if (tetraCorner1y > 475)
						{
							go1y = false
						}
					}
					else
					{
						tetraCorner1y--;
						
						if (tetraCorner1y < 5)
						{
							go1y = true
						}
					}
					
					
					
					if (go2x)
					{
						tetraCorner2x++;
						
						if (tetraCorner2x > 315)
						{
							go2x = false
						}
					}
					else
					{
						tetraCorner2x--;
						
						if (tetraCorner2x < 5)
						{
							go2x = true
						}
					}
					if (go2y)
					{
						tetraCorner2y++;
						
						if (tetraCorner2y > 475)
						{
							go2y = false
						}
					}
					else
					{
						tetraCorner2y--;
						
						if (tetraCorner2y < 5)
						{
							go2y = true
						}
					}
					
					
					
					if (go3x)
					{
						tetraCorner3x++;
						
						if (tetraCorner3x > 315)
						{
							go3x = false
						}
					}
					else
					{
						tetraCorner3x--;
						
						if (tetraCorner3x < 5)
						{
							go3x = true
						}
					}
					if (go3y)
					{
						tetraCorner3y++;
						
						if (tetraCorner3y > 475)
						{
							go3y = false
						}
					}
					else
					{
						tetraCorner3y--;
						
						if (tetraCorner3y < 5)
						{
							go3y = true
						}
					}
					
					
					
					if (go4x)
					{
						tetraCorner4x++;
						
						if (tetraCorner4x > 315)
						{
							go4x = false
						}
					}
					else
					{
						tetraCorner4x--;
						
						if (tetraCorner4x < 5)
						{
							go4x = true
						}
					}
					if (go4y)
					{
						tetraCorner4y++;
						
						if (tetraCorner4y > 475)
						{
							go4y = false
						}
					}
					else
					{
						tetraCorner4y--;
						
						if (tetraCorner4y < 5)
						{
							go4y = true
						}
					}
					
					
					
					mystifyCanvas.drawLine(tetraCorner1x, tetraCorner1y, tetraCorner2x, tetraCorner2y);
					mystifyCanvas.drawLine(tetraCorner2x, tetraCorner2y, tetraCorner3x, tetraCorner3y);
					mystifyCanvas.drawLine(tetraCorner3x, tetraCorner3y, tetraCorner4x, tetraCorner4y);
					mystifyCanvas.drawLine(tetraCorner4x, tetraCorner4y, tetraCorner1x, tetraCorner1y);
					
					mystifyCanvas.paint();
					window.setTimeout("MystifyJavaScript()", 10);
				}
				
				MystifyJavaScript();
			</script>
		</div>

Please keep in mind, there's a LOT of repeat code, so you only have to read any one part once. To test/see/use the code, you'll need to download wz_graphics.zip. Then download the attached txt file to the same directory as the unzipped wz_graphics, change it to .html instead of .txt, and open it.

Hello,

I have an existing php contact form which incorporates php validation (required name with only characters, valid email address format, and minimum message length) and re-captcha.

I would like to add some "real time" validation to the fields on my form (there are 3 fields - name, email and message) before the "Submit" button is pressed. For example when the user tabs from one text box to the next but hasn't filled in the required information.

I am totally new to any type of java, but am I right in thinking I need either JavaScript, Ajax or JQuery to perform real-time validation?

If so, which should I be looking into and are there any basic examples of form validation?

I want to keep my pup validation as I'm aware that php is client-side but still needed as people can turn Java off in their web browsers.

Any tips and pointers will be very much appreciated!

Thankyou,

Tom

I've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost.

When I select the first option nothing appears in the second option.

here's the javascript code:

Code:

function createOption(OptionText, OptionValue){
var temp = document.captcha_form("option");
temp.innerHTML = OptionText;
temp.value = OptionValue;
return temp;
}

function valChange(){
    var firstList = document.getElementById("emailaddress");
    var secondList = document.getElementById("subject");
    while(secondList.hasChildNodes())
        secondList.removeChild(secondList.childNodes[0]);
    switch(firstList.value){
        case "1":{
             secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues));
             secondList.appendChild(createOption("Report Page Errors", Report Page Errors));
             secondList.appendChild(createOption("Other", Other));
             break;
        }
        case "2":{
             secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game));
             secondList.appendChild(createOption("Report Spam", Report Spam));
             secondList.appendChild(createOption("Report Harassment", Report Harassment));
			 secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities));
			 secondList.appendChild(createOption("Request Account Removal", Request Account Removal));
             break;
        }
// ....
        default:{
             secondList.appendChild(createOption("Please select from the first list", ""));
             break;
        }
    }
}
 
window.onload = valChange;

this is the form code

Code:

<div class="mailto_form">
<form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php">
<div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();">
	<option value=""></option>
	<option value="1">Webmaster</option>
		<option value="2">Admin</option>
		</select>
  </div>
	

<div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject">
  </div>
  
  	<div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value="">
	</div>
  
		<div style="padding-bottom: 1em;">Enter the text contained in the image into the text box:
					<br /><img src="../includes/captcha.php" />
					<br /><input type="text" name="userpass" value="">
	</div>
	<div style="padding-bottom: 1em;">Message:
					<br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?>				
	</div>
	
	<div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit">
	</div>
</form>


</div>

Link to the page http://www.netgamegurus.com/contact/

Hey chaps, hope someone can help with this:
I have a PHP form, with a couple of dynamic Select menus, which are populated from two SQL tables:
// tbl_main_colour:
Code:

ID, NAME
1, Red
2, Blue
3, Green

// tbl_shade_colour:
Code:

ID, NAME, FK_MAIN_COLOUR_ID
1, Light Red, 1
2, Dark Red, 1
3, Light Blue, 2
4, Dark Blue, 2
5, Light Green, 3
6, Dark Green, 3

What I'm after is something to filter the second select option, after the first select option has been chosen
// Select 1:
Code:

Red

// Select 2:
Code:

Light Red
Dark Red

I'm pretty sure this is possible, but not sure how to go about it, any help would be most appreciated.

Hello, I am trying to make a simple code that has a selection list (with the choice fruit or veggie). When the user chooses fruit, the second list displays the options apple, orange, banana. When the user changes their choice to veggie, the second select list then contains carrot, corn, potatoes (and the apple, orange, banana disappear).

I need some advice on how to do this

Code:

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

<html>
<head>
<title>Untitled</title>
</head>
<body>
<form name = "form1">
 <fieldset>
  <legend>Fruit or Veggie</legend>
	<select name = "S1">
	  <option name = "fruit">Fruit </option>
		<option name = "veggie">Veggie</option>
	</select>
	<select name = "S2"
	</select>
 </fieldset>
</form>

<script language="JavaScript" type="text/javascript">

???

</script>
</body>
</html>

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

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>

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>

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.

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.