JavaScript - Variable Determined By Selection In Drop Down Box

Hi there,
I need help in form validation! I want this to be validated upon selection of the drop down list (not when it comes to submit button)

I have 2 drop down lists:
Starting date (June 5th, 6th 7th)
Ending date (June 5th, 6th 7th)

I want to write a script that would NOT ALLOW one to choose:
- Starting date June 6th and Ending date June 5th
- Starting date June 7th and Ending date June 6th
- Starting date June 7th and Ending date June 5th

I appreciate your help

Hi coders,

I need to achieve two things upon making a selection from a drop down field:

1) Changing the background picture of a cell.
2) Changing the size of a uploaded foreground picture within the same cell.


Code:

<select name=ADDITIONALINFO> 
<option value="25 x 25">25 x 25</option> 
<option value="35 x 35">35 x 35</option> 
<option value="45 x 45">45 x 45</option> 
<option value="55 x 55">55 x 55</option> 
</select>

Any guidance how to achieve this is appreciated.

I have been to this forum many times as a lurker and I have picked up some good information. For this I give Thanks wholeheartedly.

My situation: I enter information in a system based on the # of a report that comes in. So if I see a report that says "333" i want to enter specific information for "333" same with "444" and "555" and so on and so forth.

So I want to have a drop down menu for 111, 222, 333, 444 etc...


Basically what I need is, if I select the report # from the drop down menu, I want it to copy information from a HIDDEN textbox to the clipboard. That's it!

I've been trying to figure it out, but to no avail. Sorry I am fake coder

Ok I am very very new to java to the point where I only know how to use pre-made javascripts in my php code so be gentle.

First, here is part of a form I have:

Code:

<select name = "pulmonologist" >
<option selected="" value="">---Select---
<option value="none">None</option>
<?php		
while ($row2 = mysql_fetch_assoc ($results2)) {   
        ?><option value = "<?php echo $row2['staff_name'];?>"><?php echo $row2['staff_name'];?></option>
<?php }
?>
</select>

Ok now I want to echo the value that the user selects on the SAME page (i.e. before the submit button is pressed) (so I can't do it with php, I need javascript) like this:

Code:

<input type="submit" value = "Contact <?php echo $pulmonologist;?>" />

Can you tell me how to do this? Thanks!

Codes for Dropdown menu based on radio buttons selection needed!?

I need urgent help with this:

I need codes for a dropdown menu that is altered by radio buttons.

I want to insert the value selected from the dropdown menu into a table.

Hi all,

I have been struggling on a bit of code for a while now. I need to populate a second drop down list (Region) based upon the selection of the first (County).
I have found a piece of code that works on its own and have adapted to suit my needs - see below. However, when I drop it into my main page the javascript is not working. It's because of the formObject but I just don't know enough to resolve this! Furthermore, I need the textboxes the user has already completed in the form to retain their value once the javascript kicks in as the completed form will submit to a database.

This piece of code is working well . . . .
Code:

<?php

$link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error());
mysql_select_db('mydatabase') or die('Could not select database');

if(isset($_GET["County"]) && is_numeric($_GET["County"]))
{
$County = $_GET["County"];
}

if(isset($_GET["Region"]) && is_numeric($_GET["Region"]))
{
$Region = $_GET["Region"];
}

?>

<script language="JavaScript">

function autoSubmit()
{
var formObject = document.forms['theForm'];
formObject.submit();
}

</script>

<form name="theForm" method="get">

<!-- County SELECTION BASED ON city VALUE -->

<?php

?>

<select name="County" onChange="autoSubmit();">
<option value=''</option>

<?php

//POPULATE DROP DOWN MENU WITH COUNTRIES FROM A GIVEN city

$sql = "SELECT * FROM county_regions";
$counties = mysql_query($sql,$link);

while($row = mysql_fetch_array($counties))
{
echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>");
}

?>

</select>

<?php

?>

<br><br>

<?php

