JavaScript - Selected Index

I'm trying to make a comment script with show/hide divs and are so far OK, but...

I want to hide one div when another is activated...

Here is what I have so far:
Code:

<?
for ($q = 1; $q <= 5; $q++) {
	
	echo '<div id="jdivStart'.$q.'" style="padding:0px 0px 0px 0px;width:100%x;">';
	echo '<textarea style="color:#999999;" rows=2 cols="66" onfocus="jchange'.$q.'(\'jdiv'.$q.'\');">Write comment</textarea>';
	echo '</div>';
	
	echo '<div id="jdiv'.$q.'" style="display:none;">';
	echo '<textarea style="color:#999999;" rows=6 cols="66"></textarea>';
	echo '</div>';
?>
	
	<script language="javascript" type="text/javascript">
	function jchange<? echo $q; ?>(divname) {
		
		var currentShowingDivQ = document.getElementById('jdivStart<? echo $q; ?>');
		var objDivQ = document.getElementById(divname);
		
		if (currentShowingDivQ && currentShowingDivQ != objDivQ) { 
			currentShowingDivQ.style.display = 'none';
		}
		
		if(objDivQ.style.display == 'none'){       
			objDivQ.style.display = 'block';
		} else {       
			objDivQ.style.display = 'none';   
		}
	
	}
	</script>

<?
}
?>

So if I activate the first textbox, then when I activates the second I want to be able to hide the first again...

Any help i appreciated :-)

I'm struggling to make a js alert when none of the 3 checkboxes on my form are selected. Can anyone help me out?

Code:

function checkform ( form )
{

  if (form.contact_name.value == "contact name") {
    alert( "Please enter a contact name" );
    form.contact_name.focus();
    return false ;
  }
  
  if (form.last_name.value == "agency/company name") {
    alert( "Please enter agency/company name" );
    form.last_name.focus();
    return false ;
  }

  if (form.email.value == "email address") {
    alert( "Please enter contact email address" );
    form.email.focus();
    return false ;
  }
  
    if (form.telephone.value == "dates required") {
    alert( "Please enter dates required" );
    form.telephone.focus();
    return false ;
  }
  
      if (form.comments.value == "any other info") {
    alert( "Please enter more information" );
    form.comments.focus();
    return false ;
  }
  
    if (form.contact_name.value == "") {
    alert( "Please enter a contact name" );
    form.contact_name.focus();
    return false ;
  }
  
  if (form.last_name.value == "") {
    alert( "Please enter agency/company name" );
    form.last_name.focus();
    return false ;
  }

  if (form.email.value == "") {
    alert( "Please enter contact email address" );
    form.email.focus();
    return false ;
  }
  
    if (form.telephone.value == "") {
    alert( "Please enter dates required" );
    form.telephone.focus();
    return false ;
  }
  
      if (form.comments.value == "") {
    alert( "Please enter more information" );
    form.comments.focus();
    return false ;
  }

  return true ;
}
//-->
</script>

Code:

<form name="contactform" method="post" action="send_form_email.php" onsubmit="return checkform(this);">
<table width="450px">
</tr>
<tr>

 <td valign="top">
  <input  class="formbox" type="text" STYLE="text-align:right" value="contact name" name="contact_name" maxlength="50" size="30" onblur="if (this.value == '') {this.value = 'contact name';}"  onfocus="if (this.value == 'contact name') {this.value = '';}">
 </td>
</tr>
 
<tr>

 <td valign="top">
  <input class="formbox" type="text" STYLE="text-align:right" value="agency/company name" name="last_name" maxlength="50" size="30" onblur="if (this.value == '') {this.value = 'agency/company name';}"  onfocus="if (this.value == 'agency/company name') {this.value = '';}">
 </td>
</tr>
<tr>

 <td valign="top">
  <input class="formbox" type="text" STYLE="text-align:right" value="email address" name="email" maxlength="80" size="30" onblur="if (this.value == '') {this.value = 'email address';}"  onfocus="if (this.value == 'email address') {this.value = '';}">
 </td>
 
</tr>
<tr>

 <td valign="top">
  <input class="formbox" type="text" STYLE="text-align:right" value="dates required" name="telephone" maxlength="30" size="30" onblur="if (this.value == '') {this.value = 'dates required';}"  onfocus="if (this.value == 'dates required') {this.value = '';}">
 </td>
