0

私のフォームでは、ユーザーはボタンをクリックして入力フィールドを作成できます。作成された各入力フィールド内で、[メディア リンクを追加] ボタンをクリックして、その下に別の入力フィールドを作成できます。メディア リンクを好きなだけ追加することも、まったく追加しないこともできます。入力フィールドの最初のセットもソート可能です。ユーザー インターフェイスは動作していますが、それを処理する方法を知りたいと思っています。

現在、基本的には、最初の入力フィールドのセット (コードの「thestepvalues」とも呼ばれます) から入力されたすべての値を取得し、次に入力値の 2 番目のセット (コードの「リンク」とも呼ばれます) から入力されたすべての値を取得しています。コード) を URL エンコードし、シリアライズして my process.php ファイルに送信します。コードは以下のとおりです。

$("#new_post").submit(function(e){  
    e.preventDefault();  

    //enter each of the values for 'the step' input field into an array
    var thestepvalues = $("input[name='thestep\\[\\]']")
          .map(function(){return $(this).val();}).get();

    //enter each of the values for each 'links' input field into an array     
    var linkvalues = $("input[name='link\\[\\]']")
          .map(function(){return $(this).val();}).get();

     //this will basically convert everything entered into the steps as well as the links fields
     //into URL appropriate strings to pass on to the process.php file
    var i, string="";
    for(i=0;i<thestepvalues.length; i++){
        string += "thesteps[]=" + encodeURI(thestepvalues[i]) + "&";        
    }

    for(i=0;i<linkvalues.length; i++){
        string += "links[]=" + encodeURI(linkvalues[i]) + "&";      
    }


    //send the data from the string (both kinds of input fields) as well as any
    //other input fields (that aren't dynamic) from the form
    $.post("process.php",  string + $("#new_post").serialize(),
    function(data){
        if(data.email_check == 'invalid'){

                $("#message_post").html("<div class='errorMessage'>Sorry " + data.name + ", " + data.email + " is NOT a valid e-mail address. Try again.</div>");
        } else {
            $("#message_post").html("<div class='successMessage'>" + data.email + " is a valid e-mail address. Thank you, " + data.name + ".</div>");
            }
    }, "json");    
});

フォームに入力されたデータのサンプルについて、どのリンクが親入力フィールドに属しているかを示すにはどうすればよいですか? 親入力フィールドはソート可能なjquery ui要素であることを念頭に置いてください。

入力されたデータのサンプル セットを次に示します。子リンクがどの入力フィールドに属しているかを知る方法がないことがわかります。

[thesteps] => Array
    (
        [0] => This is really the second input field, but dragged up to the first position.
        [1] => This is the second input field, but used to be in the first position.
        [2] => this is the third input field
    )

[links] => Array
    (
        [0] => this is the first (child) link for the first position.
        [1] => this is actually the (child) link for the third field!
    )

どんな助けでも大歓迎です、事前に感謝します

-- 24 時間 365 日

4

1 に答える 1

1

HTML5 カスタム データ属性を使用して、リンクされた各セットの値を同じ数値に設定できます。

例えば：

<input id="1" data-newinput-id="1" />
<input id="2" data-newinput-id="1" />

<input id="3" data-newinput-id="2" />
<input id="4" data-newinput-id="2" />

入力が再配置された場合でも、次のように jQuery で属性値を取得することで一致させることができます。

var id = $(this).attr("data-newinput-id"); // 1
于 2012-12-29T05:23:07.157 に答える