if($County!= null && is_numeric($County))
{

?>

<select name="Region" onChange="autoSubmit();">


<?php

//POPULATE DROP DOWN MENU WITH RegionS FROM A GIVEN city, County

$sql = "SELECT * FROM county_regions WHERE CountyID = $County ";
$Regions = mysql_query($sql,$link);

while($row = mysql_fetch_array($Regions))
{
echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>");
}

?>

</select>

<?php

}

?>

What follows is my form where the javascript is not working - edited quite a bit to save on space!

Code:

<head>
 
<script language="JavaScript">

function autoSubmit()
{
var formObject = document.forms['subform'];
formObject.submit(); 
}

</script>

</head>

<form enctype="multipart/form-data" method="post" action="add_attraction01.php" FORM NAME="FormName">     
<input type="hidden" name="MAX_FILE_SIZE" value="32768" />    
<label for="Business_name">Business Name</label>    
<input type="text" size="60" STYLE="color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; background-color: #72A4D2;"     
<id="Business_name" name="Business_name" maxlength=60/><font size="1" face="arial" color="red">Required field</font><br />    
<label for="StreetAddress">Address</label>    
<input type="text" size="60" rows="2" id="StreetAddress" name="StreetAddress" maxlength=120/><font size="1" face="arial" color="red">Required field</font><br />    
<label for="Town">Town</label>    <input type="text" size="25" id="Town" name="Town" maxlength=25/><font size="1" face="arial" color="red">Required field</font><br /> 

<?php

$link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error());
mysql_select_db('mydatabase') or die('Could not select database');

if(isset($_GET["County"]) && is_numeric($_GET["County"]))
{
$County = $_GET["County"];
}

if(isset($_GET["Region"]) && is_numeric($_GET["Region"]))
{
$Region = $_GET["Region"];
}

?>

<form name = "subform" method="get"> 

<select name="County" onChange="autoSubmit();"> 
<option value=''</option>

<?php

$sql = "SELECT * FROM county_regions";
$counties = mysql_query($sql,$link);

while($row = mysql_fetch_array($counties))
{
echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>");
}

?>

</select>

<?php

?>

<br><br>

<?php

if($County!= null && is_numeric($County))
{

?>

<select name="Region" onChange="autoSubmit();">


<?php

$sql = "SELECT * FROM county_regions WHERE CountyID = $County ";
$Regions = mysql_query($sql,$link);

while($row = mysql_fetch_array($Regions))
{
echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>");
}

?>

</select>

<?php

}

?>
<input type="text" size="20"id="Tel_No" name="Tel_No" maxlength=20 onkeypress="return isNumberKey(event)"/><font size="1" face="arial" color="red">Required field</font><br />    
<br/>    
<input type="submit" value="Submit your attraction" name="submit" onclick="return BothFieldsIdenticalCaseSensitive();"/>   
</form>
</body>
</html>

It's probably obvious to you guys!!

Thanks in advance for your help.

I have a page with multiple drop down menus for selecting a State then City, then Zip. The State and City both work fine but I can't seem to make the Zip function properly.

Page with drop downs:
Code:

var xmlhttp;
function showCity(state)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="get_cities.php";
url=url+"?q="+state;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
var s=state;
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}


var xmlhttp;

function showZip(city)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="get_zips.php";
url=url+"?z="+city;
url=url+"&q="+s;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged1;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged1()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtZip").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}
<!--**********
state drop down
*********-->
<? $State = mysql_query("SELECT DISTINCT full_state FROM zip_codes ORDER by full_state",$db_link); ?>
<select name="state" CLASS="formTextbox" size="1"  onChange="showCity(this.value)">
<? while($get = mysql_fetch_array($State)) { ?>
<option value="<?=$get['full_state'];?>"><?=$get['full_state'];?></option><? } ?>
</select>

get_cities.php:
Code:

