You just have to modify the name attribute of the generated input fields from p_clr
to p_clr[]
. $_POST['p_clr']
will then be an array with the values of all the input fields.
public function prod_colors_box() {
global $post, $p_clr;
$p_clr = array();
$p_clrs = get_post_meta( $post->ID, 'p_clr' );
?>
<div id="p_colors">
<?php foreach( $p_clrs as $key => $p_clr ) { ?>
<p>
<label for="p_clr_<?php echo $key; ?>">
<strong>Color:</strong> <input id="p_clr_<?php echo $key; ?>" name="p_clr[]" value="<?php echo $p_clr; ?>" />
</label>
</p>
<?php } ?>
</div>
<h4><a href="#" id="addClr">Add Another Color</a></h4>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(function() {
var clrDiv = $('#p_colors');
var j = $('#p_colors p').size() + 1;
$('#addClr').live('click', function() {
$('<p><label for="p_clr_' + j + '"><strong>Color:</strong> <input
id="p_clr_' + j + '" name="p_clr[]" size="20" value="<?php echo $p_clrs; ?>" />
<></label> <a href="#" id="remClr">Remove</a></p>').appendTo(clrDiv);
j++;
return false;
});
$('#remClr').live('click', function() {
if( j > 2 ) {
$(this).parents('p').remove();
j--;
} return false;
});
});
</script>