javascript 및 jquery를 사용하여 HTML 요소에서 특정 HTML 요소 필드로 값을 개별적으로 가져 오는 방법

두 가지 양식을 구분하기 위해 고유 식별자를 추가합니다. 여기에서는 양식의 데이터 속성을 사용하여 요소를 넣을 목록을 식별 하고 제출 된 양식과 관련된 콘텐츠를 사용 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/