<?php
$q=$_GET["q"];
include('include/db_con.php');
?>
<? $City = mysql_query("SELECT DISTINCT city FROM zip_codes WHERE full_state = '$q' ORDER BY city",$db_link); ?>
<select name="city" CLASS="formTextbox" size="1" onChange="showZip(this.value)">
<? while($get = mysql_fetch_array($City)) { ?>
<option value="<?=$get['city'];?>"><?=$get['city'];?></option><? } ?>
</select>

get_zips.php:
Code:

<?php
$z=$_GET["z"];
$q=$_GET["q"];
include('include/db_con.php');
?>
<? $Zip = mysql_query("SELECT DISTINCT zip FROM zip_codes WHERE city = '$z' AND full_state = '$q' ORDER by zip",$db_link); ?>
<select name="zip" CLASS="formTextbox" size="1">
<? while($get = mysql_fetch_array($Zip)) { ?>
<option value="<?=$get['zip'];?>"><?=$get['zip'];?></option><? } ?>
</select>

I have my page set to only show the drop down's when there is a value to select. The Zip drop down shows up at the correct time but is empty.

I've tried searching the forum but since I'm still learning js I wasn't able to make use of any on the other multiple drop down examples I came accross.

Thanks for any advice you can offer.

I have been searching for a long time but have been unsuccessful on how to develop a drop down menu but have the menu items show in a list above the main nav. Not below. I really like the way this functions:

http://www.sohtanaka.com/web-design/examples/toggle/

But I would like the item in the list to appear above the main nav so it animates up not down. Can anyone help me on how to alter this js code to perform this task?

Here is the jQuery file link:

http://code.jquery.com/jquery-latest.js

I tried going through this js file but it very complex. Can anyone tell me what I need to change to have the animation roll up instead of down? Any help would be most appreciated.

Hello all,

I usually try and solve my problems by reading all post but i i'm having problem trying to find a solution my problem.

I have a simple form in html which presents to the user 2 checkbox's named cash or cheque depending on which answer he gives will present to him 2 different textbox.

My problem is i only want the user to be able to select one of the two checkboxes and also i would like the resulting checkbox selected to be placed on the same row.

Hope this makes sense!!!

I'm only a beginner in javascript and i've found some of the following code on the net but i don't know how to ammend it so that it does what i need it to do.

Here is the code:
Code:

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script>
<!--
function c(){}
function getresultPay(){
if(document["schDetails"]["chkCash"].checked){
document.getElementById("shwCash").style.visibility="visible"
}
else{
document.getElementById("shwCash").style.visibility="hidden"
}
}

function d(){}
function getresultChex(){
if(document["schDetails"]["chkcheque"].checked){
document.getElementById("shwcheque").style.visibility="visible"
}
else{
document.getElementById("shwcheque").style.visibility="hidden"
}
}

//-->
</script>
</HEAD>
<BODY>

<FORM NAME="schDetails">
	<table border="1" width="457">
	<tr>
		<td width="447" align="left" colspan="5" height="12"></td>
	</tr>
	<tr>
		<td width="187" align="left" height="22">Amount to Pay</td>
		<td width="26" align="center" height="22">:</td>
		<td width="221" height="22" colspan="3">
		<input type = text name ="txtPurCode" tabindex= 25 size="20"></td>
	</tr>
	
	<tr>
		<td width="187" align="left" height="20">How would you like to pay</td>
		<td width="26" height="20" align="center"><input type="checkbox" name="chkCash" value="ON" onclick = "c() ; getresultPay()"></td></td>
		<td width="66" height="20" align="center">Cash</td>
		<td width="35" height="20" align="center"><input type="checkbox" name="chkcheque" value="ON" onclick = "d() ; getresultChex()"></td></td>
		<td width="108" height="20" align="center">Cheque</td>
	</tr>

	<tr id="shwCash" style="visibility:hidden">
		<td width="187">Cash to Pay</td>
		<td width="26" align="center" height="22">:</td>
		<td width="221" colspan="3">
		<input type = text name ='txtGRTNo' tabindex = 19 size="20"></td>
	</tr>
	<tr id="shwcheque" style="visibility:hidden">
		<td width="187">Cheque to Pay</td>
		<td width="26" align="center" height="22">:</td>
		<td width="221" colspan="3">
		<input type = text name ='txtGRTNo' tabindex = 19 size="20"></td>
	</tr>
	<tr>
		<td width="447" align="left" colspan="5" height="12"></td>
	</tr>