</tr>

<tr>
<td>
<div id="checksdiv">
Full Day<input class="formcheck" type="checkbox" name="check[]" value="Full_Day">
Half Day<input class="formcheck" type="checkbox" name="check[]" value="Half Day">
Hourly <input class="formcheck" type="checkbox" name="check[]" value="Hourly">
</div>

</td>
</tr>



<tr>

 <td valign="top">
  <textarea class="formbox" name="comments" value="any other info" STYLE="text-align:right" maxlength="1000" cols="25" rows="6" onblur="if (this.value == '') {this.value = 'any other info';}"  onfocus="if (this.value == 'any other info') {this.value = '';}"></textarea>
 </td>
 
</tr>
<tr>
 <td colspan="2" style="text-align:right">
  <input type="image" value="Submit" src="images/submit.png" />
 </td>
</tr>
</table>
</form>

Hey, I have a jQuery script running on my site that makes it so when you click on a thumbnail, a different overflow:hidden div is scrolled to the anchor point that thumbnail was linking to.

I want to make it so the thumbnail that you clicked becomes selected (and all over thumbnails become unselected). This could be with a border, a shadow, an image appearing behind it, opacity - basically anything (preferably an image appearing behind it).

I'm pretty much a javascript noob, but common sense tells me that this isn't possibly with basic CSS. How do I go about doing this?

PS, if you want a clearer picture of what I'm referring to on my site, check http://bit.ly/83ftPF

Thanks a ton for your time, I really appreciate it!
-Joel

Why is it when I have multiple "list" values the function works fine but when there is only one "list" value it tells me to "Select a Record" even when it is selected.

Code:

<script>


function listValuesexcel(form)
{
     

    var cbs = form["list[]"];
    var vals = ""
    

    for ( var c = 0; c < cbs.length; ++c )
    {
        var cb = cbs[c];
        if ( cb.checked ) vals += "," + cb.value;
    }




   if (vals.substring(1) == "") { 
        alert('Please select a record!'); 
           return false;         
            }
         
            
            
            
            

    document.excelForm.excelForm.value = vals.substring(1)
    document.excelForm.submit();


      

}

</script>



   
 

<ul>



   
 

 <li><a onClick="listValuesexcel(theForm)" title="Excel Report"    href="#" > Excel</a></li>
 

  
<BR>

      
<!-- END TABS -->
 
<form method="POST" action="index.php"  name="theForm" > 
 
<table>
 
<tr>
             
              <td> <input type="checkbox"  class ="normal2" value="1198746" name="list[]" ></td> 
                                           
                          
             </tr>           
       

 

</form>

Hi,
I am using Yahoo Table (YUI Library). I have a question regarding selected row data. I am using the following command to select the row but how I can get the selected row data.

MyDataTable.subscribe("rowClickEvent", MyDataTable.onEventSelectRow);

