Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

So, I have successfully created my dynamic custom meta box that can add and remove form field using jquery, but I have no idea on how to save its entered data and retrieve it in the front end.

Have been around for some days to get the answer and found that using foreach loop and array is the way to achieve it, but I can not figured out how to implement it in my code. Sorry, I am still a newbie on php and jquery.

Here is my custom meta box and its javascript.

Custom Meta Box

add_action( 'add_meta_boxes', 'trying_touse_jqueryclone' );
add_action( 'save_post', 'save_trying_touse_jqueryclone' );

function trying_touse_jqueryclone() {

add_meta_box('Clone The Form', 'I Try To Clone A Form', 'i_am_calling_theform_function', 'product', 'normal', 'high');


//Add FORM
function i_am_calling_theform_function($post) {

$valie = get_post_meta($post->ID, '_clone_value_trying_key', true);

echo '<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>';
echo '<div id="p_scents">';
echo '<p>';
echo '<label for="p_scnts"><input type="text" id="trying_to_field"  name="trying_to_field" value="'.$valie.'" /> <br/></label>';
echo '</p>';
echo '</div>';


// Save The data
function save_trying_touse_jqueryclone($post_id) {

  $post_ID = $_POST['post_ID'];

  $myvalie = sanitize_text_field( $_POST['trying_to_field'] );

  // either using 
  add_post_meta($post_ID, '_clone_value_trying_key', $myvalie, true); 

 // or

    update_post_meta($post_ID, '_clone_value_trying_key', $myvalie);


add_action( 'admin_enqueue_scripts', 'i_am_jquery_cloner' );
// Function for loading your custom stylesheet

function i_am_jquery_cloner() {

    wp_register_script( 'myjquerycloner', plugins_url( '/jquerycloner.js', __FILE__ ), array( 'jquery' ) );

    wp_enqueue_script( 'myjquerycloner' );

My JavaScript

  $(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents p').size() + 1;        
  $('#addScnt').live('click', function() {
  $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
  return false;

$('#remScnt').live('click', function() { 
if( i > 2 ) {
return false;


Any help will be much appreciated.


share|improve this question

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.