</table>
</FORM>
</BODY>
</HTML>

I would really appricate if someone could solve this for me.

Regards

i have a selection menu here. what i would like to do is that when i select "not copy" it will not show and not copy the contents of "todo" textfield. but when i select any of the "copy text" it will show and copy the contents of the "todo" text. help plsssssssssssssssssss


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>

<body>
<form id="form" name="form" method="post" action="">
<p>Phone Number:
<input type="text" name="Name" />
</p>
<p>Location:
<select name="selector" >
<option>copy text</option>
<option>not copy text</option>
<option>copy text</option>
<option>copy text</option>
</select>
</p>
<p>To Do Today:
<input type="text" name="todo" />
</p>
<p>
<input type="button" value="Copy" />
</p>
</form>
</body>
</html>

Does anyone know anything about selecting text in an editable iframe? The following code kind of works in FireFox (it's a little buggy), but doesn't work at all in anything else.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
<head>
    <title>ADVANCED EDITOR TEST PAGE</title>
    <script type="text/javascript">
        function framego(){
            document.getElementById("frame").contentDocument.designMode = "On";
            document.getElementById("frame").contentWindow.document.body.innerHTML = "TEST [here] ING";
        }
        function selectArea(){
        	o=document.getElementById('frame');
            
        	if(o.contentWindow.getSelection) sel = o.contentWindow.getSelection(); //FF
            else sel = o.contentDocument.selection.createRange(); //IE

        	range2=sel.getRangeAt(0);

        	var range = document.createRange();
        	range.setStart(sel.anchorNode,5);
        	range.setEnd(sel.anchorNode,11);

        	//remove the old range and add the newly created range
        	sel.removeRange(range2);
        	sel.addRange(range);
            
            o.focus();
        }
    </script>
</head>
<body onload="framego()">
    <iframe id="frame"></iframe>
    <button onclick="selectArea()">TEST</button>
</body>
    </html>

It's supposed to select the word "Here" in the iframe.

A million thanks to anyone who can point me in the right direction on this one. :-)

Hello,

Is there anyway to prevent images, words, divisions, etc from being selected? Also if something is selected is there a way to deselect?

Thanks!

ok i have to selection boxes and they need to read each other and input either a yes or a no into a text form i would really appreciate some help thanks

