Question

我有一个页面，用户可以在其中添加嵌套在div中的动态创建的textareas。

我正在尝试插入添加的textareas

我遇到的问题是，如果我添加3个textareas然后删除第二个，然后提交提交的textareas的数量是2但是两个区域的id是1和3当我尝试添加for循环第二个textarea没有价值

除了for for循环之外，我还可以在db中插入已发布的文本区域。

继承人的代码 php插入代码：

<?
$page_ref="170";
$template_ref="15";  
if($_SERVER['REQUEST_METHOD'] == "POST") 
{       
    mysql_query("DELETE FROM site_content WHERE page_ref='$page_ref' AND template_ref='$template_ref' AND box_type='text'");
    $q=count($_POST["textarea"])+1; 
    for($m=1; $m<$q;$m++) 
        {           
            $left=$_POST["left"][$m];
            $top=$_POST["top"][$m];
            $height=$_POST["height"][$m];
            $width=$_POST["width"][$m];
            $text=addslashes($_POST["textarea"][$m]);       
            $j=$m+1;
            $drag_id++;
            $box_type=$_POST['box_type'][$m];
            $box_id=$_POST['id'][$m];
            mysql_query("INSERT INTO site_content(page_ref, template_ref, content, box_id, box_type, box_top, box_left, box_width, box_height)VALUES('$page_ref','$template_ref','$text','$box_id','$box_type','$top','$left','$width','$height')");                
        }         
}
?>

的javascript：

function NewTextArea(id) {
    id = id + i;
    var newdiv = document.createElement('div');
    newdiv.setAttribute('id', id);
    newdiv.setAttribute('class', 'dragbox');
    newdiv.setAttribute('iterate', i);
    newdiv.style.position = "relative";
    newdiv.style.top = p;
    newdiv.style.left = p;
    newdiv.style.cursor = 'move';
    newdiv.innerHTML = "</div><br><textarea id='" + i + "'  onDblClick='editor1(" + i + ")' name='textarea[" + i + "]' class='textarea1' style='position:absolute; top:10px;left:0px;overflow-y: auto;background-color:transparent;border: 1px solid #00FFFF; '>text here" + i + "</textarea>";
    newdiv.innerHTML = newdiv.innerHTML + "<br><input type='hidden' value='" + i + "' name='id[" + i + "]'><br><input name='box_type[" + i + "]' type='hidden' value='text'/>";
    newdiv.innerHTML = newdiv.innerHTML + "<br><input type='hidden' value='300' name='width[" + i + "]' id='width" + i + "'><br><input type='hidden' value='75' name='height[" + i + "]' id='height" + i + "'>";
    newdiv.innerHTML = newdiv.innerHTML + "<br><input type='hidden' value='0' name='left[" + i + "]' id='left" + i + "'><br><input type='hidden' value='0' name='top[" + i + "]' id='top" + i + "'>";

    document.getElementById("frmMain").appendChild(newdiv);

    var but = document.createElement('input');
    but.setAttribute('type', 'button');
    but.setAttribute('class', 'removebutton');
    but.style.visibility = "visible";
    but.style.float = "right";
    but.style.position = "absolute";
    but.style.left = "300px";
    but.style.top = "0px"

    but.onclick = function () {
        if (confirm('Really delete?')) {
            document.getElementById("frmMain").removeChild(newdiv);
            document.getElementById(id).removeChild(but);
            document.getElementById(id).removeChild(newbr);
        }
    }

    newbr = document.createElement('BR');
    document.getElementById(id).appendChild(newbr);
    document.getElementById(id).appendChild(but);

    $(function() {
        $("#" + i).resizable({
            autoHide: true
        })
        $("#" + id).hover(function() {
            $("#" + i).css('border', '1px solid #00FFFF');
        });
        $("#" + id).mouseleave(function() {
            $("#" + i).css('border', '0px');
        });
        $("#" + i).resizable({
            stop: function (event, ui) {
                var width = ui.size.width;
                var height = ui.size.height;
                $("#" + id).find(".removebutton").css('left', +width + 'px');
                // alert("width="+width+"height="+height);
                ValProportions(width, height, ui.element.context.id);
            }
        });

        $("#" + id).draggable({
            stop: function(event, ui) {
                Stoppos = $(this).position();
                $("div#stop").text("STOP: \nLeft: " + Stoppos.left + "\nTop: " + Stoppos.top);
                // alert("left="+Stoppos.left+"top="+Stoppos.top);
                ValPostion(Stoppos.left, Stoppos.top, $(this).attr('iterate'));
            }
        });
        $("#" + i).draggable({
            handle: "#handle"
        });
    });

    function ValProportions(defaultwidth, defaultheight, id) {
        $('#width' + id).val(defaultwidth);
        $('#height' + id).val(defaultheight);
    }

    function ValPostion(defaultleft, defaulttop, id) {
        $('#left' + id).val(defaultleft);
        $('#top' + id).val(defaulttop);
    }

    p = p + 25;
    i++;

    $('.dragbox').click(function() {
        $(".removebutton").css('visibility', 'hidden');
        $("#" + i).css('border', '0px');
        $(this).css('border', '1px solid #000');
        $(this).css('background-color', 'red');
        $(this).css('background-image', 'url(img/move.png)');
        $(this).css('background-repeat', 'no-repeat');
        $(this).css('width', '15px');
        $(this).css('height', '15px');
        $(this).find(".removebutton").css('visibility', 'visible');
        $(this).find("#" + i).css('border', '1px solid #00FFFF');
    });

    $('.dragbox').focusout(function(e) {
        $("#" + i).css('border', '0px');
        $('.dragbox').css('background-color', 'transparent');
        $('.dragbox').css('width', '0px');
        $('.dragbox').css('border', '0px');
        $(this).css('border', '0px');
        $(this).css('background-color', 'transparent');
        $(this).css('width', '0px');
    });
}

