mysql insert array of js created textareas - php

Question

I have a page where the user can add dynamically created textareas that are nested in divs.
I am trying to insert the added textareas
the problem i have is if I add 3 textareas and then remove the second one and then submit the amount of submitted textareas is 2 but the id of the two areas are 1 and 3 and when i try to add with a for loop the 2nd textarea has no value
how else can I insert into the db the posted text areas except with a for loop.
heres the code
php insert code:
<?
$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 code:
<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

The Easyway is create textareas as array
<textarea name="textarea[]"></textarea>
<textarea name="textarea[]"></textarea>
<textarea name="textarea[]"></textarea>
and in loop
<?php
foreach($_POST['textarea'] as $i => $value)
{
//Save Here
}
?>
and you will avoid missing textareas

Answer 2

Use this method:
<textarea name="somename[]"></textarea>
<textarea name="somename[]"></textarea>
<textarea name="somename[]"></textarea>
<textarea name="somename[]"></textarea>
and than in PHP you will have array:
$somename[0]; $somename[1]; $somename[2]; $somename[3]; ...
so, you must to change in your code (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>";
and (in PHP)
$q=count($_POST["textarea"]);
for($m=0; $m<$q;$m++)