Jquery Duplicate Fields Form Submit with PHP

How to submit jquery duplicate/clone field values to form with PHP. It’s very basic level code, I had implemented this using relCopy.js jquery plugin to duplicating the existing field. I hope it’s useful for you. Thanks!

Perfect Javascript Form Validation using Regular Expressions
Jquery Validation with Regular Expressions
Server Side Form Validation using Regular Expressions

 

Javascript and HTML Code
Here input text name hobby[] is array.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="reCopy.js"></script>
<script type="text/javascript">
$(function(){
  var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';
$('a.add').relCopy({ append: removeLink});	
});
</script>

<form method="post" action="">
  <p class="clone">
    <input type="text" name="hobby[]" class='input'/>
  </p>
  <p><a href="#" class="add" rel=".clone">Add More</a></p>
  <input type="submit" value="Submit" name="submit" />
</form>

index.php
Contains simple PHP Code that extracting array hobby[] values.

<?php
if(isset($_POST['submit'])) {
if($_POST['hobby'])
{
  $array=$_POST['hobby'];
  foreach($array as $hobby)
  {
    if(strlen($hobby)>0)
    {
      echo '<h3>'.$hobby.'<h3/>';
    }
  }
}
}
?>

CSS

body {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:13px;
}
.remove {
  color:#cc0000
}
.input {
  border: solid 1px #006699;
  padding:3px
}

 

Please follow and like us:

Add a Comment