html代码：

<form id="frmMain" name="frmMain" enctype="multipart/form-data" action="dynamic_div5.php" method="post">
  <input id="btn1" type="button" value="Add New textbox" onClick="NewTextArea('draggable');"/>  
  <input type="submit" value="Save Page"  >
  <div id="content">
   <?
   $sql=mysql_query("SELECT * FROM site_content WHERE page_ref='$page_ref' AND template_ref='$template_ref' ORDER BY box_id DESC");    
   $numrows=mysql_num_rows($sql); 
   while($row=mysql_fetch_array($sql))
 {
 ?>
     <script>OldTextArea('<? echo $row['box_id']; ?>','draggable','<? echo $row['box_top']; ?>','<? echo $row['box_left']; ?>','<? echo $row['box_width']; ?>','<? echo $row['box_height']; ?>','<? echo $row["content"]; ?>');</script>

 <? 
 } 
     ?> 
  </div>

</form>

Answer 1

Easyway将textareas创建为数组

<textarea name="textarea[]"></textarea>
<textarea name="textarea[]"></textarea>
<textarea name="textarea[]"></textarea>

和循环

<?php
  foreach($_POST['textarea'] as $i => $value)
  {
     //Save Here
  }
?>

你将避免遗失textareas

Answer 2

使用此方法：

<textarea name="somename[]"></textarea>
<textarea name="somename[]"></textarea>
<textarea name="somename[]"></textarea>
<textarea name="somename[]"></textarea>

并且在PHP中你将拥有数组：

$somename[0]; $somename[1]; $somename[2]; $somename[3]; ...

所以，你必须改变你的代码（js）

newdiv.innerHTML = "</div><br><textarea id='"+i +"'  onDblClick='editor1("+i+")' name='textarea[]' class='textarea1' style='position:absolute; top:10px;left:0px;overflow-y: auto;background-color:transparent;border: 1px solid #00FFFF; '>text here"+i+"</textarea>";

和（在PHP中）

$q=count($_POST["textarea"]); 
for($m=0; $m<$q;$m++)

mysql插入js数组创建了textareas

2 个答案: