Computer Programming web Web programming Tips



Form Validation For Multiple cloned elements. JS and PHP code

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




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.

Demo:

  
  
  

 

My eBooks on Amazon.com

Subscribe to our mail list to receive free code examples.

Comments

No comments yet.

Add Comment

* Required information
(never displayed)
 
Smile Sad Huh Laugh Mad Tongue Crying Grin Wink Scared Cool Sleep Blush Unsure Shocked
 
1000
Which is darker: black or white?
 
Enter answer:
Captcha
Refresh
 
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