0

我有一个页面，用户可以在单击按钮时使用 jquery 创建可调整大小和可拖动的动态文本框。

我想将文本框中的数据以及它们在页面上的高度宽度和位置从 javascript 传递到 php。

我对此感到有点困惑，任何帮助表示赞赏。

这是我的代码

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<?
if($_SERVER['REQUEST_METHOD'] == "POST")  {
    $posted=$_POST['textarea']; 
    echo "posted=".$new_post."<br>";
}
?>
<head>
<style>
      body{background-color:#ccc;}
      .dragbox{position:absolute;top:20px;width:320px; height:0;padding: 0.0em; margin:25px; border:0;cursor:move; z-index:1;display: block; }
      .textarea1{ width: 300px; height: 300px; padding: 0.5em;}
      #handle{
          display: block; 
          height: 16px; 
          width: 100px; 
          background-color: red;
          position: relative;
          top:10px;
          font-size:10px;
          }
    </style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />  
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>  
</head>

<body>
<form id="frmMain" name="frmMain" enctype="multipart/form-data" action="dynamic_div.php" method="post">
<script>        
    var i=0;    
    var p=75;
    function creatediv1(id) {
        id=id+i;
        var xp=xp+i;
        var newdiv = document.createElement('div');
        newdiv.setAttribute('id', id);
        newdiv.setAttribute('class', 'dragbox');
        newdiv.setAttribute('contenteditable','true');






     newdiv.style.position = "relative";
     newdiv.style.top = p;
     newdiv.style.cursor='move';
     newdiv.innerHTML = "<div id='handle'>Drag me into position</div></div><br><textarea id="+i +" name='textarea["+i+"]' class='textarea1' width='300' style='overflow-y: auto;background-color:transparent;border: 2px dashed #000; '>some text here</textarea>";


    document.body.appendChild(newdiv);
    $(function() {                      
        $( "#"+id ).draggable({                                 
         // Find position where image is dropped.
            stop: function(event, ui) {
                // Show dropped position.
                var Stoppos = $(this).position();
                $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
                alert("left="+Stoppos.left+"top="+Stoppos.top);
            }
        }); 

        $("#"+i).resizable({
            stop: function(event, ui) {
            var width = ui.size.width;
            var height = ui.size.height;
            alert("width="+width+"height="+height);
            }
        });

        $("#"+i).draggable({handle:"#handle"});
    });  

    i++;
    p=p+25;
    }
    </script>
    <input id="btn1" type="button" value="Add New textbox" onclick="creatediv1('draggable');" />      
    <input type="submit" value="Submit"  >
   </form>
</body>
</html>
4

3 回答 3

1

从上面的讨论中，我了解到您在获取 PHP 中动态添加的文本框数据时遇到了问题，我可以建议尝试使用

<?php
print_r($_POST["textarea"]); //just for debugging
foreach ($_POST["textarea"] as $text_area) {
//do what you want with $text_area
}
?>

编辑

从java脚本更改

....
newdiv.innerHTML = "<div id='handle'>Drag me into position</div></div><br><textarea id="+i +" name='textarea[]' class='textarea1' width='300' style='overflow-y: auto;background-color:transparent;border: 2px dashed #000; '>some text here</textarea>";

然后尝试上面的php代码。

编辑 1

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<?
if($_SERVER['REQUEST_METHOD'] == "POST")  {
    $posted=$_POST['textarea']; 
    echo "posted=".$new_post."<br>";
}
?>
<head>
<style>
      body{background-color:#ccc;}
      .dragbox{position:absolute;top:20px;width:320px; height:0;padding: 0.0em; margin:25px; border:0;cursor:move; z-index:1;display: block; }
      .textarea1{ width: 300px; height: 300px; padding: 0.5em;}
      #handle{
          display: block; 
          height: 16px; 
          width: 100px; 
          background-color: red;
          position: relative;
          top:10px;
          font-size:10px;
          }
    </style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />  
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>   
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>  
</head>

