JavaScript - Using An Option Menu To Trigger Values.

Hello everybody,

I have a javascript adding new options to a drop down select menu getting the information from the database. The code is as written below:
Code:

function setOptions1() {
var selbox2 = document.egitimgiris.alttipID;
selbox2.options.length = 0;
selbox2.options[selbox2.options.length] = new Option('Option1','22')
selbox2.options[selbox2.options.length] = new Option('Option2','23')
selbox2.options[selbox2.options.length] = new Option('Option3','24')
selbox2.options[selbox2.options.length] = new Option('Option4','25')
}

I want one of them to be added as selected. I will put an "if" check and if it the value of the option and the value in the database is equal I want that option to be added as "selected".

Is this possible? If yes, how? Please help.

Thanks and regards
telmessos

This is hopefully my last jquery question. I have a slight issue with my buttons and dropdown menu. What happens is lets say user chooses option type "ABCDE" in first dropdown menu and then second dropdown menu chooses the value "4" for the number of answers and then clicks on the buttons "A","B","C" and "E", well if the user then decides to change the option type to "ABC", the buttons "A", "B" and "C" are still selected from the last time they have been selected.

What I want is that if the Option Type (OptionDropId) changes, then buttons selected is refreshed so no buttons are selected from the last time they have been selected.

This did used to work but when I included my change() event handler in my code which I need, the buttons do not refresh whenever a new dropdown option (OptionDropId) is selected. So I think the edit of the code may need to happen in the code below:

Code:

             $(document).ready(function ()
        {
            var OptDrop = new Array();
    
    OptDrop.abc = ["",1,2];
    OptDrop.abcd = ["",1,2,3];
    OptDrop.abcde = ["",1,2,3,4];
    OptDrop.trueorfalse = [1];
    OptDrop.yesorno = [1];
            
            $("#optionDropId").change(function ()
            {
                var selectedValue = $(this).val();
                $("#numberDropId").html("");
                $.each(OptDrop[selectedValue], function (x, y)
                {
                    $("#numberDropId").append($("<option></option>").attr("value", y).html(y));
                });
            }); 
    
            $("#optionDropId").change();
        });

My code is in JSfiddle, (the second dropdown menu and buttons may not appear in JSFiddle but the code does work properly, I feel it is better displaying code in JSfiddle then in my questions as it will take up a lot of space. If you want to see working version then post code in your web document and it should work).

My Code: [click below][1]


[1]: http://jsfiddle.net/XZ7um/10/

hi guys! i would like to know the script for me to auto select an option in a menu on a single click. so i have two pages. on the first page is the button. second page is the drop down menu. menu has selection "fruit" "vegies" "meat". by default fruit is selected. when i click on that button it will automatically select the menu on the second page for "meat".


thanks!!

Hi People,

I've used the Concertina Menu from Stu Nicholls on one of my websites and am trying to get the Menu slider to slide up automatically after a certain time. Currently it only slides up on a mouseclick.

The working link can be found at
www.atomwhale.com/share/clients/branch/website/home.html

Hope someone can help me in getting this to work.

thanks,
Jeriel.

have a scenario where I show a drop-down-with-few-items in a JSP page, to the user.
The length of few options in the drop down is greater than that of the drop down's, hence our requirement is to show the hovered (not selected) option as tooltip for user's convenience. I cannot use the title attribute option as its not compatible with my web browser

I'm tearing my hair out with this one and can't figure out why it won't work, and am hoping someone could help a Javascript noobie out.

Basically, I need the script to hide two divs if one of the options in a <select> menu is selected.

Here's the code I've got for the Javascript:
Code:

function typeoflisting() {

	var selectform = document.getElementById('propertytype');
	
	if (selectform.options[selectedIndex].value == "sell") {
		document.getElementById('per_week').style.display = 'none';
		document.getElementById('bond').style.display = 'none';
	}
	else {
		document.getElementById('per_week').style.display = 'block';
		document.getElementById('bond').style.display = 'block';
	}	
}

Here's the <select> form:
Code:

<select id="propertytype" name="propertytype" class="select" onchange="typeoflisting()">	
	<option value="lease">I'd like to lease a property to tenants</option>
	<option value="sell">I'd like to sell a property</option>
	<option value="share">I'd like to share a property</option>
