JavaScript - Pass Value From A Textbox To Selectbox

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,

I have a select box whose options are populated from an xml file, the code goes like this:

Code:

 var sel_html = '<select onChange="handleSelected(this)">' +
                        '<option selected> - Select a zone - <\/option>';

var a = 0;

      function createPolygon(pts,colour,name) {
        var shape = new GPolygon(pts,"#000000",1,1,colour,0.5, {title:name});
        gpolygons[a] = shape;
       
		// ======= Add the entry to the select box =====
        sel_html += '<option> ' + name + '<\/option>';
        // ==========================================================
        
        a++;
        return shape;
      }	
		
						


// ======= This function handles selections from the select box ====
      // === If the dummy entry is selected, the info window is closed ==
      function handleSelected(opt) {
	  for (var a=0; a<gpolygons.length; a++) {
		  gpolygons[a].hide();
        }
        var a = opt.selectedIndex - 1; 
        if (a > -1) {
          gpolygons[a].show()
        }
 }

sel_html += '<\/select>';
        document.getElementById("selection").innerHTML = sel_html;

which works fine for showing one option at a time, but what I would like to do is have one of the selections to be to show all of the options at the same time. At the moment I have it working with a checkbox that works off a separate piece of code, but it would be great to have that option within the select box.

You can see the select box in question here - it's the one on the right which says "Select a zone"

thanks in advance.

Hello,

I have this code:
PHP Code:
<script> 
    function checkForOther(obj) 
    { 
        if (!document.layers) 
        { 
            var txt = document.getElementById("otherTitle"); 
            if (obj.value == "new") 
            { 
                txt.style.display = "inline"; 
                // gives the text field the name of the drop-down, for easy processing 
                txt.name = "selTitle"; 
                obj.name = ""; 
            } 
            else 
            { 
                txt.style.display = "none"; 
                txt.name = ""; 
                obj.name = "selTitle"; 
            } 
        } 
    } 
</script> 


it's should hide/show input field accourding the user choice - if he choose "<option value='new'>new</option>", the follow action should happend:

PHP Code:
                <li id='otherTitle'>
                    <label for='new'>new artist</label>
                    <input type='text'  name='new_artist_name' />                
                </li> 


The script works, but when I click "submit" the parameter that the "select box" should send don't get send...

here is the full code:
PHP Code:
                <li>
                    <label for='artist'>Artists</label>
                    <select name='artist_id' onchange="checkForOther(this)\">
                        <option value='new'>new artist</option>";
                        $query = mysql_query("SELECT id, name FROM `chords_artists` ORDER BY `name` ");
                        while($index = mysql_fetch_array($query)) 
                        {    
                            $artist_id = $index['id'];
                            $artist = $index['name'];
                            echo "<option value='$artist_id'>$artist</option>";
                        }
                        
                    echo "    
                    </select>
                </li>    
                
                <li id='otherTitle'>
                    <label for='new'>new artist:</label>
                    <input type='text'  name='new_artist_name' />                
                </li> 


Can you please help me with it?

Hello there !!

I really hope someone can help me out with this.. ( im stuck for about 5 hours all ready!! ) most likely because im not so good in javascript......

I want to show multiple divs on select of a <option> box.
So lets say there are 3 options

Code:

<select name="hoofd_pakket" onchange="showDivs('div',this)">
<option value="a">Alles in 1</option>
<option value="b">Internet + TV</option>
<option value="c">Internet + Bellen</option>
</select>

