CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Lucka
Lucka

Reputation: 343

show form field on clicking a link with javascript/jquery

How can I show a form field by clicking a link , i want to show the field (with jquery/javascript) on samee place of link, so that link disappears and form box appears? Thanks.

Upvotes: 2

Views: 7020

Answers (3)

arifa nafees
arifa nafees

Reputation: 21

Here is the simple code by using HTML and JavaScript.

<body>
<a href="#" id="mylink" onclick="myfunction();">MY</a>
<div id="myform" style="display:none">
    <form>
        <label>Name</label>
        <input type="text">
        <input type="submit">
    </form>
 </div>
<script>
    function myfunction(){
    document.getElementById("myform").style.display = "block";
    document.getElementById("mylink").style.display = "none";
    }
</script>
</body>

Thank's

Upvotes: 2

Greg
Greg

Reputation: 1426

Hey, here's a simple example:

CSS:

.myclassname .form{display:none;}

HTML:

<div class="myclassname">
   <a href="#" class="mylink">Link</a>
   <div class="form">
      <input type="text" value="" name="myinput" id="myinput"/>
   </div>
</div>

jQuery:

$(function(){
   $('.myclassname .mylink').click(function(){
      $(this).hide();
      $('.myclassname .form').show();
      return false;
   });
});

Cheers

G.

Upvotes: 4

Oswald
Oswald

Reputation: 31675

Put the link in a div-element. On clicking the link, empty the div and append the form box.

Upvotes: 1

Related Questions