如何分別從HTML元素可爲特定HTML元素字段使用JavaScript和jQuery獲取值

Question

沒有與命名的兩個字段添加項目1和添加項目2

當在按鈕1的用戶點擊元素值從添加項目1和添加項目2複製到另一個地方用命名項目列表1。

現在我想通過點擊按鈕1和添加項目2到項目清單通過點擊按鈕2 2從添加項目獲得值1到項列表1。

我的小提琴的工作代碼鏈接在評論。我已經縮進4個空格的所有代碼，但它不允許我粘貼我的小提琴鏈接的帖子。

如果我在這篇文章中犯了一個錯誤，請編輯它。感謝您的幫助。

Answer 1

添加一個唯一的標識符來分隔2點的形式，我在這裏使用一個數據屬性的形式在什麼名單，以確定把元素，使用find和this選擇相對於所提交的表單

內容HTML：

<!-- Item List 1 --> 
<div id="grocery-list"> 
    <h3>Item List1</h3> 
    <ul> 
    <li class="empty">Empty</li> 
    </ul> 
</div> 

<!-- Item List 2--> 
<div id="grocery-list2"> 
    <h3>Item List2</h3> 
    <ul> 
    <li class="empty">Empty</li> 
    </ul> 
</div> 

<!-- Add Item 1 --> 
<form data-id="grocery-list"> 
    <fieldset> 
    <legend style="width :500px; margin-top:0px">Add Item 1</legend> 
    <label for="item">Item Name:</label> 
    <br> 

    <!-- Input text field --> 
    <input class="item" type="text" style="cursor: pointer;" value=" "> 

    <label></label> 
    <br> 
    <br> 
    <select style="position:absolute;margin-left:65px;margin-top:-18px;cursor: pointer;" class="first_select"> 
     <option class="item" sty>mg</option> 
     <option class="item" value="saab">ml</option> 

    </select> 
    <select style="position:absolute;margin-left:120px;margin-top:-18px; cursor: pointer;" class="second_select"> 
     <option>STAT(once immediately)</option> 
     <option>OD(once in a day)</option> 
     <option>BiD(twice in a day)</option> 
     <option>TiD(thrice in a day)</option> 
     <option>QiD(four times a day)</option> 
    </select> 

    <select style="position:absolute;margin-left:290px;margin-top:-18px;cursor: pointer;" class="third_select"> 
     <option>1 day</option> 
     <option>2 days</option> 
     <option>3 days</option> 
    </select> 

    <input class="item" type="checkbox" style="position:absolute;margin-left:360px;margin-top:-15px;cursor: pointer;"> 
    <label style="position:absolute;margin-left:375px;margin-top:-16px">Before Food</label> 
    <input class="item" type="checkbox" style="position:absolute;cursor: pointer;margin-left:460px;margin-top:-15px"> 
    <label style="position:absolute;margin-left:475px;margin-top:-16px">After Food </label> 

    <button class="button button3" style="position:absolute;margin-left:0px;margin-top:20px; width:100px; height:60px ">Button 1</button> 
    </fieldset> 
</form> 

<!-- Add Item 2 --> 

<form data-id="grocery-list2"> 
    <fieldset> 
    <legend style="width :500px; margin-top:100px">Add Item 2</legend> 
    <label for="item">Item Name:</label> 
    <br> 

    <!-- Input text field --> 
    <input class="item" type="text" style="cursor: pointer;" value=" "> 

    <label></label> 
    <br> 
    <br> 
    <select style="position:absolute;margin-left:65px;margin-top:-18px;cursor: pointer;" class="first_select"> 
     <option class="item" sty>mg</option> 
     <option class="item" value="saab">ml</option> 

    </select> 
    <select style="position:absolute;margin-left:120px;margin-top:-18px; cursor: pointer;" class="second_select"> 
     <option>STAT(once immediately)</option> 
     <option>OD(once in a day)</option> 
     <option>BiD(twice in a day)</option> 
     <option>TiD(thrice in a day)</option> 
     <option>QiD(four times a day)</option> 
    </select> 

    <select style="position:absolute;margin-left:290px;margin-top:-18px;cursor: pointer;" class="third_select"> 
     <option>1 day</option> 
     <option>2 days</option> 
     <option>3 days</option> 
    </select> 

    <input class="item" type="checkbox" style="position:absolute;margin-left:360px;margin-top:-15px;cursor: pointer;"> 
    <label style="position:absolute;margin-left:375px;margin-top:-16px">Before Food</label> 
    <input class="item" type="checkbox" style="position:absolute;cursor: pointer;margin-left:460px;margin-top:-15px"> 
    <label style="position:absolute;margin-left:475px;margin-top:-16px">After Food </label> 

    <button class="button1 button3" style="position:absolute;margin-left:0px;margin-top:20px; width:100px; height:60px ">Button 2</button> 
    </fieldset> 
</form> 

JS：

 $("button").button(); 

    function addToList(items, list) { 
    var $list = $('#'+list).find("ul"); 
    $list.empty(); 
    jQuery.each(items, function(i, text) { 
     $list.append("<li>" + text + " <a class='delete_li'>&#10006;</a> </li>"); 
    }); 
    } 

    $("body").on("click", ".delete_li", function() { 
    $(this).closest("li").remove(); 
    }); 

    $("form").on("submit", function(a) { 
    list = $(this).attr('data-id'); 
    a.preventDefault(); 
    $(this).find("fieldset").effect("transfer", { 
     to: "#"+list+" ul", 
     complete: function() { 
     var items = []; 
     // add text box values first 
     $(this).find('input[type=text]').each(function() { 
      items.push($(this).val()); 
     }); 
     // then add checkbox label texts if checked 
     $(this).find("input:checked").each(function() { 
      items.push($(this).next().html()); 
     }); 
     // finally, add the selected option values 
     $(this).find('select :selected').each(function() { 
      items.push($(this).val()); 
     }); 
     addToList(items,list); 
     } 
    }); 
    }); 

演示：http://jsfiddle.net/6kjwouhd/1/

Answer 2

在你addToList()功能（以及在effect()的to參數），無論你選擇哪一個按鈕，你接收一覽表設置爲#grocery-list ul這是項目列表1。

您可能需要修改它來識別已被點擊了哪個按鈕，或許通過將按鈕編號（1或2）作爲參數傳遞給addToList，這樣就可以使用正確的列表ID（grocery-list或grocery-list2）。