|
JavaScript - How To 'send Options' To Function?
I'm trying to make a jQuery slider, and I want the user (the person who installs it on their site) to be able to specify options easily. I know the Nivo slider does it from within the $(document).ready() event, but I can't figure out how to do it that way. I want it to be like this:
Code: <script>
$(document).ready(function() {
myFunction({
option1: 'value1',
option2: 'value2',
etc: 'etc'
});
});
</script>
But how do I recover this data so I can use it later? Similar TutorialsHello, In the following code i'm trying to check if the value of the text field is exist in the array. the problem that the function dose not accept the the value(node.value) from the text field. 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>Text Validation</title>
<script type="text/javascript" language="javascript">
Array.prototype.inArray = function (value)
{
// Returns true if the passed value is found in the
// array. Returns false if it is not.
alert(value);
var i;
for (i=0; i < this.length; i++)
{
if (this[i] == value)
{
return true;
}
}
return false;
};
function cal(xx)
{
var node_list = document.getElementsByTagName('input');
arr = new Array("");
for (var i = 0; i < node_list.length; i++)
{
var node = node_list[i];
///alert(node_list.length);
// alert(node.value);
arr.push(node.value)
}
alert(xx.length);
//var arr= new Array(1,2,3,4,5,6,7,8,9,10);
if(xx.length!=0)
{
if(arr.inArray(xx))
{
alert("Your value is found in the Array");
}
else
{
alert("Your value is not found in the Array");
}
}
}
</script>
</head>
<body>
<form id="text_validation" name="text_validation" action="" method="post">
<table width="600" border="1">
<tr>
<td><label for="abc_text_1" id="abc_text_1_lb">Text 1</label> </td>
<td>:</td>
<td><input type="text" id="abc_text_1" name="abc_text_1" onblur="return cal(this.value);" /></td>
</tr>
<tr>
<td><label for="cde_text_2" id="cde_text_2_lb">Text 2</label> </td>
<td>:</td>
<td><input type="text" id="cde_text_2" name="cde_text_2" value="abc" /></td>
</tr>
<tr>
<td><label for="fgh_text_3" id="fgh_text_3_lb">Text 3</label> </td>
<td>:</td>
<td><input type="text" id="fgh_text_3" name="fgh_text_3" value="abcaaaaa" onblur="return testvalidation(fgh_text_3);" /></td>
</tr>
<tr>
<td><label for="ijk_text_4" id="ijk_text_4_lb">Text 4</label> </td>
<td>:</td>
<td><input type="text" id="ijk_text_4" name="ijk_text_4" onblur="return testvalidation(ijk_text_4);" /></td>
</tr>
<tr>
<td><label for="lmn_text_5" id="lmn_text_5_lb">Text 5</label> </td>
<td>:</td>
<td><input type="text" id="lmn_text_5" name="lmn_text_5" onblur="return testvalidation(lmn_text_5);" /></td>
</tr>
<tr>
<td><label for="opq_text_6" id="opq_text_6_lb">Text 6</label> </td>
<td>:</td>
<td><input type="text" id="opq_text_6" name="opq_text_6" onblur="return testvalidation(opq_text_6);" /></td>
</tr>
<tr>
<td><label for="rst_text_7" id="rst_text_7_lb">Text 7</label> </td>
<td>:</td>
<td><input type="text" id="rst_text_7" name="rst_text_7" /></td>
</tr>
<tr>
<td><label for="uvw_text_8" id="uvw_text_8_lb">Text 8</label> </td>
<td>:</td>
<td><input type="text" id="uvw_text_8" name="uvw_text_8" /></td>
</tr>
<tr>
<td><label for="xyz_text_9" id="xyz_text_9_lb">Text 9</label> </td>
<td>:</td>
<td><input type="text" id="xyz_text_9" name="xyz_text_9" /></td>
</tr>
<tr>
<td><label for="klm_text_0" id="klm_text_0_lb">Text 10</label> </td>
<td>:</td>
<td><input type="text" id="klm_text_0" name="klm_text_0" value="10" /></td>
</tr>
</table>
</form>
</body>
</html>
Okay, I'm having some trouble getting my head around how to do this.. Code: <select> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <select> <option value="Rhino">Rhino</option> <option value="Bird">Bird</option> <option value="Rooster">Rooster</option> </select> <select> <option value="0202A">Rhino - Text</option> <option value="0203A">Rhino - Text2</option> <option value="0204A">Bird - Text1</option> <option value="0205A">Bird - Text2</option> <option value="0202B">Rhino - Text</option> <option value="0204B">Rhino - Text2</option> <option value="0204C">Rooster - Text1</option> <option value="0205C">Rooster - Text2</option> <option value="0206C">Rooster - Text3</option> </select> So say we had those three drop-downs. I'm looking to make it so that second drop-down only has options corresponding to a relationship between the first and the third drop-down. Example - if you select A in the first drop-down you only see Rhino and Bird in the second drop-down. If you select B you will only see Rhino in the second drop-down. Lastly, if you select C you will only see Rooster in the second drop-down. Just can't figure this out. >.< I'm creating a validation form. It's basic information but I want the form to be sent to my email after the form has been validated. My problem right now is when I hit submit my email comes up so I can send it to the assigned email address. It's not checking for errors first. I have created 5 different validation forms and I'm running across the same problem. I'm not sure if it's a function or form issue maybe even both. Any advice would be highly appreciated. Code: <script type="text/javascript">
/* <![CDATA[ */
/* ]]> */
function checkForNumber(fieldValue) {
var numberCheck = isNaN (fieldValue);
if (numberCheck ==true) {
window.alert("You must enter a numeric value!");
return false;
}
else
return true;
}
function checkForLetter(fieldValue) {
var alphaCheck= /^[A-Za-z]+$/ (fieldValue);
if (alphaCheck == true) {
window.alert("You must enter letters only!");
return false;
}
else
return true;
}
function checkEmail(fieldValue) {
var emailCheck = /^\w+([/.-]?\w+)*@\w+([\-]?\w+)*(\.\w{2.3})+$/ (fieldValue);
if (emailCheck == true) {
window.alert("Please enter a valid email address!");
return false;
}
else
return true;
}
function checkAlphanumeric(fieldValue) {
var alphanumericCheck = /^[0-9a-zA-Z]+$/ (fieldValue);
if (alphanumericCheck == true) {
window.alert("Please enter an alphanumeric address!");
return false;
}
else
return true;
}
function buttonPic() {
for (var i=0; i<document.forms.morePic.length; ++i) {
if (document.forms[0].morePic[i].checked == true) {
document.forms[0].morePic[i].checked = false;
break;
}
}
}
function checkPurch() {
for (var j=0; j<document.forms.purchase.length; ++j) {
if (document.forms[0].purchase[j].checked == true) {
document.forms[0].purchase[j].checked = false;
break;
}
}
}
function confirmSubmit() {
var submitForm = window.confirm("Are you sure you want to submit form?");
if (document.forms[0].name_info.value == ""
|| document.forms[0].address_info.value == ""
|| document.forms[0].city_info.value == ""
|| document.forms[0].state_info.value == ""
|| document.forms[0].zip_info.value == "") {
window.alert("You must enter your address.");
return false;
}
else if (document.forms[0].validateEmail.value == "") {
window.alert("Please enter a email address where I can contact you.");
return false
}
var picSelected = false;
for (var i=0; i < 2; ++i) {
if (document.forms[0].morePic[i].checked == true) {
picSelected = true;
break;
}
}
if (picSelected! = true) {
window.alert("Please select if you would like more pictures.");
return false;
}
var purchSelected = false;
for (var j=0; j<2; ++j) {
if (document.forms[0].purchase[j].check == true) {
purchSelected = true;
break;
}
}
if (purchSelected! = true) {
window.alert("Please select if you are interested in one or two vehicles.");
return false;
return true;
}
function confirmReset() {
var resetForm = window.confirm("Are you sure you want to reset this form.");
if (resetForm == true)
return true;
return false;
}
}
</script>
</head>
<body>
<p>Full Name:<input type="text" name="name_info" size="30" onblur="return checkForLetter(this.value);"/></p>
<p>Street Address:<input type="text" name="address_info" size="50" onblur="return checkAlphanumeric(this.value);"/></p>
City:<input type="text" name="city_info" size="20" onblur="return checkForLetter(this.value);"/>    
State:
<select name="state_info">
<option value="chooseYourState">Choose Your State</option>
<option value="alabama">Alabama</option>
<option value="alaska">Alaska</option>
<option value="arizona">Arizona</option>
</select>    
Zip Code:
<input type="text" name="zip_info" size="10" onblur="return checkForNumber(this.value);"/></p>
Email Address:
<input type="text" name="validateEmail" size="30" onblur="return checkEmail(this.value);"/></p>
<p>Would you like more pictures sent to your email?</p>
<input type="radio" name="morePic" value="Yes" onblur="return buttonPic();"/>Yes        
<input type="radio" name="morePic" value="No" onblur="return buttonPic();"/>No
<p>Are you thinking about purchasing one or two vehicles?</p>
<input type="checkbox" name="purchase" value="One" onblur="return checkPurch();"/>One        
<input type="checkbox" name="purchase" value="Two" onblur="return checkPurch();"/>Two
<form action="mailto:abc@yahoo.com" method="get">
<p><input type="submit" value="Send" onsubmit="return confirmSubmit();"/>
<input type="reset" value="Reset" onreset="return confirmReset();"/></p>
</form>
I've got 2 drop down boxes, dropdown1 and dropdown2, and i want certain options on dropdown2 to be greyed out or unavailable if certain selections are made in dropdown1. is this possible? and if so, how? thanks Hi I am trying to use Overlib code to develop a dropdown box area that I can populate with categories and buttons, however the Overlib seem to lie relevent to the mouse and not the button. Does anyone know any good examples maybe jquery, to create this type of large dropdown. I want to be able to populate the area with images, and categories using php. I hope this make some sense. Steve I have the following code below to make and populate a select box for a row. It is working on my IE, Firefox, and Chrome, but some others are having problems. It makes the select box, but it does not put the options in there. I am having issues troubleshooting because I cannot replicate the error. Any ideas? Code: newManufacturerCell = newRow.appendChild(document.createElement('td'));
var newSelect=newManufacturerCell.appendChild(document.createElement('select'));
var firstOption=document.createElement('option');
var secondOption=document.createElement('option');
firstOption.text="Dell DCS";
secondOption.text="Hp";
newSelect.add(firstOption,null);
newSelect.add(secondOption,null);
newSelect.id="man"+count;
I currently have two selectbox, the first for categories and the second for subcategories. When an option from the category selectbox is chosen I would like the subcategory selectbox to be filled with options drawn from an array. The following code I have works for Chrome and Firefox but not in IE, I would appreciate any help to fix the code or new code which does a similar function. HTML: Code: <select size="9" id="category" name="category" onclick="return categoryChange();">
<option>Antiques ></option>
<option>Art and Crafts ></option>
</select>
<select style="visibility:hidden" id="subcategory" name="subcategory" size="9">
</select>
JAVASCRIPT: Code: function addOption(selectbox,text,value){
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
var antiques = new Array("Furniture","Ceramics","Glass");
var art = new Array("Drawings and Paintings","Photographs");
function categoryChange(){
document.getElementById("subcategory").style.visibility = "visible";
document.getElementById("subcategory").innerHTML = "";
if(document.getElementById("category").value == "Antiques >"){
for (var i=0; i < antiques.length;++i){
addOption(document.myForm.subcategory, antiques[i], antiques[i]);
}
}
else if(document.getElementById("category").value == "Art and Crafts >"){
for (var i=0; i < art.length;++i){
addOption(document.myForm.subcategory, art[i], art[i]);
}
}
}
Hi there, I am looking for a javascript code for an html file. I am looking for something where when you put your mouse over the text, a drop down list will come down. If anyone can point me in the right direction that would be helpful. An example would be on a site like www.espn.com - when you put your mouse over NBA the following options appear: NBA Home, Scores, Schedule, Teams, etc. Please i am new here and i need some urgent help. I am not much familiar with JavaScript. i have 3 options list as <ul> now what i want is when first scrollbar is chosen the second and third will be enable and will display dates and time..and when somebody choose a date he will be taken to a registration form. for example in my second option i will display dates this will be only enable when the city is being selected from first list: Code: <select> <option>Please Select</option> <option> 12/12/2009</option> <option > 12/12/2010</option> <option> 12/12/2011</option> <option> 12/12/2012</option> </select> here is the code for my option list: Code: <ul>
<li>I am in City<select name="dates">
<option value=0 >Please Select</option>
<optgroup label='test'>
<option value=3 style='font-family:Arial; color:#ffffff;'> City One</option>
<option value=4 style='font-family:Arial; color:#ffffff;'> City Two</option>
<option value=5 style='font-family:Arial; color:#ffffff;'> City Three</option>
<option value=6 style='font-family:Arial; color:#ffffff;'> City Four</option></select></optgroup>
</li>
<li>Dates Available<select name="dates">
<option value=0>Please Select</option></select>
</li>
<li>Times Available<select name="dates">
<option value=0>Please Select</option></select>
</li>
</ul>
Thanks for any help Hello everyone, Forgive me if I ask something stupid or don't word something just right. Basically in short I'm really struggling because I don't know javascript beyond the simplest of basic's "manipulating other code".... What I'm after or trying to do is simply create a script to launch a new page after a X amount of time, like a popup. But I need the new window to have the following options like no toolbar or scroll bars etc... This is the code I've been trying to manipulate for my purpose and just can't get it right meaning it doesn't work at all in fact I haven't even been able to get the timer part worked in since I couldn't get the launch part working..... I've made a web app using asp.net & vb.net and need a launch page so I don't have any toolbars or scrollbars etc.... Any help or input is much appreciated!! Thanks Code: <html>
<script>
var customerWindow;
function launchit() {
var var_height = screen.availHeight - 10;
var var_width = screen.availWidth - 10;
var customerUrl = "default.aspx";
if ( !customerWindow || customerWindow.closed ) {
options = 'top=0,' +
'left=0,' +
'height=' + var_height + ',' +
'width=' + var_width + ',' +
'fullscreen=no,' +
'directories=no,' +
'location=no,' +
'menubar=no,' +
'resizable=yes,' +
'scrollbars=yes,' +
'status=yes,' +
'titlebar=yes,' +
'toolbar=no';
var wname = new String(location.pathname);
var re1 = /\//g;
var re2 = /\\/g;
var re3 = /\./g;
wname = wname.replace( re1, "" );
wname = wname.replace( re2, "" );
wname = wname.replace( re3, "" );
customerWindow = window.open(customerUrl, wname, options);
if (customerWindow == null) {
alert("Could not open a new window. Are popups being blocked?");
}
else {
customerWindow.opener = null;
}
}
else {
customerWindow.focus();
}
}
</script>
<head>
<title>Test Lanuch</title>
</head>
<body id="launcher" onload="launchit();">
<div class="submit">
<input class="button" type="button" value="Launch" onClick="javascript:launchit();" />
</div>
</body>
</html>
If i have an existing HTML Select statement with options specified, and then based on an even, i want to rebuild that options list, how do I wipe the existing options parameters in order to add new ones? Is that even possible?
Okay so I'm trying to come up with as many alternative methods to accomplish something. So I'm just seeking input from anyone who is willing to supply some. After the user clicks on a match type it'll know HOW MANY sides to the match there are so say for a singles match it'd have 2 sides (1 vs. 1) for a Triple Threat Match it'd have 3 sides (1 vs. 1 vs. 1) and so on. All matches have a stored field in the database of how many sides they have. So I'm thinking that I could have it create 3 divs (or something) down in the competitors area of how many sides there are in the match (separated by a VS. text block) and when the user selects a character from the dropdown and adds a character the user can maybe drag and drop the character's name to whatever side they choose. Its one idea. If you think of an EASIER more EFFICIENT way to do something like this and have an idea say something please or even if you can't let me know that you think it's a worth while idea. Code: <label for="matchtypedrop<?php echo $i+1 ?>">Match Type:</label>
<select class="dropdown" name="matchtypedrop<?php echo $i+1 ?>" id="matchtypedrop<?php echo $i+1 ?>" title="Match Type <?php echo $i+1 ?>">
<option value="0">- Select -</option>
<?php
$query = 'SELECT id, matchtype FROM matchtypes';
$result = mysqli_query ( $dbc, $query ); // Run The Query
while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) {
print "<option value=\"".$row['id']."\">".$row['matchtype']."</option>\r";
}
?>
</select>
<label for="competitors<?php echo $i+1 ?>">Competitors:</label><ul id="competitors<?php echo $i+1 ?>" style="list-style: none; margin-left: 195px;"></ul>
<select class="dropdown" name="charactersdrop<?php echo $i+1 ?>" id="charactersdrop<?php echo $i+1 ?>" title="Characters Dropdown <?php echo $i+1 ?>" style="margin-left: 195px;">
<option value="0">- Select -</option>
<?php
$query = 'SELECT id, `character` FROM characters ORDER BY `character`';
$result = mysqli_query ( $dbc, $query ); // Run The Query
while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) {
print "<option value=\"".$row['id']."\">".$row['character']."</option>\r";
}
?>
</select>
<input type="button" value="Add Character" class="" onclick="Competitors(<?php echo $i+1 ?>)"/>
Hi all, I have table in Javascript and it has addrow, deleterow, submit, and functions. when i click it automatically adds new row and it has select option to choose some of them for ex. in added two rows and one of drop down combox i chose Motherboard Asus and from other i chose Motherboard Gigabyte. So i need once i select the name from combobox, should not allow user to select same name in coming rows Here is my code. Thanks beforehands PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head><title>dinamik sheet</title> <script> var i=iteration; function addrow(){ var tbl = document.getElementById('sheet'); var iteration = tbl.rows.length; document.getElementById('count_rows').value = iteration; var row=tbl.insertRow(iteration); var cellLeft = row.insertCell(0); var textNode = document.createTextNode(iteration); cellLeft.appendChild(textNode); var cellRight = row.insertCell(1); var el = document.createElement('input'); el.type = 'text'; el.name = 'txtRow'+iteration; el.id = 'txtRow'+iteration; el.size = 15; el.value = '0'; el.onblur = sum; cellRight.appendChild(el); var cellRight = row.insertCell(2); var elaz = document.createElement('input'); elaz.type = 'text'; elaz.name = 'txtRowaz'+iteration; elaz.id = 'txtRowaz'+iteration; elaz.size = 20; elaz.value = '0'; elaz.onblur = sum; cellRight.appendChild(elaz); var cellRight1 = row.insertCell(3); var ela = document.createElement('input'); ela.type = 'text'; ela.name = 'txtRowe'+iteration; ela.id = 'txtRowe'+iteration; ela.size = 20; ela.value = '0'; ela.onblur = sum; cellRight1.appendChild(ela); var cellRightsel = row.insertCell(4); var sel = document.createElement('select'); sel.name = 'selRow' + iteration; sel.id = 'selRow' + iteration; sel.onchange = sum; sel.options[0] = new Option('MotherBoard ASUS', 'MotherBoard ASUS'); sel.options[1] = new Option('MotherBoard Gigabyte', 'MotherBoard Gigabyte'); sel.options[2] = new Option('MotherBoard MSI', 'MotherBoard MSI'); sel.options[3] = new Option('Graphiqcard ASUS', 'Graphiqcard ASUS'); sel.options[4] = new Option('GraphigCard ATI', 'GraphigCard ATI'); sel.options[5] = new Option('GraphigCard GefORCE', 'GraphigCard GefORCE'); cellRightsel.appendChild(sel); sum(); } function removeRowFromTable() { var tbl = document.getElementById('sheet'); var lastRow = tbl.rows.length; if (lastRow > 2) tbl.deleteRow(lastRow - 1); } function sum(){ var s1 = 0; var s2 = 0; var tbl=document.getElementById('sheet'); var iteration=tbl.rows.length-1; for(var i=1; i<=iteration; i++){//loop through table rows var el1 = document.getElementById('txtRow'+i);//Row's Income field var el2 = document.getElementById('selRow'+i);//Row's percentage menu var ela = document.getElementById('txtRowe'+i);//Row's Tax cell var elaz=document.getElementById('txtRowaz'+i); if(!el1 || !el2 || !ela||!elaz) continue; var txt = el1.value; if(txt != ( '' + Number(txt) )) continue; //reject non-numeric entries var tax = Number(txt) * Number(130); if(el2[el2.selectedIndex].value=="MotherBoard Gigabyte"){ var tax = Number(txt) * Number(150); } if(el2[el2.selectedIndex].value=="MotherBoard MSI"){ var tax = Number(txt) * Number(100); } if(el2[el2.selectedIndex].value=="Graphiqcard ASUS"){ var tax = Number(txt) * Number(85); } if(el2[el2.selectedIndex].value=="GraphigCard ATI"){ var tax = Number(txt) * Number(95); } if (el2[el2.selectedIndex].value=="GraphigCard ATI") { var tax = Number(txt) * Number(88); } ela.value = tax.toFixed(2); elaz.value=tax.toFixed(2)/Number(txt); if(isNaN(elaz.value)){ elaz.value=0; } s1 += Number(txt); s2 += tax; } var t1 = document.getElementById('total'); var t2 = document.getElementById('taxtotal'); if(t1){ t1.value = s1.toFixed(2); } if(t2){ t2.value = s2.toFixed(2); } } onload = function(){ addrow(); } </script> </head> <body> <form name="eval_edit" method="POST" action="part1.php?id=iteration-1"> <table align="center" width="75%"> <tr> <td align="center">Balance sheet</td></tr> <tr> <td align="center"> <table id="sheet" border="1"> <tr><td>object</td><td>Total amount</td><td>One ITEM Price</td><td name="amount">Total Item Price </td><td>Name</td></tr> </table> </td> </tr> <tr> <td align="center"> <input type="hidden" name="count_rows" id="count_rows" /> <input type="button" value="Add" onclick="addrow()" /> <input type="button" value="Remove" onclick="removeRowFromTable()" /> <input type="button" value="SUM" onClick="sum()"/> <input type="submit" value="Submit" /><br /> </td> </tr> <tr> <td align="left"> <input id="total" name="total" type="text"/>total amount of products<br /> <input id="taxtotal" name="taxtotal" type="text"/>total price of products </td> </tr> </table> </form> </body> </html> Hi, I have two dropdown lists, and I want to have each option from the first dropdown list to give the specific options on the second dropdown list. For instance, <select name="module"> <option value="pic1.jpg>TM1</option> <option value="pic2.jpg>TM2</option> <option value="pic3.jpg>TM3</option> </select> <select name="location"> <option value="loc_1">Box1</option> <option value="loc_2">Box2</option> <option value="loc_3">Box3</option> Note: The option values are just examples, but each option must have a value in order for other things to work. Here is what I need to do: If TM1 is selected, only Box1 and Box 2 are available (Box3 is removed from the dropdown "location" list); If TM2 is selected, only Box 2 is available (Box 1 and 3 are removed from the dropdown "location" list); If TM3 is selected, all options in the dropdown "location" list are available. My javascript knowledge is very limited. Any help is greatly appreciated. Thanks in advance, JW This code is supposed to batch transfer options between selects. It works flawlessly for single values, but when I select multiple options, all of them get deleted, but only one transferred. Any help is greatly appreciated! Thank you. Code: <html>
<head>
<title></title>
<script type="text/javascript">
function removeOptionSelected(b,j)
{
var elRem = document.getElementById(b);
var elAdd = document.getElementById(j);
var elOptNew = document.createElement('option');
var i;
for (i = elRem.length - 1; i>=0; i--) {
if (elRem.options[i].selected) {
//alert(elRem.options[i].text+' '+elRem.options[i].value+' deleted!')
elOptNew.text = elRem.options[i].text;
elOptNew.value = elRem.options[i].value;
try {
elAdd.add(elOptNew, null); // standards compliant; doesn't work in IE
}
catch(ex) {
elAdd.add(elOptNew); // IE only
}
elRem.remove(i);
}
}
}
</script>
<style type="text/css">
div {
float: left;
/*border: 1px solid black;*/
}
div.contain {
width: 536px;
height: 500px;
border: none;
}
div.side {
width: 215px;
height: 500px;
}
div.middle {
width: 100px;
height: 300px;
padding-top: 200px;
}
select {
width: 200px;
height: 500px;
}
input {
width: 82px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="contain">
<div class="side">
<form name="left">
<select id="left" class="left" multiple name="out">
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="orange">orange</option>
<option value="tangerine">tangerine</option>
<option value="pineapple">pineapple</option>
<option value="carrot">carrot</option>
<option value="grapefruit">grapefruit</option>
<option value="plum">plum</option>
<option value="blueberry">blueberry</option>
<option value="strawberry">strawberry</option>
<option value="cashews">cashews</option>
<option value="peanuts">peanuts</option>
</select>
</form>
</div>
<div class="middle">
<input type="button" value="Add-->" onClick="removeOptionSelected('left','right');" />
<input type="button" value="<--Remove" onClick="removeOptionSelected('right','left')" />
</div>
<div class="side">
<form name="right">
<select id="right" class="right" multiple name="out">
<option value="greenbeans">greenbeans</option>
<option value="walnuts">walnuts</option>
</select>
</form>
</div>
</div>
</body>
</html>
Hi all! I'm using a multiselect box on my website, similar to this one: <Select Name="multiselect[]" multiple="multiple"> <option>This is option 1</option> <option>This is option 2</option> <option>This is option 3</option> <option>This is option 4</option> </select> Now I want to set option 1, option 2 and option 3 as selected (highlighted) in javascript. How would I go about doing this? I tried something like this: document.taakform.elements['multiselect[]'].selectedIndex = "1" document.taakform.elements['multiselect[]'].selectedIndex = "2" document.taakform.elements['multiselect[]'].selectedIndex = "3" Of course this doesn't work (else I wouldn't be posting here ), but I hope you catch my drift. Thanks in advance guys (and gals)! Hi. I am not sure if this has been answered to other posts but I tried to search and I can't find the right answer for my problem. I am trying to learn javascript for my self and can't figure out my self. Actually this is the same like the pop-up calendar but the only difference is I don't want numbers, I need a list of options so user can choose and when they select, it will transfer to the textbox right away like the calendar. I have a form and trying to use a pop-up window to select an option then transfer the option selected to show on the textbox. I have 10 textboxes and all of them has a "Select" button to pop-up the option list. BTW, the "SELECT" button will populate the same option list. Here is my html code: Code: <select id="droplist" name="droplist" size="1" >
<option>Click to select...</option>
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option <?php echo helper_selected($prompt == $form['droplist']); ?> value="<?php echo $prompt; ?>" style="width:500"><?php safeEcho($prompt); ?> </option>
<?php endforeach; ?>
</select>
below is my array: PHP Code: <?php $designation_list = array( "00111" =>"Aloha of the Pacific/Transfer Assistance Program for High Income Students", "71122" =>"Aloha", "71231" =>"Free Housing Information", "71232" => "Drama Queen and King", "98765" => "Aloha Boy Home of the Land", "12345" => "Aloha Home", ); I wanted to use the option list over and over again for the 10 textboxes. Is that possible? Below is my sample code but didn't work. Please help.... Code: //javascript
var testpopup5 = new PopupWindow("testdiv5");
testpopup5.offsetX=-20;
testpopup5.offsetY=20;
testpopup5.autoHide();
var testpopup5input=null;
testpopup5.populate('<select>Select: <select name="sel" id="sel" onChange="testpopup5pick(this.options[this.selectedIndex].value);"><OPTION VALUE="A">A</option>
<OPTION VALUE="B">B</option><OPTION VALUE="C">C</option></SELECT>');
function test5popupactivate(obj,anchor) {
testpopup5input=obj;
testpopup5.showPopup(anchor);
}
function testpopup5pick(val) {
testpopup5input.value = val;
testpopup5.hidePopup();
}
//html
<INPUT NAME="test5" SIZE=30 id="I">
<A HREF="#sel" onClick="test5popupactivate(document.getElementById['I'].test5,'anchor5');return false;" NAME="anchor5" ID="anchor5">Select</A>
<DIV ID="testdiv5" STYLE="position:absolute;visibility:hidden;background-color:#CCCCCC;width:200px;height:50px;"></DIV>
As you can see I get this code from somewhere else but it doesn't work on me. Is there an easy way to do it? Please help. Thanks in advance. Hello! I'm trying to figure out a way of having + and - buttons which cycle through the options in a select box such as: <select name="distance" id="jr_radius"> <option value="0.5">0.5 Miles</option> <option value="1">1 Mile</option> <option value="3" selected="selected">3 Miles</option> <option value="5">5 Miles</option> <option value="10">10 Miles</option> </select> So far I've only been able to have a button change the select box to a specific value, or add or subtract to a numerical value. Both of which aren't quite right. Ideally if the default value is "3" then clicking the + button could make it "5" and clicking the same button again would make it "10". Visa versa, the minus button would make the value "1" and then if pressed again it would become "0.5". Does that make sense? Any help will be greatly appreciated! Not 100% sure why or how to make this work. I have 5 options in a select drop-down. Only two of them are to disable a text field. I have written it successfully to disable on one option. How would I add the second option? I have tried many different ways, and i know its something small that i am missing. Below is the code that does not work but shows the 2 options that disable my text field. Code:
<script type="text/javascript">
function type_disable() {
var qr_type = document.getElementById('qr_type');
var qr_owner = document.getElementById('qr_owner');
if(qr_type.value == 'bio' || 'rebrand')
qr_owner.disabled = true
else
qr_owner.disabled = false
}
</script>
Code: <tr> <td align="right"><span class="re">*</span>Type: </td> <td align="left"> <select id="qr_type" name="qr_type" onChange="type_disable()"> <option value="0">Select Type</option> <option value="property">Property Code</option> <option value="ipw">IPW Code</option> <option value="bio">Biography Code</option> <option value="rebrand">Rebrand Code</option> <option value="property_rebrand">Property-rebrand Code</option> </select> </td> <td ></td> </tr> <tr> <td align="right"><span class="re">*</span>Owner: </td> <td align="left"> <input type="textbox" name="qr_owner" id="qr_owner" size="30" value=""/></td> <td ></td> </tr> Thanks for any help! I am creating a recipe cookbook program. On the main page, I have a top frame (named "nav") and bottom frame (named "recipe_layout"). There is a listbox in the BOTTOM frame containing the recipe names, and a "View Recipe" button in the TOP frame. The user would select a recipe and then click the button to view the recipe in the bottom frame. I believe that I need to insert the code to make this work with the button (?), and I think my problem is that I'm not accessing the bottom frame correctly: CURRENT CODE FOR LISTBOX IN BOTTOM FRAME <form name="recipe_form" style="margin-top:30"> <select name="name_dropdown" multiple size="2"> <option selected="selected">Search byName</option> <option value="applepie.html">Apple Pie</option> CURRENT CODE FOR BUTTON IN TOP FRAME <input type="button" value="View Recipe" onclick="parent.recipe_layout.location.href='recipe_form.name_dropdown.options[selectedIndex].value'"> Thank you so much in advance!! |
|||||||