Web programming TipsBy Sergey Skudaev
I use PHP to dynamically create a JavaScript code for cloning input elements on the web page. Each input field is an element of array.
Form Validation code:
<script type="text/javascript">
function valForm()
{
var count = 0;
var e = document.getElementById('myform').elements;
for(var i = 0; i < e.length; i++)
{
if(e[i].value=="")
{
e[i].style.color="#5C3D00";
e[i].style.background="#FFFF99";
e[i].style.border="3px solid #ff0000";
count++;
}
}
if(count>0)
return false;
}
</script>
Returning to Default colors on focus:
<script type="text/javascript">
function toDefault(x)
{
x.style.color="black";
x.style.border="1px solid #aaa";
x.style.background="#efefef";
}
</script>
PHP and JavaScript Code for cloning of 3 records on the form:
<?php
print('<script type="text/javascript">');
print(' $(document).ready(function(){');
for($i=0; $i<3; $i++)
{
print(' var k=0; ');
print(' $("#plus'.$i.'").click(function(){');
print(' $(".input100B'.$i.':last").attr("id","afirst'.$i.'" + k);');
print(' $(".input100C'.$i.':last").attr("id","alast'.$i.'" + k);');
print(' $(".clonned'.$i.':last").clone().appendTo("#poll'.$i.'");');
print(' k++; ' );
print('});');
print(' $("#minus'.$i.'").click(function(){');
print(' if(k > 0) ');
print('{');
print(' $(".clonned'.$i.':last").remove();');
print(' k--; ');
print('}');
print(' });');
}
print(' });');
print('</script>');
print('</head>');
?>
Right click on this web page and see what JavaScript code was created with PHP in the loop above. Plus buttons and minus buttons ids in the loop are "plus0", "plus1", "plus2" and "minus0", "minus1", "minus2". The ID for the first name input will be "afirst00", "afirst10", "afirst20" for original fields and "afirst01", "afirst11", "afirst21" for the first clones of first name input; "afirst02", "afirst12", "afirst22" for the second clones and so on. The ids for the last name fields: "alast00", "alast10", "alast20" and "alast01", "alast11", "alast21" so on...
HTML:
<form method="post" id="myform" name="myform"
action="<?php echo $_SERVER['PHP_SELF']; ?>" >
<table style="width:60%; margin-left:auto; margin-right:auto;">
<?php
for($n=0; $n<3; $n++)
{
print('<tr><td colspan="2" style="text-align:left;">');
print('<img src="images/plus25.jpg" id="plus'.$n.'"> ');
print('<img src="images/minus25.jpg" id="minus'.$n.'">');
print('</td>');
print('</tr>');
print('<tr><td colspan="3" id="poll'.$n.'" style="padding:0;">');
print('<table class="clonned'.$n.'" style=" margin:0; border:0; width:100%;">');
print('<tr><td style="text-align:left;">');
print('<label class="user">First Name'.$n.':</label>');
print('<input class="input100B'.$n.'" type="text" name="first[]" ');
print('id="afirst'.$n.'" onFocus="toDefault(this);"/></td>');
print('<td style="text-align:left;">');
print('<label class="user">Last Name'.$n.':</label>');
print('<input type="text" class="input100C'.$n.'" name="last[]" size="30" id="alast'.$n.'"');
print('onFocus="toDefault(this);"/></td></tr>');
print('</table>');
print('</td></tr>');
}
?>
<tr><td style="text-align:center;">
<input type="submit" name="submit" value="Save"
onClick="return valForm();"/>
</td></tr>
</table>
</form>