I want to create a second Yahoo Table based on row selection( I need the first column value to generate this table.


Code:

 YAHOO.example.AssesmentsTable = function() 
						        {
						        var MyColumnDefs = [            
						                            {key:"objectid", label: "#",formatter: YAHOO.widget.DataTable.formatAxsOppLink},						                         
						                            {key:"ClaimantName", label: "Claimant Name",sortable:true}, 
						                            {key:"ClaimantAddress", label: "Claimant Address",sortable:true}, 
						                            {key:"ClaimantPhone", label: "Claimant Phone",sortable:true}, 						                            
						                            {key:"ServiceType", label: "Service Type",sortable:true},  		                         
						                            {key:"StartDate", label: "Start Date",sortable:true},
                                            				    {key:"StartTime", label: "Start Time",sortable:true},                                   				                                                               	    
						                            {key:"Location", label: "Service Location",sortable:true},
						                            {key:"PartOfAMulti", label: "Part of a Multi?",sortable:true}, 
						                            {key:"InterpreterName", label: "Interpreter",sortable:true},
						                            {key:"AssessorsNames", label: "Assessors",sortable:true}, 
						                            {key:"DateReportDueToUs", label: "Date Report Due",sortable:true}             
						        		   ];
						
						        var MyDataSource = new YAHOO.util.DataSource(gAssessorAxs);
						        MyDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
						        MyDataSource.responseSchema = {fields: ["objectid","ClaimantName","ClaimantAddress","ClaimantPhone","ServiceType","StartDate","StartTime","Location","PartOfAMulti","InterpreterName","AssessorsNames","DateReportDueToUs"]};							
							
							var MyConfigs = {paginator : new YAHOO.widget.Paginator({rowsPerPage: 10})};							
						        var MyDataTable = new YAHOO.widget.DataTable("AssesmentsTable", MyColumnDefs, MyDataSource,MyConfigs);
							
							
							//MyDataTable.hideColumn(1); 
							MyDataTable.set("selectionMode", "single");

							MyDataTable.subscribe("rowMouseoverEvent", MyDataTable.onEventHighlightRow); 
							MyDataTable.subscribe("rowMouseoutEvent", MyDataTable.onEventUnhighlightRow); 
							MyDataTable.subscribe("rowClickEvent", MyDataTable.onEventSelectRow);  	                
						              
						        return {
						            oDS: MyDataSource,
						            oDT: MyDataTable
						        };
						    }();

Thanks.

i wud like to grab the values for the selected item in the last combobox n insert it into a form. thanks in advance

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
 // first combo box

	data_1 = new Option("1", "$");
	data_2 = new Option("2", "$$");

// second combo box

	data_1_1 = new Option("11", "-");
	data_1_2 = new Option("12", "-");
	data_2_1 = new Option("21", "--");
	data_2_2 = new Option("22", "--");
	data_2_3 = new Option("23", "--");
	data_2_4 = new Option("24", "--");
	data_2_5 = new Option("25", "--");

// third combo box

	data_1_1_1 = new Option("111", "1");
	data_1_1_2 = new Option("112", "2");
	data_1_1_3 = new Option("113", "3");
	data_1_2_1 = new Option("121", "4");
	data_1_2_2 = new Option("122", "5");
	data_1_2_3 = new Option("123", "6");
	data_1_2_4 = new Option("124", "7");
	data_2_1_1 = new Option("211", "8");
	data_2_1_2 = new Option("212", "9");
	data_2_2_1 = new Option("221", "10");
	data_2_2_2 = new Option("222", "11");
	data_2_3_1 = new Option("231", "12");
	data_2_3_2 = new Option("232", "13");



// other parameters

    displaywhenempty=""
    valuewhenempty=-1

    displaywhennotempty="-select-"
    valuewhennotempty=0


function change(currentbox) {
	numb = currentbox.id.split("_");
	currentbox = numb[1];

    i=parseInt(currentbox)+1

// I empty all combo boxes following the current one

    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
           (document.getElementById("combo_"+i)!=null)) {
         son = document.getElementById("combo_"+i);
	     // I empty all options except the first one (it isn't allowed)
	     for (m=son.options.length-1;m>0;m--) son.options[m]=null;
	     // I reset the first option
	     son.options[0]=new Option(displaywhenempty,valuewhenempty)
	     i=i+1
    }


// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill

    stringa='data'
    i=0
    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
           (document.getElementById("combo_"+i)!=null)) {
           eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
           if (i==currentbox) break;
           i=i+1
    }


// filling the "son" combo (if exists)

    following=parseInt(currentbox)+1

    if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
       (document.getElementById("combo_"+following)!=null)) {
       son = document.getElementById("combo_"+following);
       stringa=stringa+"_"
       i=0
       while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {

       // if there are no options, I empty the first option of the "son" combo
	   // otherwise I put "-select-" in it

	   	  if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
	   	      if (eval("typeof("+stringa+"1)=='undefined'"))
	   	         eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
	   	      else
	             eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
	      else
              eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
	      i=i+1
	   }
       //son.focus()
       i=1
       combostatus=''
       cstatus=stringa.split("_")
       while (cstatus[i]!=null) {
          combostatus=combostatus+cstatus[i]
          i=i+1
          }
       return combostatus;
    }
}

//-->
</script>

</head>

<body>


<form>
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
	<option value="value1">-select-</option>
	<option value="value2">1</option>
	<option value="value3">2</option>

