waqas adil waqas adil - 2 months ago 7
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

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/

Comments