Jquery Duplicate Fields Form Submit with PHP

How to submit jquery duplicate 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!

Jquery Duplicate Fields

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
}

By Rodney

I’m Rodney D Clary, a web developer. If you want to start a project and do a quick launch, I am available for freelance work. info@quickmysupport.com

One thought on “Jquery Duplicate Fields Form Submit with PHP

Leave a Reply

Your email address will not be published. Required fields are marked *