Jump to content

swap the contents of two textarea fields


jasonc

Recommended Posts

want to swap the contents of two textarea fields in my form when a hyperlink is clicked.

 

i have the hyperlink and layout donw just want to know how i access and set the form fields to their new values, please can someone help me out.

function MoveBoxContent(thisForm, FieldID, MoveWhere) {
if( $MoveWhere == "u" ) {
$temp = theForm.$FieldID.value;
theForm.$FieldID.value = theForm.($FieldID-1).value;
theForm.$FieldID+1.value = $temp;
}

}

var item1 = document.getElementById("nameOfTextarea1").innerHTML;
var item2 = document.getElementById("nameOfTextarea2").innerHTML;
var temp = item1;
item1 = item2;
item2 = temp;

 

Something like that.  You're likely having trouble because Textarea's use .innerHTML while inputs use .value if I remember correctly.

nope still not working, but I did notice this time around that my firefox firebug kicks up error that the function is not defined.

 

I have included my completely testing code..

 

 

<html>
<head>
<title>test_move_box_content.php</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/javascript">
function MoveBoxContent(thisForm, FieldID, MoveWhere) {
if( MoveWhere == "u" ) {

var item1 = document.getElementById(FieldID).innerHTML;
var item2 = document.getElementById(FieldID-1).innerHTML;
var temp = item1;
item1 = item2;
item2 = temp;



/*
var temp = thisForm.FieldID.innerHTML;
thisForm.FieldID.value = thisForm.(FieldID-1).innerHTML;
thisForm.(FieldID-1).innerHTML = temp;
*/
}

}
</style>
<style type="text/css">
<!--
div.boxedarea { border: 1px solid #fff; position: align: center;}
a.boxedarea { text-decoration: none; color: #777777; }
-->
</style>
</head>

<body>
<div style="text-align: center;"> 
<form action="" method="post">

<?
$j = 4;

for ($i = 1; $i <= $j; $i ++) { ?>

<div class="boxedarea">
<? if ($i > 1) { ?><a class="boxedarea" href="#" onClick="MoveBoxContent(thisForm, <?=$i;?>, u);">move up</a><? } ?>
<br><a class="boxedarea" href="#" onClick="MoveBoxContent(thisForm, <?=$i;?>, l);">move left</a>
<textarea name="<?=$i;?>" cols="80"></textarea>
<a class="boxedarea" href="#" onClick="MoveBoxContent(thisForm, <?=$i;?>, r);">move right</a><br>
<? if ($i < $j) { ?><a class="boxedarea" href="#" onClick="MoveBoxContent(thisForm, <?=$i;?>, d);">move down</a><? } ?>
</div>

<? } ?>

</form>
</div>
</body>
</html>

my code now...

 

 

<html>
<head>
<title>test_move_box_content.php</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/javascript">
<!--
function MoveBoxContent(this, FieldID, MoveWhere) {
alert( FieldID);
if( MoveWhere == "u" ) {
var temp = this.FieldID.innerHTML;
this.FieldID.value = this.(FieldID-1).innerHTML;
this.(FieldID-1).innerHTML = temp;
}

}
-->
</style>
<style type="text/css">
<!--
div.boxedarea { border: 1px solid #fff; position: align: center;}
a.boxedarea { text-decoration: none; color: #777777; }
-->
</style>
</head>

<body>
<div style="text-align: center;"> 
<form name="form1" method="post" action="">
<?
$j = 4;

for ($i = 1; $i <= $j; $i ++) { ?>

<div class="boxedarea">
<? if ($i > 1) { ?><a class="boxedarea" href="#" onClick="MoveBoxContent(this, <?=$i;?>, 'u');">move up</a><? } ?>
<br><a class="boxedarea" href="#" onClick="MoveBoxContent(this, <?=$i;?>, 'l');">move left</a>
<textarea id="<?=$i;?>" name="<?=$i;?>" cols="80"></textarea>
<a class="boxedarea" href="#" onClick="MoveBoxContent(this, <?=$i;?>, 'r');">move right</a><br>
<? if ($i < $j) { ?><a class="boxedarea" href="#" onClick="MoveBoxContent(this, <?=$i;?>, 'd');">move down</a><? } ?>
</div>

<? } ?>

</form>
</div>
</body>
</html>

Hahaha... you'll kick yourself for this.

 

<style type="text/javascript">

vs

<script type="text/javascript">

 

You're like me, you error with style!... when you want script >.>

 

Secondly, in the function and function signature itself, I think the "this" argument should have a different name, leaving "this" only in the onclick event calls.  I'm not 100% on this.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.