JavaScript - Manipulating Text Field Versus A Button

Hi,

I'm hoping this will be an easy one for you experts out there.

I am working on a convention registration form.

What I'm trying to do is have the text "50.00" pop into the COST field when any text (even if it's only one character) is entered into the NAME field.

If the text in the NAME field is deleted, the "50.00" should also be deleted.

Does anyone have a script that does this?

Thanks!

go he

http://qodeplay.com/javascript



help me accomplish this and send this data to a mysql column!



note: the field will not grey out in ie.

Hi, I have an admin page in which I enter information for a Math Education website. I have to pre-load 10 video fields just in case a lesson has 10 videos. This is an over simplification:

--------------------------------------------
Subject: ____________
Chapter: ____________
Lesson: _____________
--------------------------------------------
Video 1
Video Title: __________
Video Desc:__________
--------------------------------------------
Video 2
Video Title: __________
Video Desc:__________
--------------------------------------------
.
.
.
--------------------------------------------
Video 10
Video Title: __________
Video Desc:__________
--------------------------------------------


What I would like to do is load 1 single video field and then have a button that when it is clicked automatically creates another field. Any ideas? I'm sure this is possible but everything I know I've learned from searching the internet and reading a few simple books so my knowledge is fragmented.

THANKS!

Hello

Having problems with the following...a client needs me to replicate this contact page:

http://www.ravenrow.org/contact/

In particular he wants the subscribe/unsubscribe to appear only when one enters text into the text field (as it does here).

I have recently changed from using tables to div tags but this was the first website where I started to experiment with divs. Unfortunately therefore it is a mixture of tables and divs. But here is my page:

http://www.rowingpresents.com/contact.html

Can someone tell me what I need in my code to have to subscribe/unsubscribe appear and disappear as it does at ravenrow.org.

Many thanks

S

I'm only validating one (Consent) radio button with this code but i need to validate multiple different questions/buttons.

Code:

<script>

function getRBtnName(GrpName) {
  var sel = document.getElementsByName(GrpName);
  var fnd = -1;
  var str = '';
  for (var i=0; i<sel.length; i++) {
    if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
  }
  return fnd;  
} 

function checkForm() {
 var chosen = getRBtnName('Consent');
 if (chosen < 0) {
  alert( "Please choose one answer when you are asked to select a number." );
  return false;
 } else { return true; }
}

</script>


<form action="congratulations_aff.php" method="post" name="congratulations_aff" onSubmit="return checkForm()">
	
<table border="0" cellspacing="1" cellpadding="0">
 
  <tr>
    <td colspan="3">I consent to providing my electronic signature.</p></td>
  </tr>
  <tr>
    <td colspan="3" valign="top">
      <input type="radio" name="Consent" value="Y" />
      Yes
      
      <input type="radio" name="Consent" value="N" />
      No
   
      <table border="0" cellspacing="1" cellpadding="0">
                <tr>
          <td>I consent to electronic receipt of my information reporting documentation.</td>
        </tr>
        <tr>
          <td valign="top">
            <input type="radio" name="Consent1099YesNo" value="Y" />
            Yes
            
            <input type="radio" name="Consent1099YesNo" value="N" />
            No</td>
        </tr>
        <tr>
     <td valign="top">
      For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation?
        <input type="radio" name="USPersonYesNo" value="Y" />
        Yes
        
        <input type="radio" name="USPersonYesNo" value="N" />
        No</tr>
      </table>
       
           
 <input type="submit" value="submit" value="Submit" /> 
</form>

Any help would be greatly appreciated.

I thought this would have been fairly simple but it appears the onchange event isn't triggered when a hidden field is populated by other javascript without user input.

I have a simple search box and autocomplete/suggestion ajax thingie going on.

What I want to do is have my "Go" submit button disbled until AFTER a user has populated the hidden field "cid". A user populates this field automatically when they click on a suggested option from the ajax autocomplete doofer.

Here's what I've tried at the moment but failed on.

Code:

<form action="index.php" method="GET" name="qsform" id="qsform">
<input type="hidden" name="p" id="p" value="compdetails" style="border:1px solid #000000;" />
<input type="text" name="quicksearch" id="quicksearch" value="Find Company" style="border:1px solid #000000;" onFocus="clearText(this)" onBlur="clearText(this)" />
<input type="hidden" name="cid" id="cid" value="" style="border:1px solid #000000;" />&nbsp;
<input type="submit" name="go" id="go" value="Go" disabled="true" onmouseover="if (document.qsform.cid.value!='') { document.qsform.go.disabled=false; }" />
</form>

