Web Analytics Made Easy -
StatCounter swap the contents of two textarea fields - CodingForum

Announcement

Collapse
No announcement yet.

swap the contents of two textarea fields

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • swap the contents of two textarea fields

    want to swap the contents of two textarea fields in my form

    i have the hyperlink and layout donw just want to know how i access and set the form fields to their new values

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

  • #2
    You can do it like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="css/" />
    <style type="text/css">
    </style>
    <script type="text/javascript">
    // <![CDATA[
    
    function innerHTMLSwap(elm1,elm2)
    	{
    	var elm1_html = elm1.innerHTML;
    	elm1.innerHTML = elm2.innerHTML;
    	elm2.innerHTML = elm1_html;
    	}
    
    // ]]>
    </script>
    </head>
    <body>
    
    textarea 1 <textarea id="textarea_1">textarea 1</textarea>
    textarea 2 <textarea id="textarea_2">textarea 2</textarea>
    <input type="button" value="swap TA1 with TA2" onclick="innerHTMLSwap(document.getElementById('textarea_1'),document.getElementById('textarea_2'))" />
    
    </body>
    </html>
    Last edited by itsallkizza; Apr 2, 2009, 05:38 PM.
    Feel free to e-mail me if I forget to respond ;)
    [email protected]

    Comment


    • #3
      here is my complete code i am currently using as a starting point.

      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(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>
      Last edited by jasonc310771; Apr 3, 2009, 08:31 AM.

      Comment


      • #4
        If you really need more help with this then go ahead and post the client-side source code (ie what you'd see after all the server-side code has been run).
        Feel free to e-mail me if I forget to respond ;)
        [email protected]

        Comment


        • #5
          i have been messing around trying to figure this out myself, but getting no very fast!

          this is what i have and the error is the same that the this.fieldIDa is not defined

          Code:
          <html>
          <head>
          <title>test_move_box_content.php</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
          <SCRIPT type="text/javascript" LANGUAGE="JavaScript">
          function MoveBoxContent(fieldIDa, fieldIDb) {
          
          var temp = this.fieldIDa.innerHTML;
          this.fieldIDa.innerHTML = this.fieldIDb.innerHTML;
          this.fieldIDb.innerHTML = temp;
          
          }
          </script>
          <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="">
          
          	<div class="boxedarea">
          
          	<br><textarea id="1" name="1" cols="80"></textarea><br>
          	<a class="boxedarea" href="#" onClick="MoveBoxContent(1, 2);">swap</a>	</div>
          
          
          	<div class="boxedarea">
          	<br><textarea id="2" name="2" cols="80"></textarea><br>
          		</div>
          
          </form>
          </div>
          </body>
          </html>
          Last edited by jasonc310771; Apr 3, 2009, 11:09 AM.

          Comment


          • #6
            Lol fine I'll do all your work for you
            Code:
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <title>Test</title>
            <link rel="stylesheet" type="text/css" href="css/" />
            <style type="text/css">
            </style>
            <script type="text/javascript">
            // <![CDATA[
            
            function innerHTMLSwap(elm1,elm2)
            	{
            	var elm1_html = elm1.innerHTML;
            	elm1.innerHTML = elm2.innerHTML;
            	elm2.innerHTML = elm1_html;
            	return false;
            	}
            
            // ]]>
            </script>
            </head>
            <body>
            
            <div style="text-align: center;">
            	<form id="form1" method="post" action="">
            		<div class="boxedarea">
            			<br /><textarea id="ta_1" name="ta_1" cols="80"></textarea><br />
            			<a class="boxedarea" href="#" onclick="return innerHTMLSwap(document.getElementById('ta_1'),document.getElementById('ta_2'));">swap</a>
            		</div>
            		<div class="boxedarea">
            			<br /><textarea id="ta_2" name="ta_2" cols="80"></textarea><br />
            		</div>
            	</form>
            </div>
            
            </body>
            </html>
            Feel free to e-mail me if I forget to respond ;)
            [email protected]

            Comment

            Working...
            X