CODEWITHSUNDEEP
javascriptjqueryhtml
Lucas0205
Lucas0205

Reputation: 55

Why is my jQuery not adding display on second div I create?

When I try adding the first contact and submit it, it shows in the div id=contact.

The function hide/show is working then.

But as soon as I add a second contact it's not working anymore.

Seems, jQuery doesn't enter display...

function css(){
    $('.contacts').css('background-color', 'lightblue');
}

function visibility() {
    $("#vis").click(function(){
        $(".description").toggle();
        return false;
    });
};

$( document ).ready(function() {

    $("form").submit(function (event) {
        var fname = $('#fname').val();
        var lname = $('#lname').val();
        var desc = $('#desc').val();
        $('.contacts').append( "<div id='contact'>"+fname+"<br>"+lname+"<br><button id='vis'>Show/Hide</button><div class='description' style='display:;'>"+desc+"</div></div>");
        // alert(fname);
        event.preventDefault();
        css();
        visibility();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="get">
    <fieldset>
        <legend>Personal information:</legend>
        First name: <input type="text" name="fname" id="fname"><br>
        Last name: <input type="text" name="lname" id="lname"><br>
    </fieldset>
    <fieldset>
        <legend>Description:</legend>
        <textarea id="desc" value="desc"> </textarea><br>
        <input type="submit" value="Submit">
    </fieldset>
</form>

<div class="contacts"> </div>

Any help would be appreciated, thanks.

Upvotes: 3

Views: 52

Answers (1)

ElChupacabra
ElChupacabra

Reputation: 1091

As I wrote in comment - You can't have multiple elements with the same ID in html. You also don't have to add listeners for each button. You can add listener for body and selector as second parameter (see attached code).

function css(){
    $('.contacts').css('background-color', 'lightblue');
}

$( document ).ready(function() {
  //this way you don't need to add listener for each button
  $('body').on('click', '.vis', function() {
    $(this).closest('.contact').find('.description').toggle();
  });
  
  $("form").submit(function (event) {
    var fname = $('#fname').val();
    var lname = $('#lname').val();
    var desc = $('#desc').val();
    $('.contacts').append( "<div class='contact'>"+fname+"<br>"+lname+"<br><button class='vis'>Show/Hide</button><div class='description'>"+desc+"</div></div>");
    event.preventDefault();
    css();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="get">
    <fieldset>
        <legend>Personal information:</legend>
        First name: <input type="text" name="fname" id="fname"><br>
        Last name: <input type="text" name="lname" id="lname"><br>
    </fieldset>
    <fieldset>
        <legend>Description:</legend>
        <textarea id="desc" value="desc"> </textarea><br>
        <input type="submit" value="Submit">
    </fieldset>
</form>

<div class="contacts"> </div>

Upvotes: 1

Related Questions