OK first of all I will post some screenshots of the 'website' I have created so far and explain what is working and what is not working. Then I will post my code and ask for help.

Below is the main screen before any action happens. The three boxes are DIV elements. The writing and dropdown menu in the first box is generated by Javascript code.



Whenever a user selects an option from the dropdown menu. Information about the movie and a picture of the cover are displayed. The movie title, picture filename and movie description are all stored in three separate arrays.



Now for the problem. I have created a fourth array "customerList" and left it empty. Whenever a customer clicks the reserve button it calls a function "myReserve()". This function takes the selection from the dropdown menu, then uses the push function to add the selection to the blank array. I then use the code "arrayLength = customerList.length" to get the length of the customer list. A for loop is used to cycle through the array and display the contents of the array. The problem is it only displays one selection. When reserve is clicked again the newest selection is displayed. Why will it not push the next item into the array?


Javascript code, just skip through the 3 arrays at the top... the problem function is at the bottom.
Code:

var movieTitles = new Array(8)
movieTitles[0] = "The Prestige [2006]"
movieTitles[1] = "The Lives of Others [2007]"
movieTitles[2] = "The Bourne Ultimatum [2007]"
movieTitles[3] = "Spider-Man 3 [2007]"
movieTitles[4] = "Casino Royale [2006]"
movieTitles[5] = "The Illusionist [2006]"
movieTitles[6] = "Sunshine [2007]"
movieTitles[7] = "Zodiac [2007]"
movieTitles[8] = "Quantum of Solace [2008]"

var movieCovers = new Array(8)
movieCovers[0] = "prestige.jpg"
movieCovers[1] = "lives_of_others.jpg"
movieCovers[2] = "bourne3.jpg"
movieCovers[3] = "spiderman3.jpg"
movieCovers[4] = "casinoroyal.jpg"
movieCovers[5] = "illusionist.jpg"
movieCovers[6] = "sunshine.jpg"
movieCovers[7] = "zodiac.jpg"
movieCovers[8] = "quantum_of_solace.jpg"

var movieDescriptions = new Array(8)
movieDescriptions[0] = "Two Victorian-era magicians develop a rivalry that builds into an escalating battle of tricks."
movieDescriptions[1] = "Five years before its downfall, the former East-German government ensured its claim to power with a ruthless system of control and surveillance."
movieDescriptions[2] = "Legendary assassin Jason Bourne uncovers mysteries of his past, which puts him in the cross-hairs of a superkiller."
movieDescriptions[3] = "When Peter Parker's suit suddenly turns black it brings out the dark, vengeful side of his personality." 
movieDescriptions[4] = "The story examines James Bond's first mission after getting his licence to kill."
movieDescriptions[5] = "Eisenheim is a stage magician who amazes the audiences of turn-of-the-century Vienna, drawing the attention of Crown Prince Leopold." 
movieDescriptions[6] = "Fifty years from now, the sun is dying, and mankind is dying with it. Our last hope: a spaceship carrying a device which will breathe new life into the star."
movieDescriptions[7] = "A serial killer terrifies the San Francisco Bay Area and taunts police with his ciphers and letters."
movieDescriptions[8] = "Seeking revenge for the death of his love, secret agent James Bond sets out to stop an environmentalist from taking control of a country's water supply."

var customerList = new Array()

function getMovieTitle()
{
    
var str = "<p>Available movies are contained in the list below.<br />Select a movie title to read more details.<br />If you want to add the movie to your list click the reserve option.<br /></p>"
    str = str + "<form action='P4_1.html' method='post'><select onChange = 'displayMovie()' name='title' id = 'droplist'><option>Choose a movie</option>"
    mylength = movieTitles.length
    
    //loop for each movie title in the movieTitles array
    for (var i=0; i<mylength; i++)
    {
        str = str + "<option>" + movieTitles[i] + "</option>"
      
      
    }
    
    str = str+"</select></form>"
   
    
    //place content into dropdown menu
    document.getElementById("dropdown").innerHTML = str
    
}


function displayMovie()

{
  var i
  i = document.getElementById('droplist').selectedIndex - 1
  
  
  var m =  movieTitles[i]
  m = m + "<p><br><img src='"+movieCovers[i]+"'></p>"
  m = m + movieDescriptions[i]
  m = m + "<p> <a href='Javascript:myReserve()'><span id = 'res'> Reserve </span></a></p>"
  document.getElementById("Movie_Info").innerHTML = m    
}


