Computer Programming web Web programming Tips

Form Validation For Multiple cloned elements. JS and PHP code

By Sergey Skudaev

Happy Amazon Prime Day July 12 - Exclusive Deals for Prime Members - Start Free 30-Day Trial

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++)
		e[i].style.border="3px solid #ff0000";

  		return false;

Returning to Default colors on focus:

<script type="text/javascript">
function toDefault(x)
{"black";"1px solid #aaa";"#efefef";

PHP and JavaScript Code for cloning of 3 records on the form:


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('	 $("#minus'.$i.'").click(function(){');
print(' if(k > 0) ');
print('	$(".clonned'.$i.':last").remove();');
print(' k--; ');
print('   });');
print('   });');


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


<form method="post" id="myform" name="myform"
action="<?php echo $_SERVER['PHP_SELF']; ?>" >
<table   style="width:60%; margin-left:auto; margin-right:auto;">
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('<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.'"');
<tr><td style="text-align:center;">
<input type="submit" name="submit" value="Save"
onClick="return valForm();"/>

It is important to use image instead of button. When I try to use button for plus to clone a record, the page was submitted when I click it. That is why I changed the button to the image of the button.




Subscribe to our mail list to receive free code examples.


No comments yet.

Add Comment

* Required information
(never displayed)
Smile Sad Huh Laugh Mad Tongue Crying Grin Wink Scared Cool Sleep Blush Unsure Shocked
What is the next number: 10, 12, 14, ..?
Enter answer:
Enter code:
Notify me of new comments via email.
Remember my form inputs on this computer.
I have read and understand the privacy policy. *
I have read and agree to the terms and conditions. *
Powered by Commentics

My eBooks on

Learn C++ Programming By Examples

Learn SQL Programming By Examples

Learn PHP Programming by Examples

Visual Basic Programming By Examples

How to Build Your Own Web Site from Scratch