how to set selected li value to input with jquery

Question

I don't know how to use jquery the get the result:

1. click the li will add select class and remove others selected li

2. set the select li datavalue to input(id:sizevalue)

3. make sure the li list should be selected one when click submit button

    <form name="form"> <style> #sizelist ul{list-style-type:none;} #sizelist ul li{float:left;display:inline;margin-right:5px;width:auto;overflow:hidden;} #sizelist ul li a{display:block;border:1px solid #CCCCCC;padding:5px 6px 5px 6px;margin:1px;} #sizelist ul li a:hover{border:2px solid #FF6701;margin:0px;} #sizelist .select a{border:2px solid #FF6701;margin:0px;} </style> <ul id="sizelist"> <li datavalue="S"><a href="javascript:void(0);">S</a></li> <li datavalue="M"><a href="javascript:void(0);">M</a></li> <li datavalue="L"><a href="javascript:void(0);">L</a></li> <li datavalue="XL"><a href="javascript:void(0);">XL</a></li> </ul> <input id="sizevalue" size="15" name="size" type="text" /> <input type="button" value="submit"/> </form> 

plz help

Answer 1

Try this one:

HTML

<ul id="sizelist">
  <li><a href="#" data-value="S">S</a></li>
  <li><a href="#" data-value="M">M</a></li>
  <li><a href="#" data-value="L">L</a></li>
  <li><a href="#" data-value="XL">XL</a></li>
</ul>

<input id="sizevalue" size="15" name="size" type="text" />

jQuery

$('#sizelist a').on('click', function(e) {
  e.preventDefault();

  // This removes the class on selected li's
  $("#sizelist li").removeClass("select");

  // adds 'select' class to the parent li of the clicked element
  // 'this' here refers to the clicked a element
  $(this).closest('li').addClass('select');

  // sets the input field's value to the data value of the clicked a element
  $('#sizevalue').val($(this).data('value'));
});

Take note of the changes that I made:

-- replaced datavalue with data-value so as to be able to use .data() method of jQuery

-- transferred the data-value attributes to the a elements because they're the ones who actually gets clicked

-- replaced the javascript:void(0) in the href because it just does not do anything

Answer 2

The following will achieve want you want:

HTML

<form name="size-form">
    <ul id="sizelist">
      <li data-value="S"><a href="#">S</a></li>
      <li data-value="M"><a href="#">M</a></li>
      <li data-value="L"><a href="#">L</a></li>
      <li data-value="XL"><a href="#">XL</a></li>
    </ul>

    <input id="sizevalue" size="15" name="size" type="text" />
    <input type="submit" value="submit"/>
</form>

JavaScript

$("#sizelist").on("click", "a", function(e){
    e.preventDefault();
    var $this = $(this).parent();
    $this.addClass("select").siblings().removeClass("select");
    $("#sizevalue").val($this.data("value"));
})

$("form[name=size-form]").submit(function(e) {
    //do your validation here
    if ($(this).find("li.select").length == 0) {
        alert( "Please select a size." );
        e.preventDefault();
    }
});

jsFiddle Demo

You should use the data-* attribute to store the data.

Answer 3

I think this code will work for you:

$('#sizelist a').on('click', function(event) {
    // Clear previous selection
    $('#sizelist li').removeClass('selected');

    // Add selection css class
    $(event.target).parent('li').addClass('selected');

   // Change value in input
   $('#sizevalue').val($(event.target).parent('li').attr('datavalue'));
});

NB. The preferred way of adding additional attributes in HTML is to prefix them with data-.