Javascript help (forms,divs)

jozza800 · 22 Jan 2009 at 09:10

wonder if you would be able to give me a bit of a helping hand with a bit of code.

Ive managed to find a bit of code that allows me to copy text from a div, but what i need is for the value of a form field to be included within the div and to be copyable.

Ive included the code, it only works in IE at the mo. I was hoping one of you clever people could you give me a few pointers on what needs to be done.

Thanks

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body>
<script language="JavaScript">
 

function CalcSec () {
var secWidth = document.secondpricer.width.value / 1000
var secHeight = document.secondpricer.height.value / 1000
 
secSQM = secWidth * secHeight
document.secondpricer.sqm.value = secSQM
}
 
function copyCode() {
 
var div = document.getElementById('copybox');
div.contentEditable = 'true';
var controlRange;
if (document.body.createControlRange) {
controlRange = document.body.createControlRange();
controlRange.addElement(div);
controlRange.execCommand('Copy');
}
div.contentEditable = 'false';
}
 

</script>
<form name="secondpricer">
  <table width="94%" border="0" cellpadding="1" cellspacing="1">
    <tr> 
      <td width="18%">Width - 
        <input type="text" name="wdith" id="width" size="8">
        mm<br> <br>
        Height - 
        <input type="text" name="height" id="height" size="8" onKeyUp="javascript:CalcSec();">
        mm</td>
      <td width="17%">SqM 
        <input type="text" name="sqm" id="sqm" size="8" > </td>
      <td width="65%"><div id="copybox">Copy text from this box / Text Template 
          here <br>
           <br>
          Square Meter Value is <strong>(Value From The SQM Form Field Here) </strong>&sup2;</div>
        <br> 
        <br> <input type="button" name="copybutton" value="Copy" onClick="javascript:copyCode();">
      </td>
    </tr>
  </table>
</form> 
 
  </body>
</html>

SimonCHere · 22 Jan 2009 at 09:44

Sadly, you can't copy to the clipboard in Firefox*, so if that's what you are trying to do, it can't be done.

Anyway, can't you just add the control in the form you want to copy into the controlRange object?

Code:

...
var theHeight = document.getElementById('height');
...
controlRange.addElement(div);
controlRange.addElement(theHeight);
...

Personally though I would look at changing your names and id's for none reserved words. div, height, width are not good names for objects on web pages.

Simon

*well you can but you have to get the user to change their security settings first.

jozza800 · 22 Jan 2009 at 10:08

Thanks for the reply.

Im not overyly sure my JS skills are less than impressive (GFX Designer). I assume that would copy the the value, but it wouldnt put it into the right area of the text that is bing copied?

What i need is some Value from Form Field placed within a div. Its not the copying part that im having problems with. Just showing the value of a form field somewhere else on the page.

----

Say my script does some maths and comes up with a value of say 15, this shown on the page in a form text box.

I then want to be able to put that Value (15) somewhere esle on a page. For example within a div tag -

example would look like -

Code:

<div>Some pre written text here and i want to place the form value (which is 15) [B](HERE)[/B].</div>

How do i put the form text box value of (15) to where the bold (HERE) is as normal text.

I know its not very clear, but im sure its really simple.

Thanks

SimonCHere · 22 Jan 2009 at 10:43

Yep

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body>
<script language="JavaScript">
 

function CalcSec () {
var secWidth = document.secondpricer.width.value / 1000
var secHeight = document.secondpricer.height.value / 1000
 
secSQM = secWidth * secHeight
document.secondpricer.sqm.value = secSQM
}
 
function copyCode() {
var myDiv = document.getElementById('copybox');
var myVal = document.secondpricer.sqm.value;
var str = myDiv.innerHTML;
myDiv.innerHTML = str.replace('(Value From The SQM Form Field Here)',myVal);


/* 
var div = document.getElementById('copybox');
div.contentEditable = 'true';
var controlRange;
if (document.body.createControlRange) {
controlRange = document.body.createControlRange();
controlRange.addElement(div);
controlRange.execCommand('Copy');
}
div.contentEditable = 'false';


*/

}
 

</script>
<form name="secondpricer">
  <table width="94%" border="0" cellpadding="1" cellspacing="1">
    <tr> 
      <td width="18%">Width - 
        <input type="text" name="wdith" id="width" size="8">
        mm<br> <br>
        Height - 
        <input type="text" name="height" id="height" size="8" onKeyUp="javascript:CalcSec();">
        mm</td>
      <td width="17%">SqM 
        <input type="text" name="sqm" id="sqm" size="8" > </td>
      <td width="65%">

       <div id="copybox">Copy text from this box / Text Template here <br><br>
         Square Meter Value is <strong>(Value From The SQM Form Field Here) </strong>²</div>
        <br> 
        <br> <input type="button" name="copybutton" value="Copy" onClick="javascript:copyCode();">
      </td>
    </tr>
  </table>
</form> 
 
  </body>
</html>

jozza800 · 22 Jan 2009 at 13:07

Thanks again,

It sort of works. It doesnt copy however. Would it be possible to split the codeCopy function up. So that the changing of the string value happens when the calculation is made (On the KeyUP) and the Copy function called with the button?

jozza800 · 22 Jan 2009 at 13:11

Never mind, ive figured it.

Thank you for your help SimonCHere.

SimonCHere · 22 Jan 2009 at 13:39

Sorry, forgot to uncomment the code that did the copy to the clipboard.
As you've probably worked out, you can just move the 4 lines in the top of the copyCode function into the bottom of the CalcSec function.

And no problem.

Simon