function myReserve()
{

var i
  i = document.getElementById('droplist').selectedIndex - 1

  customerList.push(movieTitles[i])
  
  arrayLength = customerList.length

   for (var j=0; j<arrayLength; j++)
{
 
  str = customerList[j]
}

  document.getElementById("Movie_List").innerHTML = str

}

HTML code, incase you want to create my files yourself to troubleshoot for me but all the problems occur in the myReserve function just above. Everything else works fine.

Code:

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<title>P4_1</title>

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

<link rel="stylesheet" type="text/css" media="screen" href="P4.css" />

<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:ContentType msdt:dt="string">Document</mso:ContentType>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>

<body onload="javascript:getMovieTitle()">


<img src="logo.jpg">

<div id="dropdown" class="box1">
</div>

<div id="Movie_Info" class="box2">
<p>Movie info will go here</p>
</div>

<div id="Movie_List" class="box3">
<p>Your movie list will go here</p>
</div>

</body>
</html>

Hello,

Here is my situation. I have a java array generated from a JSP on the server side, and saved in the session. This array consists of objects (of say class X).

How can I load this array into a javascript array so I can search for a this array based on attributes of the object?


Thanks

Hello,

I came across a very odd browser behavior when trying to modify a css class using javascript and at the same time having a base html statement in my html file.

Without the base html statement, all browsers work fine and I can change the css class definition using javascript easily.
With a base html statement, only FireFox still works while Internet Explorer and Google Chrome dont work anymore. If there is a cross-domain issue, while one browser does work and the others dont?

An example of what I'm talking about, with the base statement:
http://freebsdcluster.org/~casaschi/...mple-base.html
Without the base statement:
http://freebsdcluster.org/~casaschi/...le-nobase.html

Any idea how to tweak the code in the case with the base html statement in order for the javascript to work with all browser (modifying the class definition) ???

Keep in mind, I dont want a suggestion of another way to change the color, this is only an example. I want to be able to manipulare css classes with javascript when a base html statement is in my html code.

This is essentially the code:

Code:

<!--
-->
<base href='http://www.google.com'>

<style id='myStyle' type='text/css'>

.myStyle {
  color: red;
}

</style>

<script type="text/javascript">

var lastColor = 'red';
function toggleColor() {
  lastColor = lastColor == 'red' ? 'green' : 'red';
  myObject = document.getElementById('myStyle');
  if (myObject.sheet) { myObject.sheet.cssRules[0].style.color = lastColor; } // Mozilla style
  if (myObject.styleSheet) { myObject.styleSheet.rules[0].style.color = lastColor; } // IE style
}

</script>

<a href="javascript: toggleColor();"><span class=myStyle>click here to toggle color</span></a>

Thanks in advance...

Ok, here is my issue. I want to have an input text on the top of the page that when I type in a series of numbers and hit submit, it populates the rest of the form. Does anyone have any idea what I need to perform this action?

I have a page with 6 dependant drop down boxes. I also have a text field with a copy to clipboard button.

What I need it to do is send the drop down selections to the text field to be copied along with some static text. The resulting text field would look something like this after the selections are made.

"Per Wizard: Choice 0: Selection 2, Choice 1: Selection 2, Choice 2: Selection 4 ..."

Can this be done on each line as a second onChange event?

Code:

<html>

<head>
<HEAD>

<script type="text/javascript">
<!--
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();

arrItems1[1] = "Selection 1";
arrItemsGrp1[1] = 1;
arrItems1[2] = "Selection 2";
arrItemsGrp1[2] = 1;
arrItems1[3] = "Selection 3";
arrItemsGrp1[3] = 1;

var arrItems2 = new Array();
var arrItemsGrp2 = new Array();

arrItems2[12] = "Selection 1";
arrItemsGrp2[12] = 1
arrItems2[13] = "Selection 2";
arrItemsGrp2[13] = 1
arrItems2[14] = "Selection 3";
arrItemsGrp2[14] = 1
arrItems2[15] = "Selection 4";
arrItemsGrp2[15] = 1
arrItems2[16] = "Selection 5";
arrItemsGrp2[16] = 1
arrItems2[17] = "Selection 6";
arrItemsGrp2[17] = 1

var arrItems3 = new Array();
var arrItemsGrp3 = new Array();

arrItems3[42] = "Selection 1";
arrItemsGrp3[42] = 12
arrItems3[43] = "Selection 2";
arrItemsGrp3[43] = 12
arrItems3[44] = "Selection 3";
arrItemsGrp3[44] = 12

