The following problem: I want to be able to click a button and let images appear following a preset scheme - a certain amount of images per row.
First, I made a simple version using a div and breaks (DomDiv.php). Then I wanted to incorporate the same idea in table form (DomTable.php).
The first one succeeded, the other one won't.
Here's code to the one that does work(<!-- m --><a class="postlink" href="http://www.roughdot.nl/test/JS/DomDiv.php">http://www.roughdot.nl/test/JS/DomDiv.php</a><!-- m -->) (<!-- m --><a class="postlink" href="http://www.roughdot.nl/test/JS/DomDiv.php">http://www.roughdot.nl/test/JS/DomDiv.php</a><!-- m -->):
(this works for me in Opera 7.02, Netscape 7.02 and MS POS 5.5
)
<HTML>
<HEAD>
<TITLE>DOM DIV</TITLE>
<SCRIPT language="JavaScript" type="text/javascript">
<!--
var $imgsperrow = 3; // Static variable for the amount of images per row
var $numImgs = 0;
var $numImgRows = 0;
function moreImgs()
{
/* Defining the html components in DOM style */
var $tarGet = document.getElementById('writeroot'); // The target tag.
var $newImg = document.createElement("IMG"); // An img with a unique name.
$newImg.setAttribute("alt", "");
$newImg.setAttribute("name", "Src_" +$numImgs);
$newImg.setAttribute("src", "http://forums.webdeveloper.com/images/smilies/smile.gif");
var $br = document.createElement("BR");
var $newInput2 = document.createElement("INPUT"); // A hidden input with a name and value.
$newInput2.setAttribute("name", "Src_" +$numImgs+ "_" +$numImgRows);
$newInput2.setAttribute("type", "hidden");
$newInput2.setAttribute("value", "Hello, this is hidden info to be sent to the server.");
// Add the img and the input to the target.
$tarGet.appendChild($newImg);
$tarGet.appendChild($newInput2);
if(($imgsperrow - ($numImgs % $imgsperrow)) == 1)
{
// break if the end of the row is reached.
$tarGet.appendChild($br);
$numImgRows++;
}
$numImgs++;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<?php
echo "<PRE>";
print_r($_POST);
echo "</PRE>";
?>
<FORM action="<?php echo $PHP_SELF; ?>" method="POST">
<DIV id="writeroot"></DIV>
<INPUT type="button" value=http://www.webdeveloper.com/forum/archive/index.php/"Give me more fields!" onClick="moreImgs()"/>
<INPUT type="submit" value="Send form"/>
</FORM>
</BODY>
</HTML>
This is the one that doesn't work(<!-- m --><a class="postlink" href="http://www.roughdot.nl/test/JS/DomTable.php">http://www.roughdot.nl/test/JS/DomTable.php</a><!-- m -->) (<!-- m --><a class="postlink" href="http://www.roughdot.nl/test/JS/DomTable.php">http://www.roughdot.nl/test/JS/DomTable.php</a><!-- m -->):
<HTML>
<HEAD>
<TITLE>DOM TABLE</TITLE>
<SCRIPT language="JavaScript" type="text/javascript">
<!--
var $imgsperrow = 3;
var $numImgs = 0;
var $numImgRows = 0;
function moreImgs()
{
var $tarGet = document.getElementById("writerow_" +$numImgRows);
var $tarGet2 = document.getElementById("writeroot");
var $newImg = document.createElement("IMG");
$newImg.setAttribute("alt", "");
$newImg.setAttribute("src", "http://forums.webdeveloper.com/images/smilies/smile.gif");
var $td = document.createElement("TD");
var $tr = document.createElement("TR");
$tr.setAttribute("id", "writerow_" +$numImgRows);
var $br = document.createElement("BR");
var $newInput2 = document.createElement("INPUT");
$newInput2.setAttribute("type", "hidden");
$newInput2.setAttribute("value", "http://forums.webdeveloper.com/images/smilies/smile.gif");
$newImg.setAttribute("name", "Src_" +$numImgs);
$newInput2.setAttribute("name", "Src_" +$numImgs+ "_" +$numImgRows);
$td.appendChild($newImg);
$td.appendChild($newInput2);
$tarGet.appendChild($td);
if(($imgsperrow - ($numImgs % $imgsperrow)) == 1)
{
$numImgRows++;
$tr.appendChild($td);
$tarGet2.appendChild($tr);
}
else
{
$tarGet.appendChild($td);
}
$numImgs++;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<?php
echo "<PRE>";
print_r($_POST);
echo "</PRE>";
?>
<FORM action="<?php echo $PHP_SELF; ?>" method="POST">
<TABLE border="1" id="writeroot">
<TR id="writerow_0"></TR>
</TABLE>
<INPUT type="button" value=http://www.webdeveloper.com/forum/archive/index.php/"Give me more fields!" onClick="moreImgs()"/>
<INPUT type="submit" value="Send form"/>
</FORM>
</BODY>
</HTML>
I get an error on $tarGet after generating two images (the second of which isn't properly displayed either).
I suspect it has something to do with the scope of declared variables and $numImgRows.
Any help is greatly appreciated.
First, I made a simple version using a div and breaks (DomDiv.php). Then I wanted to incorporate the same idea in table form (DomTable.php).
The first one succeeded, the other one won't.
Here's code to the one that does work(<!-- m --><a class="postlink" href="http://www.roughdot.nl/test/JS/DomDiv.php">http://www.roughdot.nl/test/JS/DomDiv.php</a><!-- m -->) (<!-- m --><a class="postlink" href="http://www.roughdot.nl/test/JS/DomDiv.php">http://www.roughdot.nl/test/JS/DomDiv.php</a><!-- m -->):
(this works for me in Opera 7.02, Netscape 7.02 and MS POS 5.5
)<HTML>
<HEAD>
<TITLE>DOM DIV</TITLE>
<SCRIPT language="JavaScript" type="text/javascript">
<!--
var $imgsperrow = 3; // Static variable for the amount of images per row
var $numImgs = 0;
var $numImgRows = 0;
function moreImgs()
{
/* Defining the html components in DOM style */
var $tarGet = document.getElementById('writeroot'); // The target tag.
var $newImg = document.createElement("IMG"); // An img with a unique name.
$newImg.setAttribute("alt", "");
$newImg.setAttribute("name", "Src_" +$numImgs);
$newImg.setAttribute("src", "http://forums.webdeveloper.com/images/smilies/smile.gif");
var $br = document.createElement("BR");
var $newInput2 = document.createElement("INPUT"); // A hidden input with a name and value.
$newInput2.setAttribute("name", "Src_" +$numImgs+ "_" +$numImgRows);
$newInput2.setAttribute("type", "hidden");
$newInput2.setAttribute("value", "Hello, this is hidden info to be sent to the server.");
// Add the img and the input to the target.
$tarGet.appendChild($newImg);
$tarGet.appendChild($newInput2);
if(($imgsperrow - ($numImgs % $imgsperrow)) == 1)
{
// break if the end of the row is reached.
$tarGet.appendChild($br);
$numImgRows++;
}
$numImgs++;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<?php
echo "<PRE>";
print_r($_POST);
echo "</PRE>";
?>
<FORM action="<?php echo $PHP_SELF; ?>" method="POST">
<DIV id="writeroot"></DIV>
<INPUT type="button" value=http://www.webdeveloper.com/forum/archive/index.php/"Give me more fields!" onClick="moreImgs()"/>
<INPUT type="submit" value="Send form"/>
</FORM>
</BODY>
</HTML>
This is the one that doesn't work(<!-- m --><a class="postlink" href="http://www.roughdot.nl/test/JS/DomTable.php">http://www.roughdot.nl/test/JS/DomTable.php</a><!-- m -->) (<!-- m --><a class="postlink" href="http://www.roughdot.nl/test/JS/DomTable.php">http://www.roughdot.nl/test/JS/DomTable.php</a><!-- m -->):
<HTML>
<HEAD>
<TITLE>DOM TABLE</TITLE>
<SCRIPT language="JavaScript" type="text/javascript">
<!--
var $imgsperrow = 3;
var $numImgs = 0;
var $numImgRows = 0;
function moreImgs()
{
var $tarGet = document.getElementById("writerow_" +$numImgRows);
var $tarGet2 = document.getElementById("writeroot");
var $newImg = document.createElement("IMG");
$newImg.setAttribute("alt", "");
$newImg.setAttribute("src", "http://forums.webdeveloper.com/images/smilies/smile.gif");
var $td = document.createElement("TD");
var $tr = document.createElement("TR");
$tr.setAttribute("id", "writerow_" +$numImgRows);
var $br = document.createElement("BR");
var $newInput2 = document.createElement("INPUT");
$newInput2.setAttribute("type", "hidden");
$newInput2.setAttribute("value", "http://forums.webdeveloper.com/images/smilies/smile.gif");
$newImg.setAttribute("name", "Src_" +$numImgs);
$newInput2.setAttribute("name", "Src_" +$numImgs+ "_" +$numImgRows);
$td.appendChild($newImg);
$td.appendChild($newInput2);
$tarGet.appendChild($td);
if(($imgsperrow - ($numImgs % $imgsperrow)) == 1)
{
$numImgRows++;
$tr.appendChild($td);
$tarGet2.appendChild($tr);
}
else
{
$tarGet.appendChild($td);
}
$numImgs++;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<?php
echo "<PRE>";
print_r($_POST);
echo "</PRE>";
?>
<FORM action="<?php echo $PHP_SELF; ?>" method="POST">
<TABLE border="1" id="writeroot">
<TR id="writerow_0"></TR>
</TABLE>
<INPUT type="button" value=http://www.webdeveloper.com/forum/archive/index.php/"Give me more fields!" onClick="moreImgs()"/>
<INPUT type="submit" value="Send form"/>
</FORM>
</BODY>
</HTML>
I get an error on $tarGet after generating two images (the second of which isn't properly displayed either).
I suspect it has something to do with the scope of declared variables and $numImgRows.
Any help is greatly appreciated.