Add text to cursor don't work if html is in echo ?

[Peuplarchie]

Good day to everybody !

            I'm working on a small to-do list.

 

I have created a text editor to add  no todo to it. Here is the code :

 

 

<script>
//modified version of http://www.webmasterworld.com/forum91/4686.htm
//myField accepts an object reference, myValue accepts the text string to add
function insertAtCursor(myField, myValue) {
//fixed scroll position
textAreaScrollPosition = myField.scrollTop;
    //IE support
    if (document.selection) {
        myField.focus();
        //in effect we are creating a text range with zero
        //length at the cursor location and replacing it
        //with myValue
        sel = document.selection.createRange();
        sel.text = myValue;
    //Mozilla/Firefox/Netscape 7+ support
    } else if (myField.selectionStart || myField.selectionStart == '0') {
        myField.focus();
        //Here we get the start and end points of the
        //selection. Then we create substrings up to the
        //start of the selection and from the end point
        //of the selection to the end of the field value.
        //Then we concatenate the first substring, myValue,
        //and the second substring to get the new value.
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
        myField.setSelectionRange(endPos+myValue.length, endPos+myValue.length);
    } else {
        myField.value += myValue;
    }
//fixed scroll position
myField.scrollTop = textAreaScrollPosition;

}
</script>



<form action="ajoutage.php" method="post" name="ajout" id="ajout">
<table cellpadding="0" cellspacing"0" border="0">


<input type="hidden" name="sujet" value="<?PHP echo $_GET['sujet']; ?>"/>
<input type="hidden" name="categorie" value="<?PHP echo $_GET['categorie']; ?>"/>


<tr><td width="85px">Titre : </td><td><input type="text" name="titre"/></td>
    <td></td>
    <td>Ajouteur : </td><td align="right"><input type="text" name="ajouteur" value="<?PHP echo $qui; ?>"/></td>
</tr>
<tr><td width="85px">Sujet : </td><td><input type="text" name="sujet"/></td>
    <td></td>
    <td>Status : </td><td align="right"><input type="text" name="status"/></td>
</tr>
<tr><td width="85px">Catégorie : </td><td><input type="text" name="categorie"/></td>
    <td></td>
    <td>Niveau : </td><td align="right"><input type="text" name="niveau"/></td>
</tr>
<tr><td colspan="5">Tâche :
<a href="#" onClick="insertAtCursor(document.ajout.tache, '<tr><td></td>\n<td>*&0&*</td>\n</tr>\n')">Progress</a> | 
<a href="#" onClick="insertAtCursor(document.ajout.tache, '<tr colspan=3>\n<td></td>\n</tr>\n')">Pleinne</a> | 
<br><textarea name="tache" id="tache" cols="70" rows="20"  wrap="off"  spellcheck="false"></textarea></td>
</tr>


<tr><td colspan="5"><input type="submit" value="Ajouter"/></td></tr>


</table>
</form>

 

 

 

It works very fine, as you can see there is to links that is use to add some text in the textarea, where ever the cursor is.

 

Where it starts :

I have also created another form to modify the todo's once they are created.

The only problem here is that my 2 links for adding text to the textarea don't work at all, they do nothng, no error shown, no text added.

 

Here is the code use to modify the todos once created:

 

<script type="text/javascript">
//modified version of http://www.webmasterworld.com/forum91/4686.htm
//myField accepts an object reference, myValue accepts the text string to add
function insertAtCursor(myField, myValue) {
//fixed scroll position
textAreaScrollPosition = myField.scrollTop;
    //IE support
    if (document.selection) {
        myField.focus();
        //in effect we are creating a text range with zero
        //length at the cursor location and replacing it
        //with myValue
        sel = document.selection.createRange();
        sel.text = myValue;
    //Mozilla/Firefox/Netscape 7+ support
    } else if (myField.selectionStart || myField.selectionStart == '0') {
        myField.focus();
        //Here we get the start and end points of the
        //selection. Then we create substrings up to the
        //start of the selection and from the end point
        //of the selection to the end of the field value.
        //Then we concatenate the first substring, myValue,
        //and the second substring to get the new value.
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
        myField.setSelectionRange(endPos+myValue.length, endPos+myValue.length);
    } else {
        myField.value += myValue;
    }
//fixed scroll position
myField.scrollTop = textAreaScrollPosition;

}
</script>


<?php
$con = mysql_connect("localhost","XXXXXX","XXXXXX");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("XXXXXX", $con);



$id = $_GET['id'];
$qui = $_GET['qui'];
$sujet = $_GET['sujet'];
$categorie = $_GET['categorie'];

$result = mysql_query("SELECT * FROM todo where id='$id'");

while($row = mysql_fetch_array($result))
  {
  echo "

<form action=\"modifiage.php\"  name=\"ajout\" id=\"ajout\" method=\"post\">
<table cellpadding=\"0\" cellspacing\"0\" border=\"0\">
<input type=\"hidden\" name=\"id\" value=\"" . $row['id'] . "\"/>
<input type=\"hidden\" name=\"qui\" value=\"" . $row['ajouteur']  . "\"/>
<input type=\"hidden\" name=\"sujet\" value=\"" . $row['sujet'] . "\"/>
<input type=\"hidden\" name=\"categorie\" value=\"" . $row['categorie'] . "\"/>

<tr><td width=\"85px\">Titre : </td><td><input type=\"text\" name=\"titre\" value=\"" . $row['titre'] . "\"/></td>
    <td></td>
    <td>Ajouteur : </td><td align=\"right\"><input type=\"text\" name=\"ajouteur\"  value=\"" . $row['ajouteur'] . "\"/></td>
</tr>
<tr><td width=\"85px\">Sujet : </td><td><input type=\"text\" name=\"sujet\"  value=\"" . $row['sujet'] . "\"/></td>
    <td></td>
    <td>Status : </td><td align=\"right\"><input type=\"text\" name=\"status\"  value=\"" . $row['status'] . "\"/></td>
</tr>
<tr><td width=\"85px\">Catégorie : </td><td><input type=\"text\" name=\"categorie\"  value=\"" . $row['categorie'] . "\"/></td>
    <td></td>
    <td>Niveau : </td><td align=\"right\"><input type=\"text\" name=\"niveau\"  value=\"" . $row['niveau'] . "\"/></td>
</tr>
<tr>
";

$tache = $row['tache'];
$tache = str_replace("<div class=\"progress-containers\"><div style=\"width:","*&",$tache);
$tache = str_replace("%\"><br></div></div>","&*",$tache);
$onmouse = '<tr onMouseOver="this.className=**highlight**" onMouseOut="this.className=**normal**"><td>';
$tache = str_replace($onmouse,"<tr><td>",$tache);
echo "
    <td colspan=\"5\">Tâche : 


<a href=\"#\" onClick=\"insertAtCursor(document.ajout.tache, '<tr><td></td>\n<td>*&0&*</td>\n</tr>\n')\">Progress</a> | 
<a href=\"#\" onClick=\"insertAtCursor(document.ajout.tache, '<tr colspan=3>\n<td></td>\n</tr>\n')\">Pleinne</a> | 
<br><textarea name=\"tache\"  id=\"tache\" cols=\"70\" rows=\"20\" wrap=\"off\"  spellcheck=\"false\">" . $tache . "</textarea></td>
</tr>
<tr><td colspan=\"5\"><input type=\"submit\" value=\"Modifier\"/></td>

</tr>


</table>
</form>  
";
  }

mysql_close($con);

?>