JavaScript - Updating A Text Field Back In To The Database.

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!

What am I doing wrong here? I am trying to make it where the user can name the link whatever he/she wants.... I think it might be this part... links[i] = name.linkPosition.value; Where linkPosition is a variable. Can I do this? Or is there another way?


Code:

<div id="navBar">
	<ul>
    	<li><a href="#" id="link0"><script>document.write(links[0]);</script></a></li>
    	<li><a href="#" id="link1"><script>document.write(links[1]);</script></a></li>
    	<li><a href="#" id="link2"><script>document.write(links[2]);</script></a></li>
    	<li><a href="#" id="link3"><script>document.write(links[3]);</script></a></li>
    	<li><a href="#" id="link4"><script>document.write(links[4]);</script></a></li>
	</ul>	

</div><!--end navBar -->


<form>
<label style="color: #FFF;">Change name of links! You can only change them once!</label><br />
<input type="text" class="customLink" size="15" name="link0"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="text" class="customLink" size="15" name="link1"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="text" class="customLink" size="15" name="link2"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="text" class="customLink" size="15" name="link3"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="text" class="customLink" size="15" name="link4"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="button" onclick="replaceLinks(this.form)" value="Replace Link Names!"  />
</form>

Code:

<script>

var links = new Array("home", "portfolio", "stuff", "about me", "contact");

function replaceLinks(name){

	for (var i=0; i<=4; i++) {
		var linkPosition = "link"+i;
	links[i] = name.linkPosition.value;
		changeLink(i);
	}
	
}

function changeLink(number) {

document.getElementById("link"+number).innerHTML="<span style=\"text-transform: capitalize;\">" + links[number] + "</span>";	
}
</script>

ANY HELP WOULD BE AWESOME!!!

I just replaced the functions to look like this...

Code:

function replaceLinks(name){

	for (var i=0; i<=4; i++) {
	links[i] = name.linker+i.value;
		changeLink(i);
	}
	
}

function changeLink(linkNumber) {

document.getElementById("link"+linkNumber).innerHTML="<span style=\"text-transform: capitalize;\">" + links[linkNumber] + "</span>";	
}

Now the links are updating but I get NaN for each link.

I'm fairly new to JS so sorry in advance if this is a stupid question!

I have a textarea which uses ckeditor to make it a wysiwyg. I also have a bit of JS which watches the ckeditor and when a user types into it, whatever they type appears in a div elsewhere on the page.

My ckeditor allows the text to be bold, italic, underlined and resized. When I apply styles to the text in the ckeditor textarea, I want them to reflected in the div which updates. At the moment only underline and resizing the text works. Choosing bold or italic does nothing the text updates ok, but no bold or italic.

I've been told: "Ckeditor is using strong for bold, em for italics. My guess is that the browser or framework you are using doesn't apply bold and italics styles to those tags. You'll have to do that yourself."

I've tested on several browsers, I checked in FF Opera Safari Chrome IE8 & IE9 and its the same in all them. Underline works, resize works but neither bold or italic do. (Interestingly in IE7 bold and italic do work as well as the size and underline! What's going on with that?!?)

So I assume it is the framework? Can anyone tell me if this is right and if so, how do I go about doing that myself?

heres the JS I'm using to update the div:

Code:

<label for="editor1">Background Story</label>
<textarea id="editor1" name="editor1">This is sample text</textarea>
<div id="story"></div>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
timer = setInterval('updateDiv()',100);
function updateDiv(){
var editorText = CKEDITOR.instances.editor1.getData();
$('#story').html(editorText);
}</script>

I am trying to update the text in a span with a date (which is working fine), but I also want to format that date before it is updated in the span. For example, in the text area I input a date (format: YYYY-MM-DD HH:MM:SS), and I'd like to output between the span tags M-D-YYYY. Does that make sense? I'm totally lost here and hoping someone can help me out.

Here is the javascript.

Code:

function show_post_date() {
	var ele = document.getElementById("post_date");
	var text = document.getElementById("new_post_date");
	
	// Get the date value, then format it
	var formatted_date = ele.value;

	// THIS IS WHAT I'VE TRIED, BUT NOTHING IS UPDATED INTO THE SPAN IF I INCLUDE THIS
	var curr_date = formatted_date.getDate();
	var curr_month = formatted_date.getMonth();
	var curr_year = formatted_date.getFullYear();
	formatted_date = curr_date + "-" + curr_month + "-" + curr_year;
	// END SECTION OF WHAT I'VE TRIED

	if(ele.value != "") {
		text.innerHTML = formatted_date;
  	}
}

