JavaScript - Get Index Of Selected Childnode.

Hey,
I was wondering if there was something in javascript that could tell if the text is selected.

Selected as in when you click and hold your mouse down and go over text.
Is there something in javascript to tell if you've selected any text?

Thanks.

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 :-)

Hope I can explain this...
I have a page with a couple dropdowns - dropdown-1 is for shape, and dropdown-2 is for color. Images appear to match what the user selects. The shape image has a transparent center, so that I can make a color image appear underneath, when they choose that.

But to do so, I have to set a default color picture (pic4) appear, so that the shape(pic1) can be seen. The color dropdown works just fine. But if they go back and change the shape, it defaults to the original (pic4)

What's a way to script this so it knows not to change pic4 if it's been selected.

In other words, as a user I pick "round". It shows me a round circle. I select "orange", to change the circle's color. But I change my mind, I want a square, so I go back and change it, but my square is green again, even though I chose orange.

Here's some of what I got.
Code:

<script>
function change1(picName,imgName)

 {
   if (document.images)
    {
      imgOn=eval(imgName + ".src");
      document[picName].src= imgOn;
    }
 }

<!-- this following is the variable from the form that I want to check. If it's been set, then I want the color image to be left alone -->
function passit2(str)
{document.formsearch1.s2.value=str}

</script>

<!-- this next little bit is what I'm wanting to work on. I want it to know if pic4 has bee selected, and to leave it alone if that has happened. --><a href="javascript:passit('auriculate')" onMouseover="change1('pic1','image2')" onClick="ShowContent('uniqueleaf'); change4('pic2','_auriculate'); ShowContent('uniquename'); change1('pic4','image28'); add_content('auriculate');" onMouseout="change1('pic1','image41');">Auriculate</a></li>


<!-- Here's the bit related directly to pic4. If they have selected this, I don't want it to change when  --> 

 <li id="green"><a href="javascript:passit2('green')" onMouseover="change1('pic3','image28')" onClick="ShowContent('uniquename'); change1('pic4','image28'); add_content2('green');" onMouseout="change1('pic3','image_off');">green</a></li>
		           <li id="orange"><a href="javascript:passit2('orange')" onMouseover="change1('pic3','image29')" onClick="ShowContent('uniquename'); change1('pic4','image29'); add_content2('orange');" onMouseout="change1('pic3','image_off');">orange</a></li>
  	                  <li id="red"><a href="javascript:passit2('red')" onMouseover="change1('pic3','image30')" onClick="ShowContent('uniquename'); change1('pic4','image30'); add_content2('red');" onMouseout="change1('pic3','image_off');">red</a></li>
                          <li id="blue"><a href="javascript:passit2('blue')" onMouseover="change1('pic3','image31')" onClick="ShowContent('uniquename'); change1('pic4','image31'); add_content2('blue');" onMouseout="change1('pic3','image_off');">blue</a></li>
	                  <li id="purple"><a href="javascript:passit2('purple')" onMouseover="change1('pic3','image32')" onClick="ShowContent('uniquename'); change1('pic4','image32'); add_content2('purple');" onMouseout="change1('pic3','image_off');">purple</a></li>
	                  <li id="purpleblack"><a href="javascript:passit2('purple-black')" onMouseover="change1('pic3','image32')" onClick="ShowContent('uniquename'); change1('pic4','image33'); add_content2('purple black');" onMouseout="change1('pic3','image_off');">purple-black</a></li>


<!-- here's the image that is being changed. Maybe if it's a script that just checks to see if it's transparent.gif to change it, and if it's not, to leave it alone? -->
<IMG SRC="images/leaf_shapes/entire/transparent1.gif" name="pic4" width="250" height="350" border="0">

Hi All,
I am using this code to populate a drop down list from mysql database.
I need to pass id and name through this code.but the problem is the value is lost when the page gets refreshed.and it works fine if i pass only name through it.
my code is as follows:
PHP Code:
<?PHP
$query=mysql_query("SELECT * FROM client_master WHERE client_status=1");?>
<select name='name' onChange='javascript:form_submit();' style='width:80px'>
<option value="">-SELECT-</option>
<?php
while($row=mysql_fetch_array($query))
{
$name=$row['client_name'];
?>
<option value="<?php echo $row['client_id'] ?>" <?php echo($row['client_name']==$_POST['name'])?'selected':''?>>
<?php echo $row[client_name];?>
</option>
<?php
}
?>
</select>
<script language="javascript">
function form_submit(){
    document.gr.submit();
}
</script>

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

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!

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>

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?

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

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?

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>