JQuery Append input name

Question

I have a dropdown list with multi input choices. Users can pick whatever they like and each time they pick, their choice will show in the field.

Problem: 1. I try to get a value name of an input by var inputName = $('input').attr('name'); , but somehow it does work. Please give a hand on this issue.

After they pick, if they change their mind and want to delete one or more what they have chosen, how can I create a X button next to a product for deleting?

jsfiddle

Thanks!

JF

$(function() {
        $('.field-store').click(function(){
            $('.dropdown-menu').slideToggle('fast');
    })
    $('.dropdown-menu input').click(function() {
            $('.txt-title').hide();
        var inputName = $('input').attr('name');
        $('.multi-selects').append('inputName ');
    })
})

HTML

<div class="field-store">
  <span class="txt-title">Pick what you like</span>
  <span class="multi-selects"></span>
</div>
<ul class="dropdown-menu">
  <li>
    <input type="checkbox" name="cheese">Cheese</input>
  </li>
  <li>
    <input type="checkbox" name="tomatoes">Tomatoes</input>
  </li>
  <li>
    <input type="checkbox" name="mozarella">Mozzarella</input>
  </li>
  <li>
    <input type="checkbox" name="mushrooms">Mushrooms</input>
  </li>
  <li>
    <input type="checkbox" name="pepperoni">Pepperoni</input>
  </li>
  <li>
    <input type="checkbox" name="onions">Onions</input>
  </li>
</ul>

CSS

.field-store {
  width: 50%;
  height: 40px;
  background: white;
  border: 1px solid black;
}
.dropdown-menu {
  display: none;
}

Jesse · Accepted Answer · 2019-09-12 20:16:27Z

1

There are 2 lines that are causing this.

The first is $('.multi-selects').append('inputName ');. You are appending a string to the element rather than the value of inputName. For this just simply remove the single quotes like so:

$('.multi-selects').append(inputName + " ");

The second is your inputName definition. You are using the input tag as a selector, meaning it is consistently getting the first instance of this tag. I would recommend adding an input variable, (in this case e), to the function in your click() event handler like this:

$('.dropdown-menu input').click(function(e) {})

And also change your inputName definition to this:

var inputName = $(e.target).attr('name');

I have also edited your jsfiddle with these changes here. Hope this helps!

answered Sep 12, 2019 at 20:16

Jesse

1,4414 gold badges13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

abcid d Over a year ago

Thanks, Jesse for pointing out what were caused the issue! I didn't realize these. Would you please take a look at the #2: After they pick, if they change their mind and want to delete one or more what they have chosen, how can I create a X button next to a product for deleting? This one I have no idea how. Thanks

Jesse Over a year ago

I personally think it would be more efficient to remove it if they just uncheck the box, but if that won't work for your situation, then you should create a div containing the name of the product along with either a link or a button with either X or × in between the tags, then make it so when you click the X, simply run $(this).remove()

abcid d Over a year ago

Thanks, Jesse so much. I will try your suggestion out.

NarasimhaBamandla · Accepted Answer · 2019-09-12 20:42:59Z

0

  $('.dropdown-menu input').click(function() {
      $('.txt-title').hide();
      var inputName = $(this).attr('name');
      if($(this).prop('checked')){
         $('.multi-selects').append('<span>'+ inputName + '</span>' );
      }else{ 
        $('.multi-selects span:contains('+inputName+')').remove()
    } 
  })

answered Sep 12, 2019 at 20:42

NarasimhaBamandla

91 bronze badge

1 Comment

abcid d Over a year ago

Thanks NarasimhaBamandla! I really like your code, it works so well. Thanks again!

Collectives™ on Stack Overflow

JQuery Append input name

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related