CODEWITHSUNDEEP
javascriptjqueryhtml
Sanjeev Badoni
Sanjeev Badoni

Reputation: 95

Dynamic html list elements dynamically

Hi I'm trying to create dynamic

  • but it got disappear after some time please help. I'm performing this task onclick of search button. Please refer my code below.

    <!DOCTYPE HTML>
<html>
<head>    
     <script>
      function handleClick()
      {
        var ul = document.getElementById("list");    
        for (var i=0; i<5; i++){    
            var li=document.createElement('li');    
            ul.appendChild(li);
            li.innerHTML=li.innerHTML + "ABC";    
        }
      }
     </script>
</head>
<body>    
    <section class="webdesigntuts-workshop">
        <form action="" method="" name="myform" onSubmit="handleClick()">   
            <!--<input name="Submit"  type="submit" value="Update" />   -->
            <input name="Submit" type="search" placeholder="Search...">      
            <button>Search</button>
        </form>
        <div>
            <ul id="list">
            </ul>
        </div>
    </section>
</body>
</html>

    Upvotes: 0

    Views: 1243

    • Answers (4)

    Anvesh
    Anvesh

    Reputation: 31

      <section class="webdesigntuts-workshop">
    <form action="" method="" name="myform" >
        <input  name="Submit" type="search" placeholder="Search...">
        <input  type="button" name="Search" value="Search" onClick="handleClick()"/>
 </form>
<div>
    <ul id="list"></ul>
</div>
 </section>
 check This one its working fine.

    Upvotes: 0

    Maurice Perry
    Maurice Perry

    Reputation: 32831

    Its because the form is submitted after you click. To prevent this, you can either return false:

    onSubmit="return handleClick()"

      function handleClick()
      {
        var ul = document.getElementById("list");    
        for (var i=0; i<5; i++){    
            var li=document.createElement('li');    
            ul.appendChild(li);
            li.innerHTML=li.innerHTML + "ABC";    
        }
          return false;
      }

    Or pass the event and call preventDefault:

    onSubmit="handleClick(event)"

      function handleClick(e)
      {
          e.preventDefault();
        var ul = document.getElementById("list");    
        for (var i=0; i<5; i++){    
            var li=document.createElement('li');    
            ul.appendChild(li);
            li.innerHTML=li.innerHTML + "ABC";    
        }
      }

    Upvotes: 0

    Harshit Jain
    Harshit Jain

    Reputation: 492

    The problem is that you are using input type='submit' and it is sending a post request.

    Use input type='button' and your issue will be solved.

    Upvotes: 0

    Sridhar R
    Sridhar R

    Reputation: 20408

    Try this 

    <section class="webdesigntuts-workshop">
    <form action="javascript:handleClick()" method="post" name="myform">
        <!--<input name="Submit" type="submit" value="Update" />-->
        <input name="Submit" type="search" placeholder="Search...">
        <button>Search</button>
    </form>
    <div>
        <ul id="list"></ul>
    </div>
</section>

    DEMO

    Upvotes: 1

    Related Questions