通过javascript将动态文本框传递给php

时间：2013-03-05 10:36:08

标签： php javascript jquery arrays

我有一个页面，用户可以通过点击按钮创建可调整大小和可拖动的动态文本框。

我想传递文本框中的数据加上页面上的高度宽度和位置，从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>

3 个答案:

答案 0 :(得分：1)

从上面的讨论中我了解到你在PHP中动态添加Textboxes数据时遇到问题，我建议尝试使用

<?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>

答案 1 :(得分：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>

答案 2 :(得分：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] ...

   }
?>
相关问题
最新问题