JavaScript - I Need Help With Yahoo Table Selected Row .

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 i can't seem to get a drop downs selected index.

This is my drop down box:

Code:

<select name="queba" id="queeba">
<option value="ban1">Bank1
<option value="ban2">Bank2
<option value="ban3">Bank3
<option value="ban4">Bank4
</select>

thanks

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>

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

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

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!

OK so say I have something like this:

<TD>
<p>Item A</p>
<p>Item B</p>
<p>Item C</p>
<p>Item D</p>
</TD>

So TD would be the parent and all of the <P>'s would be childNodes. I want to be able to click on each child and have it alert me its index # relative to the parent node. So 'Item A' should alert "0", 'Item B' - "1", 'Item C' - "2", etc.

Thanks in advance.

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

Hi everyone,

The website that I am trying to create has a couple of drop down lists. I want a variable to store the value (text) of the data field selected from a particular drop down list. Let me explain this with an example:

If a dropdown list has data fields like (aa, bb, cc, dd, ee) and if a user selects the option 'bb' , then there should be a variable that stores the text 'bb'.

I am using the following piece of code. Can you please take a look at it to tell whether I am doing the correct thing or not.

Firstly, the HTML code that generates the drop down list on the page. This works fine.
Code:

<b> Student's Profession</b>

<FORM NAME="Profession">
<SELECT NAME="Student’s Profession">

<OPTION VALUE="k1">Select
<OPTION VALUE="k2">Engineer
<OPTION VALUE="k3">Doctor
<OPTION VALUE="k4">IAS
<OPTION VALUE="k5">Lawyer
<OPTION VALUE="k6">CA
<OPTION VALUE="k7">IAS
<OPTION VALUE="k8">Engineer + MBA
<OPTION VALUE="k9">Family Business
<OPTION VALUE="k10">None of the above
</SELECT>
</FORM>

[Then I have declared a function in JavaScript that stores the value of the data field selected in a particular variable (sel_student_profession). I am not sure about the parameter. Should I simply write 'dropdown' or write the form name? (Profession). Or something else?

Code:

<script type="text/javascript">
function Selected_profession(dropdown)
{
var myindex = Profession.selectedindex;
var sel_student_profession = Profession.options[myindex].text;
return sel_student_profession;
}
</script>

And then at the end of it, if I want to know the value (text) of the data field selected, I call the function. Right now, I am calling the function as follows:

Code:

var student_profession = Selected_profession(Profession);

So, if the user selects "engineer" from the drop down list, student_profession should store "engineer".

Am I doing it the correct way? If not, I would highly appreciate any sort of help. Thanks a lot!