|
JavaScript - Putting Js Value Into A Html Dropdown Box
Hi,
I'm trying to pass a javascript variable into a html form. The variable has to go into a dropdown box. At the moment I have the following html form: <form method="post" action="<?=$_SERVER['PHP_SELF']?>" > <select name="lightbox_select_<?=$_GET['id']?>"> <? foreach ($get_lightboxes as $lightbox) : ?> <? $lightbox_id = $lightbox["lightbox_id"]; ?> <? $title = $lightbox["title"]; ?> <? if(strlen($title) > 25) $title = substr($title, 0, 25) . "…"; ?> <option value="<?=$lightbox_id?>"><?=$title?></option> <? endforeach; ?> <option id="extra_lightbox" value=""></option> </select> <input type="submit" name="submit" value="Add" /> And the following javascript function: function get_lightboxes(title, new_lightbox_id){ document.getElementById('extra_lightbox').value = new_lightbox_id; document.getElementById('extra_lightbox').name = title; } How can I pass the 'title' and 'new_lightbox_id' variables from javascript into the extra option bit of the form#? Similar TutorialsHi, I'm just now starting to try to insert some javascript into my html and php code. I'm only used to working with those two markups. I need to try some very simple javascript snippets in some forms I'm making, but am having an issue getting the code to work. When I find these snippets, they are usually in a format like this: Code: <SCRIPT LANGUAGE="JavaScript">
// functions and whatnot here
function makeSomethingHappen(field, count, max) {
if (something.works > true)
field.value = i.will.crap(0, max);
else
// calculate the remaining characters
field.value = max - more.nodoze.caffein;
}
</script>
<center>
<form name=sample action="">
<input type="text" name="hours">
onKeyDown="CountLeft(some.js.looking,stuff.here);"
onKeyUp="CountLeft(some.more.js.looking,stuff.here);">
</form>
I've tried inserting the stuff like the webpages have it listed. I also try inserting everything contained in the <script> tags into the head of the document (or creating a head and putting it in there, since all my stuff is php and html code called to the file with php includes and whatnot). Anyways, I hoping somebody can provide a pointer as to how to use these snippets or how to correctly place things like this. I'm assuming there's a relatively uniform way that people are posting their tiny little js codes and I'm missing some basic knowledge as to how to use it. Any help is greatly appreciated. Hi, I am a newbie to Javascript but managed to set up a simple Function that allows me to create a thumbnail image viewer with headings and text. One of the variables is a Hyperlink. It all works fine but I want the hyperlink to open as a PopUp Window, but not sure how to do it. My Code Code: function LoadGallery(pictureName,imageFile,titleCaption,captionText,titleText,textText,titleJob,jobText,titlePricelist,pricelistText)
{
var picture = document.getElementById(pictureName);
if (picture.filters)
{
picture.style.filter="blendTrans(duration=1)";
picture.filters.blendTrans.Apply();
}
picture.src = imageFile;
if (picture.filters)
{
picture.filters.blendTrans.Play();
}
document.getElementById(titleCaption).innerHTML=captionText;
document.getElementById(titleText).innerHTML=textText;
document.getElementById(titleJob).innerHTML=jobText;
document.getElementById(titlePricelist).innerHTML=pricelistText;
}
and in my <body>, I have this code for each thumbnail .... Quote: <a href="#_self" onclick="LoadGallery('TeamGallery', 'http://www.albionhousehairsalon.co.uk/images/theteam_sharron_lg.gif', 'TeamGalleryCaption', 'Sharron', 'TeamGalleryText', 'Some text about Sharron','TeamGalleryRole','Senior Stylist','TeamGalleryPrices','<a href=\'/albion_house_hair_salon.html\'>Click here to see Sharrons Service Price List</a>')"><img src="http://www.albionhousehairsalon.co.uk/images/theteam_sharron_thumb.gif" width="90" height="61" /></a> This can be seen working her: http://www.albionhousehairsalon.co.u..._the_team.html but what I want is when you click on the text "Click here to see Gemma's Service Price List" (specific to Gemma of course). .... her price list opens in a popup? (If you want to try this Gemma is the Director with the Burgundy haircolour, top left on the page). Can anyone help? P.S. I am using the <div class> and id to pass the variable data through the function and display the enlarged image and relevant text and hyperlink... if that makes sense ? Hello, I have not been able to do any JS because my damn books have been on order for the last 3 weeks but I'm wondering if anybody could help me put a script into my webpage so that when anybody visits the 'contact us' page they can leave comments. Here's my code: HTML: Code: <!DOCTYPE html "PUBLIC-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact Us</title>
<link rel="stylesheet" type="text/css" href="css/contactus.css" />
</head>
<body bgcolor="grey">
<img src="gradientheader.jpg" id="header" width="930px;" height="120px;" align="center" border="1" />
<div class="gradientbuttons blacktheme">
<ul>
<li><a href="headerwithbuttons.html">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">Games</a></li>
<li><a href="http://www.dynamicdrive.com/style/">Music</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Contact Us</a></li>
<li><a href="http://www.codingforums.com/">Links</a></li>
</ul>
</div>
</br>
<div>
<img src="contactus.jpg" id="contactusright" alt="contact1" height="120px;" />
</div>
<div>
<img src="contactus.jpg" id="contactusleft" alt="contact2" height="120px;" />
</div>
<div class="infoarea1" height="300">
<img src="tel2.jpg" width="250" height="100px;" />
<p class="infoarea1">Please contact us on either our Fax line or Business line on:</p>
<br />
<p><i>Telephone: <b>012....</b></i>;</p>
<p><i>Fax: <b>012.....6</b></i></p>
</div>
<div class="infoarea2" height="300">
<img src="emailicon.jpg" width="250" height="100px;" />
<p class="infoarea2">Please contact us by e-mail to the following e-mail address:</p>
<br />
<p><i>E-Mail: <b>flipmode...........co.uk</b></i></p>
</div>
<div class="infoarea3" height="300">
<img src="postboxicon.jpg" width="250" height="100px;" />
<p class="infoarea3">Please contact us by post by sending all relevant post to:</p>
<br />
<p><i>..........</p>
<p>............</p>
<p>.......</p>
<p>.......</i></p>
</div>
</body>
</html>
CSS: Code: #header {border-style: solid;
border-width: 2px;
border-color: black;
}
.gradientbuttons {position:absolute; top:95px; left:149px; }
.gradientbuttons ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 13px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}
.gradientbuttons li{
display: inline;
margin: 0;
}
.gradientbuttons li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 50px;
border: 1px solid #778;
color: white;
border:1px solid gray;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}
.gradientbuttons li a:hover{
color: red;
}
.blacktheme li a{
font-size:16px;
background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f));
}
#contactusright {position: absolute; top:8px; left:895px;}
#contactusright {border: 2px solid #8dcb41;
width: 100px;}
#contactusleft {position: absolute; top:8px; left:8px;}
#contactusleft {border: 2px solid #8dcb41;
width: 100px;}
div.infoarea1 {float: left;}
div.infoarea1 {width: 250px;
background-color: green;
margin-top: 20px;}
p {padding: 1;
margin: 5;}
p {font-family: franklin gothic;
color: black;
}
div.infoarea2 {float: left;}
div.infoarea2 {width: 250px;
background-color: red;
margin-top: 20px;
margin-left: 130px;}
div.infoarea3 {float: right;}
div.infoarea3 {width: 250px;
background-color: blue;
margin-top: 20px;
margin-right: 0px;
}
BTW - I know this doesn't validate but it's only a draft site until I get my books. Thanks for any info! Here's the page, I want the comment underneath all three div's. Hi, I'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now. The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again? I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution: 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>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
//<![CDATA[
function store(element) {
// store values
var cl = element;
var text_list = new Array();
var value_list = new Array();
var length = cl.length;
for (var foo=0; foo<length; foo++) {
text_list[foo] = cl.options[foo].text;
value_list[foo] = cl.options[foo].value;
alert("text array " + foo + " " + text_list[foo]);
alert("value array " + foo + " " + value_list[foo]);
}
populate(cl, text_list, value_list);
}
function populate(element, text, value) {
// populate options with previously stored values
var cl = element;
var length = cl.length;
cl.options.length=0;
for (var bar=0; bar<length; bar++) {
cl.options[bar]= new Option(text[bar], value[bar], false, false);
}
}
function crafty_set_country(code) {
var cl = document.getElementById('select');
store(cl);
for (var i=0; i<cl.length; i++) {
if (cl.options[i].value == code) {
alert(cl.options[i].value + " found");
var value = cl.options[i].value;
var text = cl.options[i].text;
cl.options.length=0;
cl.options[0]=new Option(text, value, true, true);
/*
for (var j=0; j<cl.length; j++) {
alert("second loop " + cl.options[j].text);
if (cl.options[i].value != code) {
cl.options[j]
}
}
*/
} else {
alert(cl.options[i].value);
}
}
}
//]]>
</script>
</head>
<body>
<form>
<select id="select">
<option value="10">ten</option>
<option value="20">twenty</option>
<option value="30">thirty</option>
<option value="40">fourty</option>
<option value="50">fifty</option>
<option value="60">sixty</option>
</select>
<input type="button" value="remove" name="button" onClick="crafty_set_country(50)">
<input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)">
</form>
</body>
</html>
Many thanks! Martin hey guys The first dropdown has some options as : abc(a) bcd(a) cde(b) def(b) efg(c) fgh(c) The second dropdown has : a b c On selecting abc(a) in first dropdown the 'a' must get selected in second dropdown,on selecting cde(b) second dropdown must have 'b' and so on,also the second dropdown value should be disabled(grayed out) for user.Need the code in javascript.ty in advance. Hello, I am completely new to HTML/JS/CSS, therefore I know very little. I have two drop-down prompt controls with month names. One has just one value (say "July") and the other has all the months of the year ("January".."December"). The first prompt control is hidden on the page. How do I set the default selection of the second prompt control to the value present in the first prompt control? So, when the page is run, the second prompt control should automatically show "July". I was reading up on the selectedIndex property (?), but I know that it won't work because I want Index 0 to be selected in the first control and Index 6 in the second, and I expect it to change every month (next month it will be index 7 that should be automatically selected). If it matters, I am using IE8. Thanks! Hey, Im using Google Maps and when the user moves the map I have an event listener to return a string of routeIDs that are within the bounds of the map. Later on in the page I have a PHP MySQL statement where it Has [ICODE] SELECT * FROM routes WHERE [ICODE] , and after the WHERE I want to add this string. Basically as the user moves the map around, the list of available routes in bounds should change. How can I do this without redirecting pages at all, as that destroys the functionality of the google map? A typical return of the string would be [ICODE] id = 32 OR id = 58 OR id = 70 [ICODE] etc Any ideas? Thanks all, Rick I need some help putting the factors of a number (y) into an array For example if y = 20: [1, 2, 4, 5, 10, 20] Once I have this, I can use it to factor a quadratic: (ax = c)(bx = d) if c = 3 and d = 5 then I could check if 1c was a decimal, if 20d was a decimal and then vice versa Basically, I can use these numbers to see if b or d is a whole number and if it isn't, try the next one. If none of them are, then I can do y(ax + c)(bx + d) Thanks! Hi, I'm using this to put menus on my website http://simplythebest.net/scripts/DHT...script_79.html at the top it says its capable of having more than one menu on a page, but it doesnt give the directions. The website it links to for more help is dead. Can anyone help me out? Hello all, There's this javascript array on an html page, with some gifs in it. How can I include swfs in this array? Here's the code: <script type="text/javascript"> var imageArray = new Array(); imageArray[0] = "images/animation9.gif"; imageArray[1] = "images/Title2.gif"; imageArray[2] = "images/animation4.gif"; function doIt() { var rand = Math.floor(Math.random()*3); var imgPath = "<img src='"+imageArray[rand]+"' alt='Welcome to Kabeoke' border='0' align='absmiddle' />"; document.getElementById("image").innerHTML = imgPath; } </script> Thank-you SO much in advance I was wondering if it is possible to put all the non null variables of an array into a string variable with spaces between each array value? For example, if array() is a text array and has 10 values, array(0) through array(9), with three of those values null, let's say array(3), array(5), and array(7) are null, is there a way to put the remaining seven values into a string variable with spaces between each array value?
Hi, my first question on this forum is I hope a simple one. I have an input text field that I would like to have either the user fill out but also I would like to be able to fill it with text, which I can do, via javascript or a variable which I don't seem to be able to manage. I have tried lots of options, converting to a string first and much more but it will not work, maybe it is a syntax error or maybe I am just doing it plain wrong. I think it should be simple but I have only been using javascript for a few weeks so who knows, hopefully one of you! Here is my code for displaying a variable which does not work: Code: <html>
<head>
<script type="text/javascript">
function myfunction()
var mynumber = 101;
document.getElementById("myinput").value = mynumber;
</script>
</head>
<body>
<p id="demo">Web Page 1</p>
<button type="button" onclick="myfunction()">JS</button>
<input type="text" value="00000000" id="myinput">
</body>
</html>
I would be very grateful for any help. Thanks Simon I am currently working in Microsoft Frontpage designing a website for a friend. I was trying to make a JS alert come up when I mouse over an image and I have had no luck at all. This is the bit of code where The alert needs to be. I am a bit new to Javascript so I apologize if this was a stupid question. Code: <img border="0" src="../gallery%20pictures/Home.png" width="468" height="60"><br> <br> <p align="center"> <img <FORM src="../gallery%20pictures/THE%20BUTTON.png" width="388" height="372"> <br> </p> <p> </p> </body> </html> hopefully this is what I need to fix a problem with my code too. I have a JS that resizes a few div widths on my page but when i also have the styles in a seperate file the JS does not work. this is my original code that works when i use the following line in my html. Code: function Div(id,hw,ud) {
var div=document.getElementById(id);
if (hw == "h"){
var h=parseInt(div.style.height)+ud;
if (h>=150){
div.style.height = h + "px";
//alert(hw + h);
}
} else if (hw == "w"){
var w=parseInt(div.style.width)+ud;
if (w>=150){
div.style.width = w + "px";
var inputdiv=document.getElementById('txt_message');
var inputw=parseInt(inputdiv.style.width)+ud;
inputdiv.style.width = inputw + "px";
}
}
var chat_div = document.getElementById('div_chat');
chat_div.scrollTop = chat_div.scrollHeight;
}
Code: <div id="div_chat" style="height: 300px; width: 500px; overflow: auto; background-color: #CCCCCC; border: 1px solid #555555;"></div> if i was to use the following instead Code: <div id="div_chat"></div> with Code: #div_chat { height: 300px; width: 500px; overflow: auto; background-color: #CCCCCC; border: 1px solid #555555; }
in my CSS file then the JS is fired (i added an alert() to my code to check this) but the widths are not changed. what changes should i make to my codes to make this work so i can have the styles in my CSS file instead of the main HTML file. edit: just thought you may need this part too so you can see what the call looks like. Code: <div>
resize chat log <img src="resize_d.gif" width="21" height="9" onclick="Div('div_chat','h',20);" alt="height +">
<img src="resize_u.gif" width="21" height="9" onclick="Div('div_chat','h',-20);" alt="height -">
<img src="resize_r.gif" width="21" height="9" onclick="Div('div_chat','w',20);" alt="width +">
<img src="resize_l.gif" width="21" height="9" onclick="Div('div_chat','w',-20);" alt="height -">
</div>
further edit: i have just tried the following JS but this time i get the following error... Webpage error details Message: Invalid procedure call or argument on the following line Code: div.currentStyle["width"] = w + "px"; Hi, I have two dropdown lists with the second one being dependent on the selection in the first. Options in list 1: 1,3 or 4 List two should be enabled when 3 or 4 is selected in list 1. So far so good, managed to get it to work with only one set of lists, but I actually have 18 of those sets in this form: Code: <select name="fw[$i]" id="fw[$i]"> <option value="1">FWH</option> <option value="3">links</option> <option value="4">rechts</option> <option value="0" selected></option> </select><br /> <select name="lie[$i]" id="lie[$i]" disabled="disabled" onchange="showBox($i,xxx);"> <option value="0" selected>---</option> <option value="1">gut</option> <option value="2">schlecht</option> <option value="3">Strafschlag</option> <option value="4">OB</option> </select> $i is my index generated by my PHP script and runs from 1 to 18. Everything works just fine as long as the index is not in play. With the index my function breaks, most probably due to my inability to extract the second parameter (xxx above) from the selection field. Here's my function, there could be something wrong there too with how exactly to specify the proper dropdown list to enable. Code: function showBox(field,val) {
if (val > 1) {
var box = 'lie[' + field + ']';
document.form1.box.disabled == false;
}
else {
document.form1.box.disabled == true;
}
}
Finally, I'm not that adept in javascript programming, more like a trial and error guy, how has hit the wall with this problem. Thanks in advance! Joe It seems like it should be simple, but I don't see what I'm missing. Right now, the search button displays directly under my input field. I've gone through the CSS, but can't figure out where my code is forcing the button onto its own line. What am I missing? How can I bring it up to the same line?? Code: <form role="search" method="get" id="searchform" action="http://www.centerpie.com/" > <div> <input type="text" value="" maxlength="100" name="s" id="s"><input type="submit" id="searchsubmit" value="Search"> </div> </form> i'm trying to "post" the selected checkboxes (name and value) into a mysql database; i've search "docter google" for some answers and read that the "easiest" way to do this is to collect the checkboxes and put the values and names in to an hidden textfield ( function setvalue() ) and collect this textfield in a new page with php; but this doesn't work. it seems that the variable naamtest is empty (when i load a word into this var arv it does work) can someone find my error? Code: <script type="text/javascript">
function shift(which)
{
var counter = 0; // counter for checked checkboxes
var i = 0; // loop variable
var veck = "";// final url variable
var beginsaldo = 79;
var namen_array = "";
var va_array = "";
var namen = "";
var valu = "";
var input_obj = document.getElementsByTagName('input'); // get a collection of objects with the specified 'input' TAGNAME
for (i=0; i < input_obj.length; i++){ // loop through all collected objects
if (input_obj[i].type == 'checkbox' && input_obj[i].checked == true){ // if input object is checkbox and checkbox is checked then ...
counter++; // ... increase counter
var valcheck = input_obj[i].value; // waarde van de geselecteerde checkbox in variable steken
test = Number(valcheck); // absolute rekenwaarde van variable maken
beginsaldo -= test; //beginsaldo verminderen met de checkbox value
if (counter > 0){
var naam = input_obj[i].name + ' ';
var val = input_obj[i].value + ' ';
namen = namen + naam;
valu = valu + val;
namen_array = namen.split(" ");
va_array = valu.split(" ");
var naamtest = namen_array;
}}}
if (counter > 10){
alert ("u mag maar 10 renners selecteren");
var tr = which.parentNode;
while ( tr.tagName.toUpperCase() != "TR" )
{
tr = tr.parentNode;
if ( tr == null ) return; // something went very wrong!
}
var tds = tr.getElementsByTagName("td");
tds[0].getElementsByTagName("input")[0].checked = false;
}
else if (beginsaldo < 0){
alert ("uw saldo is te laag om dit uit te voeren");
var tr = which.parentNode;
while ( tr.tagName.toUpperCase() != "TR" )
{
tr = tr.parentNode;
if ( tr == null ) return; // something went very wrong!
}
var tds = tr.getElementsByTagName("td");
tds[0].getElementsByTagName("input")[0].checked = false;
}
else{
var tr = which.parentNode;
while ( tr.tagName.toUpperCase() != "TR" )
{
tr = tr.parentNode;
if ( tr == null ) return; // something went very wrong!
}
var tds = tr.getElementsByTagName("td");
if ( tds[0].getElementsByTagName("input")[0] == which )
{
tds[2].innerHTML = tds[0].innerHTML;
tds[0].innerHTML = " ";
tds[3].innerHTML = tds[1].innerHTML;
tds[1].innerHTML = " ";
tds[2].getElementsByTagName("input")[0].checked = true;
} else {
// this code is optional!!
tds[0].innerHTML = tds[2].innerHTML;
tds[2].innerHTML = " ";
tds[1].innerHTML = tds[3].innerHTML;
tds[3].innerHTML = " ";
tds[0].getElementsByTagName("input")[0].checked = false;
}
function setValue()
{
var arv = naamtest.join();
// This line converts js array to String
document.f2.arv.value=arv;
// This sets the string to the hidden form field.
}}}
</script>
ok i need a bit of advice.. I have a webpage and i want to put a section of another website on to my own website.. The Section i want to put on my website is on this page www.bebo.com/thegaadiscos and i only want to put the section with the comments on it... What i want is a bit like the face book section of this website http://www.alexandraburkeofficial.com/ How would this be done does anyone know.. favorite I'd like to modify a form on www.formsite.com (form builder app): username: testuser password: password I would like to use the nicedit.com's inline content editor's js to transform my textarea's into a richtext area. At present the nicedit editor works well in creating the richtextarea. However, the KEY point is that I would like formsite's form to pipe in the the created html and render it with the html component of formsite. Currently, the pipe function in formsite will only put out the html syntax in it's html module. action seen he http://fs8.formsite.com/testform/form1/index.html So this would be: 1. checking out my form on formsite.com 2. the script from nicedit.com is already installed in an html component. 3. changing or telling me the scripts/tags/or whatever for formsite form using formsites form builder (which allows some html/script editing). 4. changed so as to render the rich text entered on page 1 in page 2 instead of the html syntax. Any other solutions using formsite and any other richtextarea solutions would be great too! if I had two dropdown boxes... If I select the first one with the value of the month name .. eg.. January. How can I get the second dropdown box below to get that same value.?? Thanks S. |
|||||||