waqas adil waqas adil - 1 year ago 56
CSS Question

How to get values separately from html elements to specfic html element field using java script and jquery

There are two fields named with Add item 1 and Add item 2

When the user click on the Button 1 the elements values from Add item 1 and Add item 2 copied to another place named with item list 1.

Now I want to get the values from Add item 1 to item list 1 by clicking on the Button 1 and Add item 2 to item list 2 by clicking on the Button 2.

The working code link of my fiddle is in comment. I have indent all code by 4 spaces but its not allowing me to paste my fiddle link in the post.

If I have made a mistake in this post please edit it. Bundle of thanks for your help.

Answer Source

Add a unique identifier to separate your 2 forms ,I use here a data attribute on the form to identify in what list to put the elements, use find and this to select the content relative to the submitted form

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);
      }
    });
  });

demo:http://jsfiddle.net/6kjwouhd/1/