JavaScript - Help Me Create A Variable From A Text Field And Use It, Please!

I need someone who can help me create javascript code which will create a hyperlink string with a changing variable:

This script should write and execute a hyperlink string which opens a separate pop-up window, nothing more. No image files, no subfolders, forget all that stuff. JUST A HYPERLINK.

The hyperlink SYNTAX does all the work in loading and selecting the images, NOT THE SCRIPT. There is only one changing variable, the value following clipart_id= Here is the basic hyperlink syntax:

<a href="http://www.websitename.com/clipart/manipulate? clipart_id= 00000 &path=%2Fclipart%2Feps%2F&lockRatio=true&width=500&height=500"></a>

THERE ARE ALWAYS 2 WINDOWS: ONE WINDOW HOLDS THE HTML; THE OTHER IS A POP-UP WINDOW (The opened hyperlink)

The basic html page will contain only 2 objects, an input box and a NEXT BUTTON.

Step 1: Initialize the variable from an input box, this variable is used to set the value following clipart_id= which is part of the hyperlink syntax

Step 2: The user inputs the initial variable which is used to write the first hyperlink string; click NEXT to launch the first pop-up window

Step 3: For each subsequent action Click NEXT - OnClick - This ADDS +1 to the initial variable, this variable is passed to be inserted in a new hyperlink string AND then launches a NEW hyperlink to open a NEW popup window. This is an infinite type of action which advances the value of clipart_id= every time the NEXT button is clicked.

Each time you click the NEXT button it advances a counter which executes a NEW hyperlink in a NEW popup window. The only thing that ever changes is the variable after clipart_id=, BUT the entire url syntax of the hyperlink string must be maintained exactly as shown below. If you change the syntax it will not work.

So, if the first value to start with is lets say 13000 ; this is input in a box; then the first hyperlink string will automatically be written and open using this:

<a href="http://www.websitename.com/clipart/manipulate?clipart_id= 13000 &path=%2Fclipart%2Feps%2F&lockRatio=true&width=500&height=500"></a>

Click the NEXT BUTTON and now a new hyperlink window will open which reads like this:

<a href="http://www.websitename.com/clipart/manipulate?clipart_id= 13001 &path=%2Fclipart%2Feps%2F&lockRatio=true&width=500&height=500"></a>

click the NEXT BUTTON and now a new hyperlink hyperlink window will open reads like this:

<a href="http://www.websitename.com/clipart/manipulate?clipart_id= 13002 &path=%2Fclipart%2Feps%2F&lockRatio=true&width=500&height=500"></a>

And so on and so on... Nothing else changes. So the "nextpath" after a CLICK is a complete new hyperlink string which contains a vew variable for the value following clipart_id=

All I am trying to do is execute a standardized hyperlink string with one changing variable.

CAN ANYONE HELP ME TO WRITE THIS CODE?

Hi all,

I am new to JS and usually learn by studying code posted online and modify it to have it do what I need. Recently, I used a totaling plugin for an online ordering form which does the below:

item1 qty(user input text) * preset price = total price
item2 qty(user input text) * preset price = total price
item3 qty(user input text) * preset price = total price
--------------------------------------------------------
grand total
--------------------------------------------------------

The JS code which passes the grandTotal variable is as below:

Code:

function ($this){
// sum the total of the $("[id^=total_item]") selector
var sum = $this.sum();
			
$("#grandTotal").text(
// round the results to 2 digits
"₹" + sum.toFixed(2)
);
}

The problem I have is the above grandTotal displays the final value when put into a table like below:
Code:

<td align="right" id="grandTotal"></td>

But I am unable to make it work by passing it into a variable within the form fields. I would like to do something like this:
Code:

<input type="text" name="grandTotal" id="grandTotal" readonly="readonly" />

Can somebody please help me fix this? Any help will be greatly appreciated. Thank you.

I am trying to create three buttons that will scale the page up, down, or reset to a default value. I would like to base that incrementing on a global variable declared in javascript:

Code:

var canvasWidth = 600;

Desired incrementing would be in sets of 200, so that when the user clicks zoom in once, the value is 800 and the page is redrawn, twice to 1000, and so on.

All of the visual elements of the page are created in javascript and are sized based on this variable. Very little is done on the HTML page visually, except for a little display organization, so if possible I'd like to be able to complete this task mainly in the javascript file.

Does this make sense?

I assumed this is a javascript based text editor because when I turn off javascript it doesn't work. I was wondering how something like this is created. maybe not this exact one, but how would I create something like it. Maybe just a simple editor that changes text size and color.

i am creating a header for a webpage. the header has two text menus (no images). the first menu (menu A) is like this:

link 1a / link 2a / link 3a

the second menu (menu B) is like this:

link 1b
link 2b
link 3b

i would like to use javascript/css to do the following:

when you rollover link 1a, three things happen: link 1a changes color, link 1b changes color, and and link 1b adds a line of text (so it reads: link 1b : text 1b)

i would also like- and this is where i am having trouble- for the following to happen: when you rollover link 1b, link 1b changes color and adds the additional text, as well as link 1a changes color.

it doesn't seem so bad when i write it out here, but i can't figure out how to do it. any help is appreciated.

I tried to create a new text input once the last text box gets focus. But I cant even type in them because every time it gets focus a new text input is created! I really dunno what to do.

Code:

<html>
<head>
<script type="text/javascript">
function getTB(field)
{ 
var i = document.getElementById("f1").length + 1;

var cmd = "<input type=text name = "+ i + " onfocus=getTB() value = " + i + ">";

document.getElementById('f1').innerHTML = document.getElementById('f1').innerHTML + cmd;
document.getElementById(i-2).focus();
}
</script>
</head>
<body>
<form id ="f1">
<input type ="text" value ="hello" name="1" onFocus ="getTB(this)">
</form>
</body>
</html>

how to modify so not every time a new text input created when tried to type in?

First, I did this for testing
Code:

<script type="text/javascript">
<!--
var cururl = window.location.href + "?style=1"
document.write(cururl);
//-->
</script>

and it works. It gets the current url of the page and appends ?style=1 then writes out the URL.

However getting it as a clickable link is what's stumping me.
Code:

<script type="text/javascript">
<!--
function goURL()
{
window.location.href + "?style=1"
}
//-->
</script>

<a href="javascript:goURL()">Go There</a>

Doesn't work in my test. As you can probably see, I'm not very well versed in javascript.

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?

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?

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?

[ICODE]
<html>
<head>
<title>ABS</title>
<?php
$j="dove";
?>

<script language="JavaScript" type="text/javascript">
<!--
function checkform ( form )
{

if (form.Name.value == "") {
alert( "Please enter your email address." );
form.Game.value="<?php echo $j;?>";
form.Name.focus();
return false ;
}

if (form.Game.value == "") {
alert( "Please enter your game address." );
form.Game.focus();
return false ;
}
if (document.form.Shame[0].value== "") {
alert( "Please enter your game address." );
form.Game.focus();
return false ;

}
return true ;

}


</script>
</head>
<body>

<form name="form" action="Store_it.php" method="post" onSubmit="return checkform(this);">


<input type="text" name="Name" />
<input type="text" name="Game" />
<input type="text" name="Shame[]" />
<input type="text" name="Shame[]" />
<input type="text" name="Shame[]" />
<input name="submit" type="submit">

</form>
</body>
</html>
[icode]

I need to use the array's shame and just check if the third one is not empty.

I have searched DOM and other stuff but i cannot get to the 2 element of the array shame. How do i check the value of the array.

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?

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