</select>
<BR><BR>
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
	<option value="value1">  </option>
</select>
<BR><BR>
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
	<option value="value1">  </option>
</select>
<BR><BR>


</form>
</body>
</html>

I retrieve a list of links from a database using ajax, then I assign them to the innerHTML property of a div whose display property is set to "none" Then I set the display property to "display" to get a drop-down listbox.

The problem is the links in the list are all hilighted like they've been dragged over by a mouse.

How do I prevent these links from highlighting?

I have a select box with a few options.
When the page loads I need to get the selected option in this select box and alert its inner text.

Yet everything I try out on the net that should work wont work in IE, all other browser its fine.

Please can someone show me the TRUE and correct way to get the inner text of a option from a select box in IE?

Thanks!

i have a simple form basically....and i want to display a div containing a message when a certain dropdown menu item is selcted...

as you will see...i have two divs in my message...one named website design and one named twitter design both set to display none

when website design is selected i want the websitemessage div to display

when twitter is selected i want the twitter message to display...

any thoughts? here is some of the code



Code:

<form id="contactform" action="contact-submit.php" method="post">

			<!-- form fields -->
			<div class="form">
			<label for="name">Name<em>&bull;</em></label>
			<input class="textbox required" type="text" name="name" id="name" /><br />


			<label for="email">E-Mail<em>&bull;</em></label>
			<input class="textbox required email" type="text" name="email" id="email" /><br />

			<label for="subject">What are you interested in?<em>&bull;</em></label>
			<select type="text" value="Choose a Service" name="subject" id="subject" onchange="Select(this,'budget',1);"/>
           <option selected> -- Select A Design Service --</option>
           <option id="website"> Website Design </option>
             <option> Twitter </option>
             <option> Ning or Tumblr </option>
             <option> Flyers </option>
             <option> Business Card or Brochure</option>
             <option> Album or Mixtape cover</option>
                <option>Other</option>
            </select><br />
<div id="websitemessage" style="display:none;"><label> Do you already have a Logo to use for this website?  </label>
<input style="width:auto;margin-left:10px;"  type="radio" name="budget" value="Logo: Yes"> Yes
<input style="width:auto;margin-left:10px;"  type="radio" name="budget" value="Logo: Not yet"> Not yet
</input>

</div>
<div id="twittermessage" style="color:#B5B5B5;
display:none;"><SPAN>Twitter Designs start at  </SPAN><span style="color:#000;"> $30</SPAN>
</div>

any ideas on what script i would put into the head tags to make that happen?

When first loading the page, I want the default select box value to be showing, and change when they select a different value.

It works perfect when I select any value, but it's blank on load. I've attached screenshots showing. How can I get it default selected to show "Please Select a Character Class to view more information."

Code:

<script type = "text/javascript">
function showDetails(which) {
var d = document.getElementById("classDescription");
var s = which.value;
if (s == "Enchantress") {d.innerHTML = "<b>Enchantress</b><br />This character is a magic user. You are weak with attacks, but powerful with magic."}
if (s == "Knight") {d.innerHTML = "<b>Knight</b><br />This character is a physical user. You are powerful with attacks, but weak against magic."}
if (s == "Archer") {d.innerHTML = "<b>Archer</b><br />This character is a unique user. You can attack twice, but can't equip shields."}
if (s == "Thief") {d.innerHTML = "<b>Thief</b><br />This character lurks in the shadows. He is crafty, weak attacks, decent magic."}
if (s == "") {d.innerHTML = "Please Select a Character Class to view more information."}
}

</script>

Code:

<select name="Character_Class" id="CharClass" onchange="showDetails(this)">
                                                       <option value="" selected="selected">Choose a Class</option>
                                                       <option value="Enchantress">Enchantress</option>
                                                         <option value="Knight">Knight</option>
                                                           <option value="Archer">Archer</option>
                                                             <option value="Thief">Thief</option>
                                                       </select>

Code:

<li><div id="classDescription"></div></li>

Hi everyone!

I am building a simple web application in which the user inputs some html code in a <textarea> and the corresponding result (output of the code) is shown!

The problem I am facing is that suppose the user enters some code and wishes to wrap it inside specific tags (e.g. <script></script>) then she just selects the corresponding code and clicks a predefined button and the selected code gets wrapped inside those tags!