heres what i have if it helps

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>Galvanic Corrosion Chart</title>
</head>
<body>
<br />
<form name="gcc">
<div align="center"><a href="website.html"><img
style="border: 0px solid ; width: 278px; height: 50px;" alt=""
src="pics/LOGO.png" border="0" height="50" width="278" /></a><br />
</div>
<p style="text-align: center;" align="center"><font size="+2"><span
style="font-family: Century Gothic;"><font
style="text-decoration: underline;" size="+3">
<font face="Futura Bk BT">Galvanic Corrosion Chart<span
style="text-decoration: underline;"><span
style="text-decoration: underline;"><span
style="text-decoration: underline;"><span
style="text-decoration: underline;"><span
style="text-decoration: underline;" /></span></span></span></span></font></font></span></font><font
face="Futura Bk BT"><br />
</font>
</p>
<br />
<table
style="text-align: left; margin-left: auto; margin-right: auto;"
height="119" width="610">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"
align="center" valign="middle"><font face="Futura Bk BT"><font
size="+1">&nbsp;<font size="+1"> Material 1</font></font><br />
<select name="mat1">
<option>Zinc Plating</option>
<option>Zinc Die Casting</option>
<option>Galvanize</option>
<option>Tin-Zinc</option>
<option>Cadmium-Zinc Solder</option>
<option>Aluminum(Clad.1100.3003.5052.6160)</option>
<option>Cadmium Plate</option>
<option>Aluminum Castings</option>
<option>Carbon &amp; Alloy Steel, Cast Iron</option>
<option>Aluminum(2024.2017.7075)</option>
<option>Lead</option>
<option>Lead-Silver Solder</option>
<option>Tin-Lead Solder</option>
<option>Tin Plating</option>
<option>Chromium Plate</option>
<option>Stainless 18/2</option>
<option>Copper &amp; Alloys</option>
<option>Stainless 18/8</option>
<option>Silver Solder</option>
<option>Monel</option>
<option>Nickel Plate</option>
<option>Titanium</option>
<option>Silver Plate</option>
</select>
<br />
</font></td>
<td colspan="1" rowspan="1"
style="vertical-align: top; text-align: center;" valign="middle"><font
face="Futura Bk BT"><font size="+1"> Material 2</font><br />
</font>
<select name="mat2">
<option>Zinc Plating</option>
<option>Zinc Die Casting</option>
<option>Galvanize</option>
<option>Tin-Zinc</option>
<option>Cadmium-Zinc Solder</option>
<option>Aluminum(Clad.1100.3003.5052.6160)</option>
<option>Cadmium Plate</option>
<option>Aluminum Castings</option>
<option>Carbon &amp; Alloy Steel, Cast Iron</option>
<option>Aluminum(2024.2017.7075)</option>
<option>Lead</option>
<option>Lead-Silver Solder</option>
<option>Tin-Lead Solder</option>
<option>Tin Plating</option>
<option>Chromium Plate</option>
<option>Stainless 18/2</option>
<option>Copper &amp; Alloys</option>
<option>Stainless 18/8</option>
<option>Silver Solder</option>
<option>Monel</option>
<option>Nickel Plate</option>
<option>Titanium</option>
<option>Silver Plate</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" rowspan="1" align="center" valign="top"><font
face="Futura Bk BT" size="+1">Acceptable</font><br />
<font face="Futura Bk BT"><input name="AR" readonly="readonly" /></font></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

Hello everyone!

So, what it does: You can successfully drag something anywhere, but when you click it again, it resets to its original position (I don't know why), and when you try to drag it again, as soon as your cursor touches the object it disappears (I don't know why). I'm hoping someone can tell me why it is happening and how to fix it!

Code:

// JavaScript Document

var posX;
var posY;
var element;

function drag(event) {
	element = document.getElementById("square");
	posX = event.clientX;
	posY = event.clientY;
	element.addEventListener("mousemove", move, false);
}

function move(event) {
	
	if (typeof(document.getElementById("square").mouseup) == "undefined")
		element.addEventListener("mouseup", drop, false);
	//Prevents redundantly adding the same event handler repeatedly
	
	element.style.left = event.clientX - posX + "px";
	element.style.top = event.clientY - posY + "px";
}

function drop() {
	element.removeEventListener("mousemove", move, false);
	element.removeEventListener("mouseup", drop, false);
}

the html is a simple (position is set to relative):

<p id="square" onmousedown="drag(event)">meep</p>

Lastly, and most importantly, thank you all for your time =]

EDIT: This is the first time I've written javascript code and would like to learn the basics, which is why I am not using a library.

Hi,

I have a programing problem that have been around for ages. I have search on google using several expressions and words and after hours of digging i'm still unable to do it.

I would like to get a value from a HTML page hosted remotely with an inconstant value. Then define this value and name as a javascript variable and apply or show in my page.

Thanks for all the help

P.S. Is there any way to make a domain lookup in javascript? I mean a user enters a domain and the script converts to an ip and shows to the user. If not thanks, probably it can only be done in the server side...