And a javascript function to show the div`s

Code:

function showDivs(prefix,chooser) {
        for(var i=0;i<chooser.options.length;i++) {
                var div = document.getElementById(prefix+chooser.options[i].value);
                div.style.display = 'none';
        }
 
                var selectedvalue = chooser.options[chooser.selectedIndex].value;
			

	        if(selectedvalue == "a")
                {
                        displayDivs(prefix,"a");
			displayDivs(prefix,"c");
			displayDivs(prefix,"d");
                }
               if(selectedvalue == "b")
                {
                        displayDivs(prefix,"b");
						displayDivs(prefix,"c");
                }
               if(selectedvalue == "c")
                {
                        displayDivs(prefix,"d");
                }
		
 
}
 
function displayDivs(prefix,suffix) {
 
        var div = document.getElementById(prefix+suffix);
        div.style.display = 'block';
}

And some divs to show

Code:

<div id="diva" style="display:none;">blabla</div>
<div id="divb" style="display:none;">blabla</div>
<div id="divc" style="display:none;">blabla</div>
<div id="divd" style="display:none;">blabla</div>

All works fine up to some point, when I choose lets say option 'b' first.. I get 2 divs. Thats good..

Then I choose option 'c' I get only one div. Thats good..

But if I choose option 'b' again, I get 3 divs instead of 2 !! It shoudnt show the div from from option 'c'..

Does anybody understand why??

Thanx allot !!!

I'm trying to figure out how to make a select box change which <div> should show or hide...

Code:

<script language="JavaScript">
	
	function doHideShowMatchplayOptions(divName){    
		var objDiv = document.getElementById(divName);    
		if(objDiv.style.display == ''){        
			objDiv.style.display = 'none    
		} else {        
			objDiv.style.display = '    
		} 
	}
	
</script>

<select name="matchplaytype" onchange="doHideShowMatchplayOptions(\'idHideShowMatchplayOptions\');">
    <option value="">Choose</option>
    <option value="1"># 1</option>
    <option value="2"># 2</option>
</select>

<div id="idHideShowMatchplayOptions" style="display:none;">
<table><tr><td colspan="2">This is # 1</td></tr></table>
</div>

<div id="idHideShowMatchplayOptions" style="display:none;">
<table><tr><td colspan="2">This is # 2</td></tr></table>
</div>

In the above script I'm only able to change one div... What I want is to be able to, if a user changes the selectbox from "# 1" to "# 2", to change the viewable div.... Hope this makes sense and somebody can help...

THanks in advance :-)

Hello. I've been teaching myself HTML and CSS for a while, and now I've moved into the world of Javascript (but I'm still very much a beginner). For practice, I've been building a sample sign up form for a mock website, and I'm having problems with the birthdate section. The idea I had was to have MM, DD, and YYYY be the default values of my 3 textboxes (as an example for users), then set the value to nothing when the box gained focus. That all works fine, but I ran into problems when I tried to write an if statement to set the value back to MM, DD, or YYYY if the value was still nothing when the user clicked away. As it is now it just replaces the text inputted into the textbox (which of course is not good). Any ideas for what the problem might be?

Code:

<form name="signup" action="javascript:void(0);" method="post">

<table>
	<tr>
		<td>Date Of Birth:</td>
		<td>
		<input name="DOBmonth" type="text" value="MM" size="2" style="color: #555555;" onFocus="clearDOBmonth()" onBlur="restoreDOBmonth()" />
		<input name="DOBday" type="text" value="DD" size="2" style="color: #555555;" onFocus="clearDOBday()" />
		<input name="DOByear" type="text" value="YYYY" size="4" style="color: #555555;" onFocus="clearDOByear()" /></td>
	</tr>
	<tr>
		<td></td>
		<td><button name="Submit" type="submit" style="font-size: 1em;">Sign Up</button></td>
	</tr>
</table>
</form>

<script type="text/javascript" language="javascript">
<!--
	document.signup.DOBmonth.value="MM";
	document.signup.DOBday.value="DD";
	document.signup.DOByear.value="YYYY";

function clearDOBmonth() { document.signup.DOBmonth.value="";}
function clearDOBday() { document.signup.DOBday.value="";}
function clearDOByear() { document.signup.DOByear.value="";}
function restoreDOBmonth()
	{
		if ('document.signup.DOBmonth.value = ""')
			{
				document.signup.DOBmonth.value = "MM";
				// alert(document.signup.DOBmonth.value);
			}
	}

//-->
</script>

Another side question, if I set a variable equal to the value of a textbox, then change the value of the variable, does that also change the value of the textbox? or is the variable no longer associated with the textbox. Example: Code:

var a = document.form.textbox.value;
a = blue;

does document.form.textbox.value = blue? or is var a now completely independent of the textbox value? Thanks!

Hi,

I'm trying to write a function that will show arrowheads on polylines selected from a select box in a google map. I only want the arrowheads that belong to the line shown to be displayed.

I have got it working using check boxes, and the select box shows the lines, but am having trouble tweaking the code to get the arrows to show up as well. You can see the working checkboxes (and the semi-working selectbox) he http://www.xelawho.com/map/zonesarrowstest.htm

I see the error at line 135 ("Cannot read property 'onclick' of undefined") which I assume refers to the option, but this is where my limited js understanding begins to falter... how do I define the option if the select box options come from xml? And will defining it actually make this code work?

Below are (what I think are) the relevant bits of code. Thanks in advance for any help.

(cross-posted on the google maps forum and here over the last few days, but unanswered)

Code:

var h = 0;
 var v = 0;

// === Function to create a marker arrow ===
      function createArrow(point,icon,category) {
        var arrows = new GMarker(point,icon);
		map.addOverlay(arrows);
		pts[v] = arrows;
		arrows.hide(); 
		arrows.mycategory = category;                                 
        pts.push(arrows);
		}

var select_html = '<select onChange="handleSelected2(this)">' + "selclick(this)" +
                        '<option selected> - Select a bus route - <\/option>';
 
						
	  function showsel(category) {
        for (var v=0; v<pts.length-1; v++) {
		 if (pts[v].mycategory == category) {
            pts[v].show();
		  }
        }
   document.getElementById(category+"option").onclick = true;
      }
	  
      function hidesel(category) {
	  for (var v=0; v<pts.length-1; v++) {
		 if (pts[v].mycategory == category) {
            pts[v].hide();
		  }
        }
}
	  
	 function selclick(option,category) {
        if (option.onclick) {
          showsel(category);
        } else {
          hidesel(category);
        }
		}					
						
						 function handleSelected2(opt,category) {     
  for (var h = 0; h <gpolylines.length; h++) {
		  gpolylines[h].hide();
        }
        var h = opt.selectedIndex - 1; 
        if (h > -1) {
          gpolylines[h].show();
		  }
		  for (var v=0; v<pts.length; v++) {
		  
               selclick(category); 		
			   }
			   
}	

GDownloadUrl("allzonesencoded.xml", function(doc) {
        var xmlDoc = GXml.parse(doc);

var lines = xmlDoc.documentElement.getElementsByTagName("line");

for (var i=0; i< pts.length; i++) {
		var category = lines[a].getAttribute("category");
		}

// ===== final part of the select box =====
        select_html += '<\/select>' ;
        document.getElementById("selection2").innerHTML = select_html;

Hello. I am asking this question in the "javascript" forum as my"select box" does use javascript. (Maybe it is actually called a List menu)?

It is probably a simple question. If you look at the link to my example, you will see that my selectbox only displays the first line of the list (which says "select one").

For reasons, I will not be putting images or anything in the blue area, so wish there is a way to have like the first 20 or so selections visible, so I do not have just a big blue box sitting there.

I didn't know if there was a way to do this? I appreciate any advice.
Thank you. Buffmin My link is: http://test.cnjwebsolutions.com/

Hi,

i got a textbox with a submit button but when submit button is clicked it works but it reloads the page.

is possible to submit without reload the page?

thanks

Hi All,

have a script which already passes one varible from a php script to my js script but i am having trouble trying to pass another one.

here is my php code
PHP Code:
<?php
    include("config.php");
    $keyword = $_POST['data'];
    $sql = "select prodName from ".$db_table." where ".$db_column." like '".$keyword."%' limit 0,10";
    $result = mysql_query($sql) or die(mysql_error());
    if(mysql_num_rows($result))
    {
        echo '<ul class="list">';
        while($row = mysql_fetch_array($result))
        {
            $prodCat = $row['category'];
            $str = $row['prodName'];
            $start = strpos($str,$keyword); 
            $end   = similar_text($str,$keyword); 
            $last = substr($str,$end,strlen($str));
            $first = substr($str,$start,$end);
            $link = "";
            
            $final = '<span class="bold">'.$first.'</span>'.$last;
        
            echo '<li><a href="'.$link.'">'.$final.'</a></li>';
        }
        echo "</ul>";
    }
    else
        echo 0;
?>

and here is my original js code
Code:

$(document).ready(function(){$(document).click(function(){$("#ajax_response").fadeOut('slow');});$("#keyword").focus();var offset=$("#keyword").offset();var width=$("#keyword").width()-2;$("#ajax_response").css("left",offset.left);$("#ajax_response").css("width",width);$("#keyword").keyup(function(event){var keyword=$("#keyword").val();if(keyword.length)
{if(event.keyCode!=40&&event.keyCode!=38&&event.keyCode!=13)
{$("#loading").css("visibility","visible");$.ajax({type:"POST",url:"ajax_server.php",data:"data="+keyword,success:function(msg){if(msg!=0)
$("#ajax_response").fadeIn("slow").html(msg);else
{$("#ajax_response").fadeIn("slow");$("#ajax_response").html('<div style="text-align:left;">No Matches Found</div>');}
$("#loading").css("visibility","hidden");}});}
else
{switch(event.keyCode)
{case 40:{found=0;$("li").each(function(){if($(this).attr("class")=="selected")
found=1;});if(found==1)
{var sel=$("li[class='selected']");sel.next().addClass("selected");sel.removeClass("selected");}
else
$("li:first").addClass("selected");}
break;case 38:{found=0;$("li").each(function(){if($(this).attr("class")=="selected")
found=1;});if(found==1)
{var sel=$("li[class='selected']");sel.prev().addClass("selected");sel.removeClass("selected");}
else
$("li:last").addClass("selected");}
break;case 13:$("#ajax_response").fadeOut("slow");$("#keyword").val($("li[class='selected'] a").text());searchValue=document.getElementById('keyword').value;window.location="/dvd/"+searchValue+".php";break;}}}
else
$("#ajax_response").fadeOut("slow");});$("#ajax_response").mouseover(function(){$(this).find("li a:first-child").mouseover(function(){$(this).addClass("selected");});$(this).find("li a:first-child").mouseout(function(){$(this).removeClass("selected");});$(this).find("li a:first-child").click(function(){$("#keyword").val($(this).text());$("#ajax_response").fadeOut("slow");});});});

and i tryed to pass the $prodCat value by changing the above code and adding the code in red
Code:

$(document).ready(function(){$(document).click(function(){$("#ajax_response").fadeOut('slow');});$("#keyword").focus();var offset=$("#keyword").offset();var width=$("#keyword").width()-2;$("#ajax_response").css("left",offset.left);$("#ajax_response").css("width",width);$("#keyword").keyup(function(event){var keyword=$("#keyword").val(); var category=$("#prodCat").val(); if(keyword.length)
{if(event.keyCode!=40&&event.keyCode!=38&&event.keyCode!=13)
{$("#loading").css("visibility","visible");$.ajax({type:"POST",url:"ajax_server.php",data:"data="+keyword,success:function(msg){if(msg!=0)
$("#ajax_response").fadeIn("slow").html(msg);else
{$("#ajax_response").fadeIn("slow");$("#ajax_response").html('<div style="text-align:left;">No Matches Found</div>');}
$("#loading").css("visibility","hidden");}});}
else
{switch(event.keyCode)
{case 40:{found=0;$("li").each(function(){if($(this).attr("class")=="selected")
found=1;});if(found==1)
{var sel=$("li[class='selected']");sel.next().addClass("selected");sel.removeClass("selected");}
else
$("li:first").addClass("selected");}
break;case 38:{found=0;$("li").each(function(){if($(this).attr("class")=="selected")
found=1;});if(found==1)
{var sel=$("li[class='selected']");sel.prev().addClass("selected");sel.removeClass("selected");}
else
$("li:last").addClass("selected");}
break;case 13:$("#ajax_response").fadeOut("slow");$("#keyword").val($("li[class='selected'] a").text());searchValue=document.getElementById('keyword').value; searchCategory=document.getElementById('category').value; window.location=" /"+searchCategory+"/"+searchValue+".php ";break;}}}
else
$("#ajax_response").fadeOut("slow");});$("#ajax_response").mouseover(function(){$(this).find("li a:first-child").mouseover(function(){$(this).addClass("selected");});$(this).find("li a:first-child").mouseout(function(){$(this).removeClass("selected");});$(this).find("li a:first-child").click(function(){$("#keyword").val($(this).text());$("#ajax_response").fadeOut("slow");});});});

but this breaks the js code and it prevents it from running

any ideas what ive done wrong?
thanks
Luke

Here is my code


<script language="javascript" type="text/javascript">
function revealModal(divID)
{

window.onscroll = function () { document.getElementById(divID).style.top = document.body.scrollTop; };
document.getElementById(divID).style.display = "block";
document.getElementById(divID).style.top = document.body.scrollTop;

}

function hideModal(divID)
{
document.getElementById(divID).style.display = "none";
}
</script>


<div id="modalPage3">
<div class="modalBackground"></div>
<div class="modalContainer">
<div class="modal53">
<div class="modalTop"><a href="javascript:hideModal('modalPage3')">[X]</a></div>
<div class="modalBody">
<?php echo 'value='.$_SERVER['value'];


?>
<h3><center>Choose from the options below</center></h3>
<center><div id="stylized" class="myform">

<a href="javascript:hideModal('modalPage3');javascript:revealModal('modalPage1')" tabindex="2" title="Remove UPCAT Passer"><img src="images/photo_remove.png" /></a>&nbsp;&nbsp;
<a href="javascript:hideModal('modalPage3');javascript:revealModal('modalPage2')" tabindex="4" title="Edit UPCAT Passer"><img src="images/photo_edit.png" /></a>&nbsp;&nbsp;
<a href="javascript:hideModal('modalPage3');javascript:revealModal('modalPage4')" tabindex="4" title="Change Status of UPCAT Passer"><img src="images/photo_up.png" /></a>
</div></center>
</div>
</div>
</div>
</div>


<a href=javascript:revealModal('modalPage3');>
<img src=images/option.jpg /></a>

my problem is this one..how can I pass a value example value=3 to be like
href= index.php?value=3..PLEASE HELP!!!

Hi!!
I am trying to find out solution for this since long.
I tried js but as I am not good with it, I just want to do this through PHP.

I am adding dynamic rows when user clicks the Add Row button.I want to show the calculated amount like:
line_total=qty*unit_price;

PHP Code:
if (isset($_POST['qty']) && sizeof($_POST['qty']) > 0)  {

    for($i = 0, $maxi = count($_POST['qty']); $i < $maxi; $i++)  {

        $quantity    = (isset($_POST['qty'][$i]) && !empty($_POST['qty'][$i])) ? mysql_real_escape_string($_POST['qty'][$i]) : 0;

        $description = (isset($_POST['description'][$i]) && !empty($_POST['description'][$i])) ? mysql_real_escape_string($_POST['description'][$i]) : 0;

        $unit_price  = (isset($_POST['unit_price'][$i]) && !empty($_POST['unit_price'][$i])) ? mysql_real_escape_string($_POST['unit_price'][$i]) : 0;

        $line_total  = (isset($_POST['line_total'][$i]) && !empty($_POST['line_total'][$i])) ? mysql_real_escape_string($_POST['line_total'][$i]) : 0;

        ?>

        <?php   $myvar=$quantity*$unit_price;   ?>



    <script type="text/javascript">

        jsvar = <?php echo $myvar; ?>;

        document.write(jsvar);  // Test to see if its prints array:

                    </script>

    }        

}

This code works very well and displays the values.But if I use it in the function like;

PHP Code:
function line(elem) {

jsvar = <?php echo $myvar; ?>;



document.getElementById("line_total").value = jsvar;

        }

And call it:

PHP Code:
<input type="text" name="line_total[]" id="line_total" onBlur="return line(this)"> 


It is not showing the result. Kindly guide me where I am going wrong?
This is my function to add rows:

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



function addRow(tableID) 



{



            var table = document.getElementById(tableID);



            var rowCount = table.rows.length;



            if(rowCount<3)



                {



                var row = table.insertRow(rowCount);



                var colCount = table.rows[0].cells.length;



                for(var i=0; i<colCount; i++)



                          {



                        var newcell = row.insertCell(i);



                        newcell.innerHTML = table.rows[0].cells[i].innerHTML;



                        //alert(newcell.childNodes);



                            switch(newcell.childNodes[0].type) 



                            {



                            case "text":



                                newcell.childNodes[0].value = "";



                            break;



                            case "checkbox":



                                newcell.childNodes[0].checked = false;



                            break;



                            case "select-one":



                                newcell.childNodes[0].selectedIndex = 0;



                            break;



                            }



                        }



                }







        else 



        {



        alert("Maximum Limit Of 3 Rows Reached");



        }



}
</script> 


Please help me

hi


in javascript section there is a variable namesd first is available. i want to pass the value of this variable in a php variable.

how can i do this..

Is it possible to pass the id onChange like in this example instead of the value

This is part of a large complex script, and I need the id as seperate function

Code:

<select name='color' onChange='this.form.F1.value=this.form.color.id' >
<option value='Green' id='c1'>Green
<option value='Red'   id='c2'>Red
<option value='Blue'  id='c3'>Blue
</select>

<input type="text" name="F1" size="15" value="" onChange="this.value=this.form.color.id">