</select>

And here's the first div I'm attempting to hide:
Code:

<div id="per_week" style="float: left;"> per week</div>

And the second div I'm attempting to hide:
Code:

<div style="float: left; padding: 20px 20px 0px 0px;" id="bond">
<h3>Bond</h3>
<input type="text" class="text" value="$"/>
</div>

Could anyone please tell me what I'm doing wrong?

I have a scenario where I show a drop-down-with-few-items in a JSP page, to the user.
The length of few options in the drop down is greater than that of the drop down's, hence our requirement is to show the hovered (not selected) option as tooltip for user's convenience. I am not able to use title attribute for displaying tooltips in my browser.
Now the code in http://dossett.org/11/No_onmouseover_for_options_in_IE/
implements a tooltip for multiple select drop down menu.Can you modify the code for single select

im trying to have it save the values in the menu, i was think either cookies or
storing it in the .window thing but i am unsure of how to do these, any help would be great.



Code:

<script type="text/javascript">

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}


function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}

<!--
// initialise shortcuts on page load
var selectObj1=null, selectObj2=null// global
 function init()
  { selectObj1=document.getElementById("select_1");
    selectObj2=document.getElementById("select_2");
    selectObj2.disabled=true;

// ========== end init() ==============
// second select box options list
var A= new Array()
A["remote 1"]=["0","yup","DVD-1"];
A["remote 2"]=["0","VCR-1","DVD-2"];
//

// global variables
var saveObj=null, indx=null, targetObj=null, selectNo=null;   
//
 function process(obj,sNumb)
  { // disable unused select boxes
    if(sNumb==1)
     { selectObj1.selectedIndex="0";
       selectObj1.disabled=true;
     }
    else if( sNumb==2)
	 { selectObj1.selectedIndex="0";
       selectObj1.disabled=true;
     }
   //
   // store selected index   
    indx=obj.options.selectedIndex;
   // invalid selection
    if(indx==0){ return; }
   // ---------
   // save passed parameters for use after timeout deleay   
    saveObj=obj, selectNo=sNumb;     
  // put object items list into next select box after clearing
     targetObj=document.getElementById("select_"+selectNo)
     targetObj.disabled=false;
   // clear any existing options note that this starts from end of list, not beginning 
     for(var i=targetObj.options.length-1;i>-1;i--)
          { targetObj.options[i]=null;  }   
  // build in short delay here to avoid error in Opera browser
      setTimeout("finishOff()",50)
    }
// ----------- 50ms delay here --------   
// called from timeout in function process()
   function finishOff()
    {  var obj=saveObj;    // from global
      // fill selectObj options 
       var i, thisItem=0;                         
      // build options list
      switch(selectNo){
      case 2 : targArray = A[obj.options[indx].value]; break;
       }   
         //
       for(i=0;i<targArray.length;i++)
         { thisItem=targArray[i];     
          // syntax is new Option("text", "value", isDefaultSelectedFlag, isSelectedFlag)
                   
           targetObj.options[i]=new Option(thisItem,thisItem,false,false);   
         }
     obj.blur();
  }
  
// ============ end process() ===================
// fires on selecting in third select box
 function finish()
  { select("["+selectObj1.value+"]  ["+selectObj2.value+"]")
  }
// ------------ 
//
window.onload=init;
//-->

</script>

I have two dropdown menus.

1st -> Drop Down Menu (name="optionDrop") has 5 values which are "ABC", "ABCD", "ABCDE", "True or False" and "Yes or No".
2nd -> Drop Down Menu (name="numberDrop") has 5 values which are "","1", "2", "3" and "4".

Now this is what I want to achieve:
If user select "ABC" from "optionDrop", then only display options "", "1" and "2" If user select "ABCD" from "optionDrop", then only display options "", "1", "2" and "3" If user select "ABCDE" from "optionDrop", then only display options "", "1", "2", "3" and "4" If user select "True or False" from "optionDrop", then do not display DropDown Menu and Display N/A (This I achieved but I want hidden numberDrop to equal 1, I have not achieved that part) If user select "Yes or No" from "optionDrop", then do not display DropDown Menu and Display N/A (This I achieved but I want hidden numberDrop to equal 1, I have not achieved that part)
Does anyone know how this can be done and implemented in the javascript code I have?

Below is Javascript Code:

Code:

 function getDropDown() {
         var optionDrop = document.getElementsByName("optionDrop");
        var na = document.getElementById("na");
        var numberDrop = document.getElementsByName("numberDrop");
        var answerA = document.getElementById("answerA");
        var answerB = document.getElementById("answerB");
        var answerC = document.getElementById("answerC");
        var answerD = document.getElementById("answerD");
        var answerE = document.getElementById("answerE");
        var answerTrue = document.getElementById("answerTrue");
        var answerFalse = document.getElementById("answerFalse");
        var answerYes = document.getElementById("answerYes");
        var answerNo = document.getElementById("answerNo");
        
    if (optionDrop[0].value == "abc" || optionDrop[0].value == "abcd" || optionDrop[0].value == "abcde"){
					numberDrop[0].style.display = "block";
					na.style.display = "none";
		
    }else if (optionDrop[0].value == "trueorfalse" || optionDrop[0].value == "yesorno"){			
	    			numberDrop[0].style.display = "none";
	    			na.style.display = "block";            
            
            }
            }

Htrml code:

Code:

<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" >
<table id="middleDetails" border="1">
<tr>
    <td>Question:</td> 
    <td rowspan="3">
        <textarea rows="5" cols="40" name="questionText"></textarea>
    </td>
    <td>Option Type:</td> 
    <td>
        <select name="optionDrop" onClick="getDropDown()">
<option value="">Please Select</option>
<option value="abc">ABC</option>
<option value="abcd">ABCD</option>
<option value="abcde">ABCDE</option>
<option value="trueorfalse">True or False</option>
<option value="yesorno">Yes or No</option>
</select>
    </td>
<tr>
<td colspan="2"></td>
<td>Number of Answers:</td>
<td>
<span id="na">N/A</span>
<select name="numberDrop" id="numberDropId" onChange="getButtons()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
</table>
</form>

Hi there,
this is my first post so forgive me if it is frustrating to those who try to help.

I am trying to create a side navigation menu that I want to just be a heading then once clicked it toggles on a list. Each item must be a link to a different webpage.
so far i have only managed to create a toggle list but cannot control each item to make it a unique link. I'll post the script I have so far;
--------------------------------------------------------------------------
<script language="javascript" type="text/javascript">

function list_colours()
{
var i=0;
var colours = new Array();

colours[0]=<a href="../Yellow Inventory.html"> Yellow </a>;
colours[1]=<a href="../Orange Inventory.html">"Orange"</a>;
colours[2]=<a href="../Pink Inventory.html">"Pink"</a>;
colours[3]=<a href="../Green Inventory.html">"Green"</a>;
colours[4]=<a href="../Blue Inventory.html">"Blue"</a>;
colours[5]=<a href="../Red Inventory.html">"Red"</a>;

var text="";

for(var i=0; i < colours.length; i++) {

text = text + colours[i] + "</a><br/>";
}

return text;


}

//creating a toggle menu

var onOff = "off"

function insertText()
{

if(onOff == "off")
{

var paragraph = document.getElementById("colour-items");
var colours_list = list_colours();
paragraph.innerHTML=colours_list;
onOff="on"
}

else
{
var paragraph = document.getElementById("colour-items");
var colours_list="";
paragraph.innerHTML=colours_list;
onOff="off"
}

}


</script>


<div id="left-container">

<div id="Nav-title"><h3 onmouseover="insertText();">Colours</h3></div>

<p id="colour-items"></p>




</div>
-------------------------------------------------------------------------

It is my guess that you make the array lists a list of a links, though I can't seem to find the correct way how.




The second problem I have is that I have a large number of images of products on my page.
I would like 4 headings that contain all my images, like the toggle menu above. so I click the heading and only those images come up.

I will be happy to answer any questions that may help.

Thanks all.

I have a basic function:

function Notice() {
var selectedCountry = CheckoutForm.elements["shipping-country"].selectedIndex;
if (selectedCountry != 'United States') {
alert('You are outside the US');
}
}

I have a select control with id "shipping-country":
<select name="shippingCountry" id="shipping-country" >
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
...
</select>

How can I trigger my function on selection change if I don't have access to html code or the server side code that generated the select control?
typically I would just add onchange="Notice();" , but this option is out of the out of the question for the above reason. Any help would be appreciated.

I have the perfect form for a client - but its missing one thing. She sells hair clips in various colors. A user can select a hair clip color and quantity quite easily (as seen in the code below). My issue is that she wants to be able to give the user a 'special price' based on the quantity ordered by the user. Contrary to simply adding the default price of $7 over and over again based on the quantity selected.

To Reiterate

The way I want it to work...

1 clip is $7
2 clips are $12
3 clips are $22
5 clips are....etc.

...however, with the way that the javascript is set up now I'm only able to select one default price. This means that whatever quantity is selected -- it's simply multiplied by the number 7 to provide a total.

1 clip is $7
2 clips are $14
3 clips are $21
5 clips are....etc.

If some kind soul can give their advice or point me in the right direction I would appreciate it.

Code:

<script type="text/javascript" src="_inc/orderform04.js"></script>

<script type="text/javascript">
//<![CDATA[
window.onload = setupScripts;
function setupScripts()
{
	var anOrder1 = new OrderForm();
}
//]]>
</script>

<form id="frmOrder">
<p>
<input type="checkbox" id="chk0" />
Black Hair Clips
$<span id="txtPrice0">10</span>
<select id="sel0">
	<option value="val0">0</option>
	<option value="val1">1</option>
	<option value="val2">2</option>
	<option value="val3">3</option>
</select>
</p>
<p>
<input type="checkbox" id="chk1" />
Red Hair Clips
$<span id="txtPrice1">10</span>
<select id="sel1">
	<option value="val0">0</option>
	<option value="val1">1</option>
	<option value="val2">2</option>
    <option value="val3">3</option>
</select>
</p>
<p>
<input type="text" id="txtTotal" size="8" />
</p>
</form>

orderform04.js is located he

http://www.mredkj.com/javascript/orderform04.js

Hi.

I'm working on a usability issue on a website. I have a jquery accordion slider, each slide has a link to a category. Now what happens is that when I go to the category page by clicking on a slider, when the page loads, the sliders always opens the first slide. For example, if I click on the third slide, I would like that slide to be open when the page loads.

This is similar to the :current I believe. I think to solve what I need I must trigger a click on the third slide that third slide page opens.

I know I need a reference for a condition, so I have ID'd my body through this php code were it gets the page name from the url into variable $page and then into do body's ID:

PHP Code:
<?php



    $page = $_SERVER['REQUEST_URI'];



    $page = str_replace("/","",$page);



    $page = str_replace(".php","",$page);



    $page = str_replace("?s=","",$page);



    $page = $page ? $page : 'default'



?>







<body id="<?php echo $page ?>">

Now I've been trying through Javascript to get the variable from php and trigger a click on the slide of the category it is opening:

PHP Code:
<script type="text/javascript">



var bodyid = "<? $page ?>";

if (bodyid == "energy") {

$("document").ready(function() {
    setTimeout(function() {
        $("ul#accordion li:second-child).trigger('click');
    },10);
});

}

</script>

This is not working and I don't really know what's wrong and how to solve or search for help.

Does anyone understand what I'm trying to do here? Thank you.

Hello,

I need your help.

I basically need, when the enter button is pressed on the keyboard to trigger a button. Currently, my code works but it just refreshes the page and does not actually trigger the desired button:

Code:

//HERES MY CUSTOM BUTTON:

<BUTTON TYPE="submit" 
onMouseOver="goLite(this.name)"
onMouseOut="goDim(this.name)"
onclick="javascript:v7_search()"
CLASS="btn_std"
NAME="btn_search"
>&nbsp;? Search

</BUTTON>

Here's the code to make the enter button work:

Code:

<form name="frmIMTS" 
onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btn_search').click();}};"
>

Any help with this is greatly appreciated.

Cheers,

J