var arrItems4 = new Array();
var arrItemsGrp4 = new Array();

arrItems4[133] = "Selection 1";
arrItemsGrp4[133] = 42

var arrItems5 = new Array();
var arrItemsGrp5 = new Array();

arrItems5[244] = "Selection 1";
arrItemsGrp5[244] = 133
arrItems5[245] = "Selection 2";
arrItemsGrp5[245] = 133

function selectChange(control,nu){
var frm=control.form;
var sel=frm['Choice'+nu];
var iary=window['arrItems'+nu];
var gary=window['arrItemsGrp'+nu];
var cnt=1;
while (frm['Choice'+cnt]){
if (cnt>=nu){
while (frm['Choice'+cnt].firstChild){
frm['Choice'+cnt].removeChild(frm['Choice'+cnt].firstChild);
}
}
cnt++;
}
var myEle=document.createElement("option");
myEle.appendChild(document.createTextNode("[SELECT ONE]"));
myEle.setAttribute("value","0");
sel.appendChild(myEle);
for (var x = 0 ; x < iary.length ; x++ ) {
if ( gary[x]==control.value ) {
myEle = document.createElement("option");
myEle.setAttribute("value",x);
myEle.appendChild(document.createTextNode(iary[x]));
sel.appendChild(myEle);
}
}
}
// -->
</script>
<script language='Javascript'>
function doact(d)
{
var doc = eval("document.form."+d);
cp = doc.createTextRange();
doc.focus();
doc.select();
cp.execCommand("Copy");
}

function FP_popUpMsg(msg) {//v1.0
alert(msg);
}
</script>
</HEAD>

<BODY>

<form name=form>
<div align="center">
<table border="2" width="790" id="table1" bordercolor="#64367C">
<tr>
<td width="778" align="left" colspan="2">
&nbsp;</td>
<tr>
<td width="305" align="left">
<font size="2" face="MS Sans Serif">&nbsp;Choice 1:<font size="2" face="MS Sans Serif">
<select id="Choice0" name="Choice0" onchange="selectChange(this, 1);">
<option value="0" selected>[SELECT]</option>
<option value="1">Selection 1</option>
<option value="2">Selection 2</option>
<option value="3">Selection 3</option>
</select></font></font></td>
<td width="225" align="center" onclick="FP_popUpMsg('More Info')">
<font face="MS Sans Serif" size="2" color="#FF0000">*</font><font face="MS Sans Serif" size="2" color="#0000FF">
<u>
Tell me more</u></font></td>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif">&nbsp;&nbsp;&nbsp; Code 2: 
<select id="secondChoice" name="Choice1" onchange="selectChange(this, 2); "></select></font></td>
<td width="225" align="center" rowspan="4">
<TEXTAREA name="text1" cols="25" rows="5">
Selections will populate here.
</TEXTAREA><input onclick="doact('text1')" type="button" value="Copy">
</td>
</tr>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif">&nbsp;&nbsp;&nbsp; Code 3: 
<select id="thirdChoice" name="Choice2" onchange="selectChange(this, 3);"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif">&nbsp;&nbsp;&nbsp; Code 4: 
<select id="fourthChoice" name="Choice3" onchange="selectChange(this, 4);"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<font face="MS Sans Serif" size="2">&nbsp;&nbsp;&nbsp;&nbsp;Code 5: </font> <font size="3" face="Courier">
<select id="fifthChoice" name="Choice4" onchange="selectChange(this, 5);" size="1"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<p><font face="MS Sans Serif" size="2">&nbsp;&nbsp;&nbsp; Answer: </font>
<font size="3" face="Courier">
<select id="sixthChoice" name="Choice5" onChange="alert('Reminder')" size="1"></select>
</font></p></td>
<td width="225" align="center">
<font size="2" face="MS Sans Serif">
<a target="_blank" href="reference.htm">Show the Full Spreadsheet</a></a></font></td>
</tr>
<tr>
<td width="778" align="left" colspan="2">
&nbsp;</td>
</tr>
</table>
</div>
</form>

</body>

</html>

Hi guys,

I have this drag and drop script:

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>JavaScript Drag and Drop Tutorial</title>
	
</head>

