通过javascript传递动态文本框到php

问题描述：

我有一个页面，作为用户可以创建动态文本框的大小和可拖动使用jquery点击一个按钮。通过javascript传递动态文本框到php

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

答

从上面的讨论中，我了解到，您在获得在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-05 11:08:20

@BarryWatts，意味着你没有得到任何东西在'print_r'？如果是这样，那么尝试从java脚本中为你的动态文本区域指定名称，比如'my_text_area []'，**不要**忘记最后两个'[]'，并从PHP尝试'print_r（$ _POST [my_text_area]）;'或者简单地从你的代码改变'name ='textarea [“+ i +”]''到'name ='textarea []''并且尝试上面的代码。 – 2013-03-05 11:23:39

是试过这个，仍然没有返回任何东西，我试过var_dump（$ _ POST ['textarea']）;并通过执行alert（document.body.outerHTML）返回NULL – 2013-03-05 11:33:13

答

在这个$("#"+id).draggable({代码，你会得到undefined id error因为var id是不是在全球范围之内。

和第二，如果你把它在全球因为creatediv1功能设置ID值，但它会执行时HTML满载，其中作为document.ready代码执行时，HTML被加载，从而ID值将永远是你将永远不会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>

我没有得到任何错误的 “$（ ”＃“ + ID）.draggable（{” 是工作在所有细浏览器 – 2013-03-05 10:42:26

你将不得不原谅我缺乏的JavaScript知识我只是使用代码片段，我已经发现在网络上，并试图让他们一起工作。所有工作，如果我做一个JavaScript调用，所以显示页面数据显示添加了textar名称的文本框ea [0]，textarea [1] ...，我似乎无法找到一种方法，通过$ _post – 2013-03-05 10:45:07

@BarryWatts查看更新的答案，看看它的帮助，将此传递给PHP脚本.. – 2013-03-05 10:51:37

答

试试这个：

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] ... 

    } 
?>

嗨，这也没有返回。我试过var_dump（$ _ POST ['textarea']）;并通过执行alert（document.body.outerHTML）返回NULL – 2013-03-05 11:33:44

;在draggable中，我可以看到textareas在表单之外。我如何让他们落入表格之内 – 2013-03-05 11:52:29

通过javascript传递动态文本框到php

相关推荐