GET name from LI and load element

Question

I have problem with my code i leave it here.

I want to get name of clicked element li using $(this) but i don't know why it doesn't work - i don't have any respond from attr name. Someone can explain me how it's work?

Thank you in advance for your answer. :)

  $(document).ready(function() {
        $("li").click(function() {
            var valueof = $(this).attr('name');
            document.getElementById("forms").style.display = "block";
            $("#forms").append= valueof;
            $("#forms").load("all.php #"+valueof);
       });
    });

#first {
background-color: #f4511e;
}

#second {
    background-color: #2c6f01;
}
#first, #second {
    display: inline-block;
    border-radius: 4px;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 28px;
    padding: 20px;
    width: 350px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
    vertical-align:middle
}

#first span, #second span  {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

#first span:after, #second span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

#first:hover span, #second:hover span {
  padding-right: 25px;
}

#first:hover span:after, #second:hover span:after {
  opacity: 1;
  right: 0;
}

.button:hover > ul {
    display:block;
}


.button > ul {
    display:none;
    list-style-type:none;
    padding:0;
    margin:0;
}

.button > li > ul > li {
    position:relative;
    background-color:#EEE;
}

.button > ul > li:hover {
    background-color:#99001A;   
}

.button > ul > li:hover > a {
    color:#E69F00;
}
#forms {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="first" class="button" >
  <span>Add values</span>
    <ul>
      <li name="student">Add student</li>
      <li name="author">Add author</li>
      <li name="title">Add title</li>
  </ul>
</button><br/>
<div id="forms" style="display:none;"></div>

I want to load value of attr name from clicked li. I declared it here > var valueof = $(this).attr('name'); and just want to saw this on div $("#forms").append= valueof; div is here — rogo, Nov 26 '16 at 12:56
You are using append wrong. It should be `$("#forms").append(valueof);` — Eran Shabi, Nov 26 '16 at 12:57

score 1 · Accepted Answer · edited May 23 '17 at 12:13

1

Try this:

location.href = ("#" + valueof);

Instead of:

$("#forms").load("all.php #"+valueof);

You might want to read about anchor jumping using JavaScript.

Also you are using append wrong, it should be:

$("#forms").append(valueof);

Instead of:

$("#forms").append = valueof;

Here is the docs for the append function.

edited May 23 '17 at 12:13

Community

1
1

answered Nov 26 '16 at 12:59

Eran Shabi

11,361
6
27
47

I can't use load function? Load works fine but i don't know why it load only 1st li option because i want to load it from another file – rogo Nov 26 '16 at 13:12
No, jQuery's load is an event handler. It will not load anything but wait for somthing to load and then do something. http://api.jquery.com/load/ – Eran Shabi Nov 26 '16 at 13:14

GET name from LI and load element

1 Answers1