web-dev-qa-db-fra.com

Ajoutez des entrées X de méta-boîte basées sur la forme en haut de la méta-boîte, comment le faire correctement?

Je suis en train de mettre en place une méta-boîte qui contrôle le nombre d'ingrédients pour une recette. Comme chaque recette aura un nombre différent d'ingrédients, j'ai décidé d'utiliser une simple entrée de texte et un bouton pour définir le nombre d'ingrédients et de jQuery ajouter dynamiquement les entrées pour ce nombre "X".

Je sais que je dois utiliser le formulaire jQuery, mais je ne sais pas comment retourner correctement le code HTML dans la boîte méta. J'ai une réponse div mis en place, mais je ne sais pas comment gérer le code HTML.

Puis-je passer la valeur de l'entrée de texte dans une fonction php qui utilise une boucle for pour imprimer toutes les entrées pour les ingrédients? Ou dois-je imprimer tout le code HTML avec jQuery?

J'espère que cela a du sens.

Merci!

mon jQuery qui fonctionne:

    jQuery('#add-ingredients').click(function(event){
        event.preventDefault();                                        
        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
        jQuery('#ingredients').html(sections);
        //show the ingredients inputs
        jQuery('#ingredients').show('slow');

        return false;       
    });

Mais maintenant, je ne peux pas comprendre comment sauvegarder les métadonnées correctement.

Voici ma boucle pour:

    //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 );
                endif;
            else:
                //delete_post_meta( $post_id, $key ); // Delete if blank
            endif;  
        endforeach; 

    endfor;

Je sais que quelque chose dans la syntaxe me manque pour obtenir les valeurs de $ _POST. Des idées?

MODIFIER-------------------------------

J'étais incapable de passer la variable $ post dans ma fonction - moi stupide. Maintenant tout fonctionne correctement. Merci pour votre aide!

jquerymetaboxforms
2
dkmojo

Vous pouvez cloner un champ existant avec jQuery et l'ajouter au formulaire. Vous devrez également gérer les cas où le nombre d'ingrédients est inférieur au nombre de champs, et vous devrez utiliser la variable remove de jQuery. Voici un exemple simple de clonage d'un champ:

$('#quantity-form').submit(function(){
    // 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')
        .clone(false)
        .attr({
            name:'field-' + (count + 1),
            id:'field-' + (count + 1)
        })
        .appendTo('#metabox-form');

    return false;                   
});
1
Milo