Adding a 'add another' option in Wordpress custom meta box using jquery $.post

Question

I'm creating a wordpress plugin, with a custom post type and in that post type a custom meta box.

Inside the meta box, I have a form that let's the user input: Date, Media, Title.

The form looks like this:

$mc_date = get_post_meta($_GET['post'],'mc_date',true);
$mc_media = get_post_meta($_GET['post'],'mc_media',true);
$mc_title = get_post_meta($_GET['post'],'mc_title',true);

echo '<form id="add_media_form">';
echo '<table>';
echo    '<tr>';
echo        '<td>Date</td><td>Media</td><td>Title</td>';
echo    '</tr>';
echo  '<tr>';
echo        '<td><input type="text" name="mc_date" value="'.$mc_date.'" class="datepicker"/></td>';
echo        '<td><input type="text" name="mc_media" value="'.$mc_media.'" /></td>';
echo        '<td><input type="text" name="mc_title" value="'.$mc_title.'" /></td>';
echo        '<td><a href="#" class="add_new_media" rel="'.WP_PLUGIN_URL.'/mc"><img src="'.WP_PLUGIN_URL.'/mc/plus.png" /></a></td>';
echo  '</tr>';
echo '</table>';
echo '</form>';
echo '<div class="addmedianotify"></div>';

jquery:

jQuery('.add_new_media').click(function(e){
    var plug = jQuery(this).attr('rel');
    e.preventDefault();
    jQuery.post(plug + '/ajax_add_media.php',jQuery('#add_media_form').serialize(),function(data){
        jQuery('.addmedianotify').html('<span>'+data+'</span>');
    });
});

What I want to do, is that when the user click the 'add_new_media' link/image a new set of textboxes for date, media and title will appear.

My main concern is that, what's the trick to name those inputs which is dynamic. and to save and retrieves the custom data in it.

James James · Accepted Answer · 2012-06-30T21:35:51

Because the page will still update when the user clicks 'Update' you would need to be able to save your fields on save_post and in your ajax. Using ajax for this might not be the best method as you're making more work for yourself by needing to save that data twice. I would ditch the ajax and simply use an html array so you can add on fields and make one submission when the user clicks 'Update'. To add new rows as the user needs, I would simply clone your tr and append it to the table in your click event. Something like...

The PHP & HTML

<a href="#" class="add_new_media"><img src="'.WP_PLUGIN_URL.'/mc/plus.png" /></a>
<table>
    <tr>
        <td>Date</td>
        <td>Media</td>
        <td>Title</td>
        <td></td>
    </tr>
    <?php
    //$mcs will be a multi-dimensional array with this method
    $mcs = get_post_meta($post->ID,'mcs',true);

    //Loop through each set of saved mc data (date, media, and title per item) and output inputs so the saved values can be edited and resaved. 
    foreach ($mcs as $mc) : ?>
    <tr>
        <td><input type="text" name="mc[][date]" value="<?php echo $mc['date'] ?>" class="datepicker"/></td>
        <td><input type="text" name="mc[][media]" value="<?php echo $mc['media'] ?>" /></td>
        <td><input type="text" name="mc[][title]" value="<?php echo $mc['title'] ?>" /></td>
        <td><a href="#" class="remove">Remove</a></td>
    </tr>
    <?php endforeach ?>
</table>

The Javascript

<script>
    (function($){
        //Grab the first 
        $('.add_new_media').click(function(e) {
            //Use the first tr as a cookiecutter and add another cookie to the bowl :) 
            $('table tr:first-child')
                .clone()
                .appendTo($('table'))
                .find('input')
                    .val('')
        }
        $('.remove').click(function(){
            $(this).parent().parent().remove()
        })
    })(jQuery)
</script>

The PHP upon form submission

<?php
    if ($_POST) : 

        //$_POST['mc'] is a multi-dimensional array of all the date/media/title input rows
        print_r($_POST['mc']);
        /*
            ..would look something like
            Array (
                [0] => Array (
                    'date' => 'some value',
                    'media' => 'some value',
                    'title' => 'some value'
                ),
                [1] => Array ( ... ),
                [2] => Array ( ... ) ... and so on
            )
        */

        //RUN INPUT VALIDATION!!

        //Update the list
        update_post_meta($post->ID, 'mcs', $_POST['mc']);
    endif;
?>

Adding a 'add another' option in Wordpress custom meta box using jquery $.post

1 Answers