-1

This is the bare bones of some javascript I wrote without much experience. I think the error is probably something obvious that I just can't seem to find. The process is that a user can move elements into a design area; and then email the design specs with ID#s of the elements. The bug is that if a user decides to edit the form fields directly, the part of the script that automatically inserts the text stops working. Is it a "return;" action that is missing? Or a "focus()"? I've tried a few things with those 2 that haven't worked. I'll upload this little file here: http://professional.maigreysmind.com/afwebs-files/forum/test.html in case you don't want to mess with running it locally. And thank you so much in advance, if you can help me.

    <head>

    <script type="text/javascript">

    function allowDrop(ev) {
    ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("Text", ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
        if (ev.target.id == "position1") {
            document.getElementById("form-block1").innerHTML = document.getElementById(data).id;
        }
        else if (ev.target.id == "position2") {
    document.getElementById("form-block2").innerHTML = document.getElementById(data).id;
        }
        else if (ev.target.id == "position3") {
            document.getElementById("form-block3").innerHTML = document.getElementById(data).id;
        }
        else {};
    }

    </script>

    </head>

    <body>

        <div style="position:relative; float:left; border:1px solid black; width:70px; height:70px;" ondrop="drop(event)" ondragover="allowDrop(event)"><div style="border:1px solid black; width:68px; height:68px;" draggable="true" ondragstart="drag(event)" id="WJ1431" width="68" height="68">container</div></div>

        <div style="position:relative; float:left; border:1px solid black; width:70px; height:70px;" ondrop="drop(event)" ondragover="allowDrop(event)"><div style="border:1px solid black; width:68px; height:68px;" draggable="true" ondragstart="drag(event)" id="WJ1426" width="68" height="68">container</div></div>

      <div style="position:relative; float:left; border:1px solid black; width:70px; height:70px;" ondrop="drop(event)" ondragover="allowDrop(event)"><div style="border:1px solid black; width:68px; height:68px;" draggable="true" ondragstart="drag(event)" id="WJ1418" width="68" height="68">container</div></div>

    <div style="clear:left;">&nbsp;</div>



    <div style="width:70px; height:70px; border:1px solid black; float:left;" id="position1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    <div style="width:70px; height:70px; border:1px solid black; float:left;" id="position2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    <div style="width:70px; height:70px; border:1px solid black; float:left;" id="position3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>


    <div style="clear:left;">&nbsp;</div>

    <form id="form17" name="webapp-form" method="POST" action="">
     <div style="float:left;"> <table width="220" bgcolor="#f4f1e7" border="1" cellspacing="0">
        <tr>
          <td><textarea id="form-block1" type="text" cols="7" rows="4" maxlength="24"></textarea></td>
          <td><textarea id="form-block2" type="text" cols="7" rows="4" maxlength="24"></textarea></td>
          <td><textarea id="form-block3" type="text" cols="7" rows="4" maxlength="24"></textarea></td>
        </tr>
      </table>
      </div></form>

    </body>

1 Answer 1

1

Once you've edited a <textarea>, its innerHTML is ignored. You need to set its value, like any other input field. So change to:

if (ev.target.id == "position1") {
    document.getElementById("form-block1").value = document.getElementById(data).id;
}
else if (ev.target.id == "position2") {
    document.getElementById("form-block2").value = document.getElementById(data).id;
}
else if (ev.target.id == "position3") {
    document.getElementById("form-block3").value = document.getElementById(data).id;
}

BTW, document.getElementById(x).id is the same as x.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.