2014-02-27 49 views
0

我与Zend框架1.12工作,我需要能够动态地从一个子表单添加和删除字段,在这种情况下,我们的超链接到父“促销”相关联。如何从页面加载后添加的元素中检索输入值?

我还没有找到一种方法来实现动态添加和Zend公司通过删除元素,和罕见的教程中我发现,声称这样做是半个十年前,当我尝试他们不工作。

所以我在做什么是存储我需要一个Zend隐藏的输入字段一起工作,然后用JSON数据处理我提交后的链接。效率不高,但这是我迄今为止唯一的工作。

下面是我的工作的一段代码:

假设像一种形式:

<form action="/promos/edit/promo_id/15" method="POST" id="form_edit"> 
    <!-- input is Zend_Form_Element_Hidden --> 
    <input type="hidden" id="link_array" value="{ contains the JSON string }"/> 

    <button id="add_link">Add Link</button> 
</form> 

的目的是,每次添加链接按钮被按下时,表单字段添加以允许用户输入将与特定项目相关联的新超链接。

这里的功能:

// add links 
$('#add_link').click(
    function(e) { 
     e.preventDefault(); 
     link = '<div class="p_link new_link">' + 
        '<div class="element_wrap">' + 
        '<label for="link_name" class="form_label optional">Text: </label>' + 
        '<input type="text" id="new_link_name" name="link_name"/>' + 
        '</div>' + 
        '<div class="element_wrap">' + 
        '<label for="link_http" class="form_label optional">http://</label>' + 
        '<input type="text" id="new_link_http" name="link_http"/>' + 
        '</div>' + 
        '<div class="element_wrap">' + 
        '<button class="submit delete_link">Delete</button>' + 
        '</div>' + 
       '</div>'; 

     $('#add_link').prev().after(link); 
    } 
); 

现在,我需要做的是在提交,对每一位new_link类元素,采取链接名称和HTTP参考,并放置在一个JSON对象。下面的代码,因为我有这么远(我知道我没有在这点表示两个输入空格):

$('#submit').click(
    function(e) { 
     e.preventDefault(); 
     var link_array = []; 

     var new_links = document.getElementsByClassName('new_link'); 
     $.each(new_links, function() { 
      console.log(this); 
      var n = $(this).children('#new_link_name').text(); 
      console.log(n); 
      link_array.push({'link_name':n}); //'link_http':h 
     }); 
     console.log(JSON.stringify(link_array)); 
    } 
); 

我的问题是:var new_links = document.getElementsByClassName('new_link');将收集所有新加入的new_link元素,但它不会拉入任何已输入到文本字段的值。

我需要知道我如何明显地绑定我对输入字段的值属性所做的任何输入,因为现在我输入到这些新元素中的任何内容都会被抛出,并且只有当字段看起来为空时。

回答

1
$('#submit').click(
    function(e) { 
     e.preventDefault(); 
     var link_array = []; 

     var new_links = $('.new_link'); 
     $.each(new_links, function() { 
      console.log(this); 
      var n = $(this).find('input').val(); // you need input values! This line //is changed... 
      console.log(n); 
      link_array.push({'link_name':n}); //'link_http':h 
     }); 
     console.log(JSON.stringify(link_array)); 
    } 
); 

的jsfiddle:http://jsfiddle.net/DZuLJ/

编辑:不能有多个IDS(使类每个输入和目标类,如果你想链接的名称和HTTP的)

+0

哈。当然,二小时打我的头在墙上后,我终于过类似的解决方案迷迷糊糊的,使用querySelector()值来代替。无论如何,先生,指向你。 –

+0

NP,这里是更新版本 - 用类:http://jsfiddle.net/DZuLJ/2/(生成html改变,太),你可以很容易地从每个输入获得价值,希望。 – sinisake

相关问题