Here is the element

Code:

When: <span id='new_post_date' style='font-weight:bold;'></span>
<input type="text" name="post_date" id="post_date" value="" onChange='show_post_date()' />

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 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?

Hi guys,I was thinking about the code to :
write something inside the text box and if the word entered is equal "hero" for example the box next to it will turn green means correct, otherwise it will turn red means wrong,and if nothing entered it stays white.
I really like to know how we code that in javascript using functions, without any CSS or anything else.
That means we have 2 objects a text box and a rectangle for feedback color.
Remark: there is no button at all, the validation will be each time you are typing.


A Bonus question : if someday we decide to change the color with pictures , is it possible to do that?
Thank you very much for your help, much appreciate it.

Ok, came up with a work around to my previous problem, however I now have a result that I cannot explain. Here is the code:

Code:

<FORM NAME="Calc">
<TABLE BORDER=4>
<TR>
<TD>
<INPUT TYPE="text"  onkeydown="if (event.keyCode == 13) {Calc.Input.value = eval(Calc.Input.value)}" NAME="Input" Size="26">
<br>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="button" NAME="one"   VALUE="  1  " OnClick="Calc.Input.value += '1'">
<INPUT TYPE="button" NAME="two"   VALUE="  2  " OnCLick="Calc.Input.value += '2'">
<INPUT TYPE="button" NAME="three" VALUE="  3  " OnClick="Calc.Input.value += '3'">
<INPUT TYPE="button" NAME="plus"  VALUE="  +  " OnClick="Calc.Input.value += ' + '">
<br>
<INPUT TYPE="button" NAME="four"  VALUE="  4  " OnClick="Calc.Input.value += '4'">
<INPUT TYPE="button" NAME="five"  VALUE="  5  " OnCLick="Calc.Input.value += '5'">
<INPUT TYPE="button" NAME="six"   VALUE="  6  " OnClick="Calc.Input.value += '6'">
<INPUT TYPE="button" NAME="minus" VALUE="  -  " OnClick="Calc.Input.value += ' - '">
<br>
<INPUT TYPE="button" NAME="seven" VALUE="  7  " OnClick="Calc.Input.value += '7'">
<INPUT TYPE="button" NAME="eight" VALUE="  8  " OnCLick="Calc.Input.value += '8'">
<INPUT TYPE="button" NAME="nine"  VALUE="  9  " OnClick="Calc.Input.value += '9'">
<INPUT TYPE="button" NAME="times" VALUE="  x  " OnClick="Calc.Input.value += ' * '">
<br>
<INPUT TYPE="button" NAME="clear" VALUE="  C  " OnClick="Calc.Input.value = ''">
<INPUT TYPE="button" NAME="zero"  VALUE="  0  " OnClick="Calc.Input.value += '0'">
<INPUT TYPE="button" NAME="DoIt"  VALUE="  =  " OnClick="Calc.Input.value = eval(Calc.Input.value)">
<INPUT TYPE="button" NAME="div"   VALUE="  /  " OnClick="Calc.Input.value += ' / '">
<br>
</TD>
</TR>
</TABLE>
</FORM>

In order to get the 'Enter' button to function the same as pressing the '=' button, I added the keyCode event. Now my problem is that when you press the 'Enter' key, the result is displayed int the 'Input' text field briefly and then is cleared. How can I keep the result static in the text box?

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?

window.onload = initAll;

function initAll() {
document.getElementById("Message").onfocus = focusHandler;
document.getElementById("Message").onblur = blurHandler;

}

function focusHandler() {
document.getElementById("helpYou").innerHTML = "<span class=\"helpMessage\">Hey " + theName + "You should add Lasting Flash to your Facebook!</span>"
}

function blurHandler() {
var helpMessage = document.getElementById("helpYou").innerHTML = "";
}

function nameHandler(frm) {
var theName = frm.firstName.value;
}

Quote:
When I insert theName variable within the span the code completely does not work. I am accessing a text field when the user enters his name and then a small pop up later that includes the users name when another field is clicked on.

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>

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

I am trying to get a text field to increase in size (one time to a predetermined size) when user clicks in the text field. Here is the code that for some reason isn't working for me.

Code:

<script type='text/javascript'>
       function resizeIt() 
        {
	document.getElementById('comment').style.height = 50px;
        };
</script>

<input type='text' id='comment' class='urlTextArea' name='url' value=''
 size='75' onfocus='resizeIt()'>

Hello, I am needing the coding to do the follow:

When a user makes a selection from a dropdown, the value is placed in a text input.

SELECT >>> INPUT

Thank you so much for your help!