Now, what I am thinking right now is that when the user selects some code and clicks the button the selected text goes inside a variable (e.g. old_variable) and a new variable (new_variable = "<script>" + old_variable + "</script>") is returned!

But I was just wondering how to send the selected code in the variable i.e. old_variable using JavaScript?

Any help/hint/suggestion/advice would be highly valuable for me!

Thanks!

I'm not that familiar with classic ASP or Javascript but need to change an exisiting program to do the following:

Add a link to a page but only for certain marketers.

I have a classic ASP page that has a couple of hyperlinks for each marketer that is selected from a combobox drop down. The new hyperlink is to be added but only for select marketers. The rest don't even get to see this new hyperlink.

I added a function in Javascript as such:

Code:

function IsPikeESCO(UID,UCD) 
{
	var strTemp;
	var mktrno,mktname;
	var frm;
	var IsPike;

	IsPike = false;
	
	frm = document.Downloads;

	strTemp=frm.MKTRACCT.options[frm.MKTRACCT.selectedIndex].text;
	mktrno=strTemp.substring(0,10);

	switch (mktrno)
	{
		case 8:		
			IsPike = True;				
			break;
	
		case 99:
			IsPike = True;
			break;
		
		case 162:
			IsPike = True;
			break;
	}
	
	return IsPike;

}

Now I need to check if True then display the hyperlink, so I came up with this, which I know is not correct:

Code:

<tr><td></td><td
<%IF <a HREF="javascript:IsPikeESCO('<%response.write request("passUID")%>','<%response.write request("passUCD")%>')" = True THEN%>
			onMouseOver="/orradata/pike.DAT">Pike Data</font></a>
<%END IF%>

I want to be able to check the fuction for each marketer and if return is TRUE, then produce the hyperlink which will open a data file if clicked.

Can someone help? I'm not sure how to use the <%IF statement in conjunction with a javascript function that checks for a return value, and based on that return value, does some action.

I couldn't think of a way to explain my idea thoroughly, but I'm learning javascript and I have an html <select> form selected by using getElementById. Now, how do I access the data within the option tags to write to a variable? I know there are many simple ways of making it so that the value of the options are the html color name rather than hex code, but I'm doing this to learn javascript.

I have experience with ruby (ok, not THAT much, but I understand the concepts). Anyway's the code explains my problem much better, so here it is:
Code:

<body>
    <form action= "">
        <fieldset>
            <select id="selColor">
                <option value="FFFFFF">White</option>
                <option value="#A9A9A9">Gray</option>
                <option value="#000000">Black</option>
                <option value="#FF0000">Red</option>
                <option value="#FFA500">Orange</option>
                <option value="FFFF00">Yellow</option>
                <option value="#9ACD32">Green</option>
                <option value="#0000FF">Blue</option>
                <option value="#4B0082">Indigo</option>
                <option value="#9400D3">Violet</option>
            </select>

            <input type="button" 
                   value="Change Color" 
                   onclick="changeColor()" />
        </fieldset>
    </form>
<script type="text/javascript">
    //<![CDATA[
    function changeColor() {
        var selColor = document.getElementById("selColor")
        var color = selColor.value
        var colorid = 
        if (confirm("would you like to change color to "+colorid+"?")) {
            document.body.style.backgroundColor = color
        }

    }
    //]]>
</script>

</body>

I haven't initialized var colorid, but I'm trying to set it to either of the highlighted parts of the following piece of my code.
<option id=" white " value="FFFFFF"> White </option>

I want to access that part of the option tags of the element that the user selects. So, without changing the hex values to the color equivalent, how do I access the name of the selected option tag? ( I could make an if/switch statement to translate the hex color into a name and put it into the variable, but I would like to know how to do what I'm asking in case I run into a similair problem.)

Hi All,
I'm using Philip M's great Javascript tutorial "Triple Combo Box" to populate three combo boxes on my site. The problem i'm having is that I use the combo boxes to allow users to submit a DB search request using GET Form and I need to have the submitted parameters "selected" when the search result page loads.

I've searched all over the internet and I can't seem to find a usable solution so any help would be GREATLY appreciated. Thanks! If you need more information, lemme know!

Nick