0

在我的表单中，用户可以单击一个按钮来创建输入字段。在每个创建的输入字段中，他们可以单击“添加媒体链接”按钮在下面创建另一个输入字段。他们可以添加任意数量的媒体链接，或者根本不添加。第一组输入字段也是可排序的。我有用户界面工作，我只是想知道如何去处理它。

现在，我基本上是抓取从第一组输入字段输入的所有值（也就是代码中的“thestepvalues”），然后抓取从第二组输入值中输入的所有值（又名“链接”在代码），然后对其进行 URL 编码并将其序列化以发送到我的 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!
    )

任何帮助将不胜感激，在此先感谢

-- 24x7

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 回答