<body>
<div style="position:absolute; left:0%; top:0%; ">
<style type="text/css">
.drag {
	position: absolute; 
}
	</style>
	
    <div style=" position:absolute; width:100%; height = 100%; left:0%; top: 0%" >
		
		<input id="1" class="drag" style="width:100px; height:100px; top: 0px" type="submit" value="Drag 'n' throw me">
		<pre id="debug"> </pre>
		
		
	</div>
		
	<script language="JavaScript" type="text/javascript">
<!--
function $(id){
	return document.getElementById(id);
}

var _startX = 0;			// mouse starting positions
var _startY = 0;
var _offsetX = 0;			// current element offset
var _offsetY = 0;
var _dragElement;			// needs to be passed from OnMouseDown to OnMouseMove
var _oldZIndex = 0;			// we temporarily increase the z-index during drag
var _debug = $('debug');	// makes life easier


InitDragDrop();

function InitDragDrop()
{
	document.onmousedown = OnMouseDown;
	document.onmouseup = OnMouseUp;
}

function OnMouseDown(e){	
	if (e == null) 
		e = window.event; 
		
	var target =  e.target != null ? e.target : e.srcElement;
		
	if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'drag')	{
		_startX = e.clientX;
		_startY = e.clientY;
		
		_offsetX = ExtractNumber(target.style.left);
		_offsetY = ExtractNumber(target.style.top);	
		
		_oldZIndex = target.style.zIndex;
		target.style.zIndex = 10000;		
		_dragElement = target;	
		
		document.onmousemove = OnMouseMove;
		
		document.body.focus();
		
		document.onselectstart = function () { return false; };
		
		target.ondragstart = function() { return false; };
		
		return false;
	}
}

function ExtractNumber(value)
{
	var n = parseInt(value);
	
	return n == null || isNaN(n) ? 0 : n;
}

function OnMouseMove(e)
{
	if (e == null) 
		var e = window.event; 

	// this is the actual "drag code"
	_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
	_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
	
}

function OnMouseUp(e)
{
	
	if (_dragElement != null)	{
		_dragElement.style.zIndex = _oldZIndex;

		// we're done with these events until the next OnMouseDown
		document.onmousemove = null;
		document.onselectstart = null;
		_dragElement.ondragstart = null;

		// this is how we know we're not dragging
		_dragElement = null;		
	}
}
	</script>
</div>		
	</body>

</html>

Is there a way to drag and drop text field?

I have a table where when the cursor passes/hovers over a cell, the current cell, as well as the top cell in its column and the first cell in its row change backgroundColor. I have text fields outside the table which I want to populate with the contents of the cells affected by the mouseover event. So as the mouse moves over different cells, the contents of the text fields changes accordingly. I've got the backgroundColor to change, but when I try to assign the contents of the cells to the text fields, nothing happens. The change of backgroundColor even stops working.
This is the code I'm usign to populate the fields.
Code:

document.getElementById("tableID").textfieldID.value = Col1Cell[0].innerHTML;
document.getElementById("tableID").textfieldID.value = HeaderCell[n].innerHTML;
document.getElementById("tableID").textfieldID.value = this.innerHTML;

I'm traversing through the <th> and <td> tags to find the header cell HeaderCell[n] and first column cell Col1Cell[0] associated with the current cell. If I leave out these lines the backgroundColor changes, if I use them, nothing happens at all. Can't figure out why. Any suggestions?

Dear All

I have done some coding in javascript . Where i am generating the textbox field and checkbox dynamicaly . That is as per condition if there is one record match as per condition then that many text field will be generated

So just to give a example , which is not dynamical

What i want to do is first the text field are disable and when the checkbox is checked then the text box should be enable

For 1 record the logic is working proper , but if there are more then 1 record then it does not work

Can you'll please help




<?php session_start();?>


<!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>
<link rel="stylesheet" href="../locationpropertydesirecom/css/adcss1.css" type="text/css" media="screen" />


<script language="JavaScript">


function enable_text(status)
{

status=!status;

var e=document.getElementsByTagName("tr");

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


e[i].disabled = status;


}

}

</script>

</head>

<body>

<table>

<tr>
<td><input type="text" id="aa" name="a" disabled="disabled"/></td>
<td><input type="text" id="aa" name="b" disabled="disabled" /></td>
<td><input type="checkbox" name="aa" value="check" onclick="enable_text(this.checked)" />
</tr>

<tr>
<td><input type="text" name="a" disabled="disabled"/></td>
<td><input type="text" name="b" disabled="disabled" /></td>
<td><input type="checkbox" name="aa" value="check" onclick="enable_text(this.checked)" />
</tr>



</table>


Thanks , regards

Jim