<body>
<form id="frmMain" name="frmMain" enctype="multipart/form-data" action="dynamic_div.php" method="post">
<script>        
    var i=0;    
    var p=75;
    function creatediv1(id)
    {
        id=id+i;
        var xp=xp+i;
        var newdiv = document.createElement('div');
        newdiv.setAttribute('id', id);
        newdiv.setAttribute('class', 'dragbox');
        newdiv.setAttribute('contenteditable','true');
        newdiv.style.position = "relative";
        newdiv.style.top = p;
        newdiv.style.cursor='move';
        newdiv.innerHTML = "<div id='handle'>Drag me into position</div></div><br><textarea id="+i +" name='textarea[]' class='textarea1' width='300' style='overflow-y: auto;background-color:transparent;border: 2px dashed #000; '>some text here</textarea>";

        //Updated this line
        document.getElementById("frmMain").appendChild(newdiv);
        $(function()
        {
            $( "#"+id ).draggable(
            {
                stop: function(event, ui)
                {
                    var Stoppos = $(this).position();
                    $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
                    $('.textarea1').append("left="+Stoppos.left+"top="+Stoppos.top);
                }
            }); 

            $("#"+i).resizable(
            {
                stop: function(event, ui)
                {
                    var width = ui.size.width;
                    var height = ui.size.height;
                    $('.textarea1').append("width="+width+"height="+height);
                }
            });

            $("#"+i).draggable({handle:"#handle"});
        });  

        i++;
        p=p+25;
    }
    </script>
    <input id="btn1" type="button" value="Add New textbox" onclick="creatediv1('draggable');" />      
    <input type="submit" value="Submit"  >
   </form>
</body>
</html>
于 2013-03-05T10:59:25.467 回答
0

尝试这个 ： 

name='textarea[]'

<?php
   echo "<pre>";
   print_r($_POST["textarea"]); //just for debugging
   echo "<pre>";

   for($i=0; $i<count($_POST["textarea"]);$i++) {
     //$_POST["textarea"][i] ...

   }
?>
于 2013-03-05T11:24:56.257 回答
0

在此$( "#"+id ).draggable({ 代码中，您将获得undefined id error因为var id不在全局范围内。

其次，如果你在 Global 中设置它，你将永远不会获得 id 的值，因为creatediv1函数设置ID了值，但它会在 html 完全加载时document.ready执行，因为代码将在 html 被加载时执行，所以ID值总是会出现错误，

尝试

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<?
if($_SERVER['REQUEST_METHOD'] == "POST")  {
    $posted=$_POST['textarea']; 
    echo "posted=".$new_post."<br>";
}
?>
<head>
<style>
      body{background-color:#ccc;}
      .dragbox{position:absolute;top:20px;width:320px; height:0;padding: 0.0em; margin:25px; border:0;cursor:move; z-index:1;display: block; }
      .textarea1{ width: 300px; height: 300px; padding: 0.5em;}
      #handle{
          display: block; 
          height: 16px; 
          width: 100px; 
          background-color: red;
          position: relative;
          top:10px;
          font-size:10px;
          }
    </style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />  
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>   
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>  
</head>

<body>
<form id="frmMain" name="frmMain" enctype="multipart/form-data" action="dynamic_div.php" method="post">
<script>        
    var i=0;    
    var p=75;
    function creatediv1(id)
    {
        id=id+i;
        var xp=xp+i;
        var newdiv = document.createElement('div');
        newdiv.setAttribute('id', id);
        newdiv.setAttribute('class', 'dragbox');
        newdiv.setAttribute('contenteditable','true');
        newdiv.style.position = "relative";
        newdiv.style.top = p;
        newdiv.style.cursor='move';
        newdiv.innerHTML = "<div id='handle'>Drag me into position</div></div><br><textarea id="+i +" name='textarea["+i+"]' class='textarea1' width='300' style='overflow-y: auto;background-color:transparent;border: 2px dashed #000; '>some text here</textarea>";

        document.body.appendChild(newdiv);
        $(function()
        {
            $( "#"+id ).draggable(
            {
                stop: function(event, ui)
                {
                    var Stoppos = $(this).position();
                    $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
                    $('.textarea1').append("left="+Stoppos.left+"top="+Stoppos.top);
                }
            }); 

            $("#"+i).resizable(
            {
                stop: function(event, ui)
                {
                    var width = ui.size.width;
                    var height = ui.size.height;
                    $('.textarea1').append("width="+width+"height="+height);
                }
            });

            $("#"+i).draggable({handle:"#handle"});
        });  

        i++;
        p=p+25;
    }
    </script>
    <input id="btn1" type="button" value="Add New textbox" onclick="creatediv1('draggable');" />      
    <input type="submit" value="Submit"  >
   </form>
</body>
</html>
于 2013-03-05T10:39:43.607 回答