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で動的に追加された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>
于 2013-03-05T10:59:25.467 に答える
0

この$( "#"+id ).draggable({ コードでは、がグローバルスコープにないundefined id errorために取得します。var id

creatediv1次に、関数が値を設定するため、グローバルに設定した場合、idの値を取得することはありませんが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 に答える
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 に答える