CODEWITHSUNDEEP
javascriptjqueryhtml
marwa m
marwa m

Reputation: 53

set value of input vield without showing it

when i click on span remove address it removes it from ui but not from the list and the printed value of removeItem is an empty string "". and how can i pass the stringList to input value="" with id clientAdd without showing it on the input .

var stringList = [];
$("#clientAdd").keypress(function(e) {
  if (e.which === 13) {
    $(".target").append("<a href='#' class='tag'>" + "<span class='removeAddress'>" + '+' + "</span>" + this.value + "</a>");
    stringList.push(this.value);
    this.value = "";
    console.log(stringList);
    $(document).on("click", ".removeAddress", function() {
      var removeItem = $(this).parent().parent().val();
      console.log(removeItem);
      stringList.splice($.inArray(removeItem, stringList), 1);
      $(this).parent().remove();

      console.log(stringList);
    });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="form-group">
    <div class="col-md-12 col-sm-12">
      <label>Address *</label>
      <div class="target"></div>
      <input type="text" id="clientAdd" name="address" value="" class="form-control required">
    </div>
  </div>
</div>

Upvotes: 0

Views: 767

Answers (2)

prasanth
prasanth

Reputation: 22500

Try this

  1. Its parent text not a parent of parent .so you need get the text value of the parent use with $(this).parent().clone().children().remove().end().text() .It will get the parent text only .end() documentation
  2. After removing clicked element .you are create the array using remaining removeddress via map function 

var stringList = [];
$("#clientAdd").keypress(function(e) {
  if (e.which === 13) {
    $(".target").append("<a href='#' class='tag'>" + "<span class='removeAddress'>" + '+' + "</span>" + this.value + "</a><br>");
    stringList.push(this.value);
    this.value = "";
    console.log(stringList);
    $(document).on("click", ".removeAddress", function() {
      var removeItem = $(this).parent().clone().children().remove().end().text();
      console.log(removeItem);
      stringList = $('.removeAddress').map(function(){
        return $(this).parent().clone().children().remove().end().text()
      }).get()
      $(this).parent().remove();
      console.log(stringList);
    });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
  <div class="form-group">
    <div class="col-md-12 col-sm-12">
      <label>Address *</label>
      <div class="target"></div>
      <input type="text" id="clientAdd" name="address" value="" class="form-control required">
    </div>
  </div>
</div>

Upvotes: 1

Eduard Void
Eduard Void

Reputation: 2714

you can hide whole input or you can use input type="hidden". Usually you have one input displayed for humans as a event trigger and input hidden for the value which is processed on the server side

<div class="row">
          <div class="form-group">
            <div class="col-md-12 col-sm-12">
              <label>Address *</label>
              <div class="target"></div>
              <input type="text" id="clientAdd" name="address" value="" class="form-control required">
              <input type="hidden" id="clientAddCode" name="addressCode">
            </div>
          </div>
</div>


var stringList = [];
$("#clientAdd").keypress(function (e) {
if (e.which === 13) {
     $(".target").append("<a href='#' class='tag'>" +"<span class='removeAddress'>"+'+'+"</span>"+ this.value + "</a>");
        stringList.push(this.value);
        this.value = "";
        console.log(stringList);
        $("#clientAddCode").val(stringList);
        $(document).on("click", ".removeAddress", function() {
            var removeItem = $(this).parent().parent().val();
            console.log(removeItem);
            stringList.splice( $.inArray(removeItem, stringList ) ,1 );
            $(this).parent().remove();

            console.log(stringList);
            $("#clientAddCode").val(stringList);
        });
}
});

Upvotes: 0

Related Questions