I am setting up a meta box that controls the number of ingredients for a recipe. As each recipe will have a different number of ingredients I decided to use a simple text input and button to set the number of ingredients and have jQuery dynamically add the inputs for that "X" number.

I know I need to use jQuery form but am unsure of how to return the html into the meta box correctly. I have a response div set up but not sure how to handle the html.

Can i pass the value from the text input into a php function that uses a for loop to print out all the inputs for the ingredients? Or do I need to print all of the html with jQuery?

Hope that makes sense.


my jQuery that works:

        var num = jQuery('input:text[name=_num_ingredients]').val();

        var sections = '';
        for(var i=1;i<=num;i++){

            section = '<div id="ingredient-' + i + '" class="ingredient-input">\n';
            section += '<div class="ingredient-amount alignleft">\n';
                section += '<label for="_ingredient_amount_' + i + '">Amount: </label>\n';
                section += '<input type="text" name="_ingredient_amount_' + i + '" />&nbsp;\n';
            section += '</div>\n';
            section += '<div class="ingredient-measurement alignleft">\n';
                section += '<label for="_ingredient_measurement_' + i + '">Measurement: </label>\n';
                section += '<input type="text" name="_ingredient_measurement_' + i + '" />&nbsp;\n';
            section += '</div>\n';
            section += '<div class="ingredient-name alignleft">\n';
                section += '<label for="_ingredient_name_' + i + '">Ingredient: </label>\n';
                section += '<input type="text" name="_ingredient_name_' + i + '" />&nbsp;\n';
            section += '</div>\n';
            section += '<div class="clear"></div>\n';
            section += '</div>\n';

            sections += section;
        }//end for

        //add the new input sections
        //show the ingredients inputs

        return false;       

But now I can't figure out how to save the meta data correctly.

Here's my for loop:

    //loop through all ingredients and update them accordingly
    for($i=1; $i<=$num; $i++):

        $amt = '_ingredient_amount_'.$i;
        $meas = '_ingredient_measurement_'.$i;
        $name = '_ingredient_name_'.$i;

        //set ingredients array for each iteration
        $post_meta['_ingredient_amount_'.$i] = $_POST['_ingredient_amount_'.$i];
        $post_meta["{$meas}"] = $_POST["{$meas}"];
        $post_meta[$name] = $_POST[$name];

        //update meta data
        foreach( $post_meta as $key => $value ):
            if( $value ):
                if( get_post_meta( $post_id, $key, FALSE) ): // If the custom field already has a value
                    update_post_meta( $post_id, $key, $value );        
                else: // If the custom field doesn't have a value
                    add_post_meta( $post_id, $key, $value );
                //delete_post_meta( $post_id, $key ); // Delete if blank


I know I am missing something in the syntax to get the $_POST values. Any ideas?


I was failing to pass the $post variable into my function - silly me. Now it all works correctly. Thanks for all your help!

1 Answer 1


You could clone an existing field with jQuery and append it to the form. You'll also have to handle cases where the number of ingredients is fewer than the number of fields, and you'll have to use jQuery's remove. Here's a simple example of cloning a field:

    // get # of fields that already exist
    // (change this to match whatever type of fields you have)
    var count = $('#metabox-form input[type="text"]').length;
    // you'll want to check if count is > or < requested quantity and possibly remove,
    // or clone (in a loop to add multiple fields):
    $('#metabox-form input[type="text"]:last')
            name:'field-' + (count + 1),
            id:'field-' + (count + 1)

    return false;                   
  • I posted my solution. But now have a new issue - which I also added to my original question. I cannot figure out the syntax needed to save the $_POST values. Any help is appreciated!
    – dkmojo
    Dec 17, 2011 at 22:15
  • Sorry its taken me a while to get back to this. This is a personal project and I've been swamped with work lately. I like your solution better than mine, much more elegant - and I don't have to set a max number of input fields. Thanks!
    – dkmojo
    Jan 21, 2012 at 14:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.