web-dev-qa-db-ja.com

メタボックスの上部にあるフォームに基づいてXメタボックス入力を追加します。正しい方法は？

レシピの材料の数を制御するメタボックスを設定しています。各レシピは異なる数の材料を持つので、私は簡単なテキスト入力とボタンを使って材料数を設定し、jQueryにその「X」数の入力を動的に追加させることにしました。

私はjQueryのフォームを使用する必要があることを知っていますが、メタボックスにHTMLを正しく戻す方法がわからないです。応答divが設定されていますが、HTMLの処理方法がわかりません。

テキスト入力の値を、forループを使用して材料のすべての入力を出力するphp関数に渡すことはできますか？それとも、私はすべてのHTMLをjQueryで印刷する必要がありますか？

それが理にかなっていることを願っています。

ありがとうございます。

私のjQueryはうまくいく：

    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;       
    });

しかし、今私はメタデータを正しく保存する方法を理解することはできません。

これが私のforループです。

    //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;

$ _POST値を取得するための構文に欠けていることがわかっています。何か案は？

編集-------------------------------

$ post変数を関数に渡していませんでした - ばかげています。今それはすべて正しく動作します。ご協力ありがとうございます！

jquerymetaboxforms
2
dkmojo

JQueryを使って既存のフィールドを複製し、それをフォームに追加することができます。また、要素の数がフィールドの数より少ない場合も処理する必要があります。また、jQueryのremoveを使用する必要があります。これは、フィールドを複製する簡単な例です。

$('#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