CODEWITHSUNDEEP
javascriptjquery
user2656489
user2656489

Reputation: 13

how to set selected li value to input with jquery

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

Upvotes: 1

Views: 53463

Answers (3)

jammykam
jammykam

Reputation: 16990

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.

Upvotes: 3

Arnelle Balane
Arnelle Balane

Reputation: 5487

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

Upvotes: 11

Streamside
Streamside

Reputation: 332

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-.

Upvotes: 0

Related Questions