jQuery - failed show/hide buttons

Question

I was tried to add forms using jQuery and it succeeded.
This time I'm trying to show and hide some buttons(#remove_form, #add_form)
but always not working:(

my jQuery codes(referred this question's answer):

$(document).ready(function(){
  var index_num       = 1;
  var max_num         = 7;

$("#add_form").click(function(e){
     e.preventDefault();
     if(index_num < max_num){ 
         index_num++;
         $("#event").each(function(){
              $(this).clone().insertAfter(this).attr("id","event" + index_num);              
              $("#add_form" + index_num).css("display","none");
              $("#remove_form" + index_num).css("display","inline");
           }); 
         }
      });

      $("#remove_form" + index_num).click(function(e){
        e.preventDefault(); $(this).parent(".row collapse").remove(); index_num--;
      });
  });

+) I did not wrote "#add_form" button's css code. just this:

#remove_form{
    display: none;  
}

HTML codes:

    <div class="row collapse" id="event">
        <div class="small-2 large-2 columns">
            <h7>example</h7> 
        </div>      

        <div class="small-2 large-2 columns">
            <form>example</form>
        </div>  

        <div class="small-2 large-2 columns">
            <form>example</form>
        </div>

        <div class="small-1 large-1 columns">
            <h7>example</h7>
        </div>  

        <div class="small-2 large-2 columns">
            <form>example</form>
        </div>

        <div class="small-1 large-1 columns">
            <h7>example</h7>
        </div>

        <div class="small-2 large-2 columns">
            <button type="submit" class="button tiny alert" id="remove_form"></button>
        </div>  

        <div class="small-2 large-2 columns">
            <button type="submit" class="button tiny" id="add_form"></button>
        </div>  
    </div>

+) HTML codes after clicking '#add_form' button:

<div class="row collapse" id="event">...</div>
<div class="row collapse" id="event7">...</div>
<div class="row collapse" id="event6">...</div>
<div class="row collapse" id="event5">...</div>
<div class="row collapse" id="event4">...</div>
<div class="row collapse" id="event3">...</div>
<div class="row collapse" id="event2">

     ...

        <div class="small-2 large-2 columns">
            <button type="submit" class="button tiny alert" id="remove_form"></button>
        </div>  

        <div class="small-2 large-2 columns">
            <button type="submit" class="button tiny" id="add_form"></button>
        </div>  
     </div>

How can I solve this problem?

Please explain the nature of the "failure": what was supposed to happen, and what happened instead? — Scott Hunter, Dec 26 '14 at 14:08
element ID's must be unique in a page by definition. Thus `$("#event").each` looks suspicious. Please provide some html. Also provide a better problem statement than `always failed`. — charlietfl, Dec 26 '14 at 14:10
why don't you use .show() and .hide() instead of doing it with css. If you want that it happens emmediatly set a 0 inside the (). — Vinc199789, Dec 26 '14 at 14:32
still not clear at all what expected behavior is. Nothing in code has an id of `event` and there are no incremental ID's like `#remove_formXXX` or `#add_formXXX` — charlietfl, Dec 26 '14 at 14:52
@Vinc199789: I tried but it doesn't working. .show() and .hide() only works when I remove '+ index_num' part in line 11 and 12, but then can't adding forms. — DE.G, Dec 26 '14 at 15:10

Ploxer · Accepted Answer · 2014-12-26T16:26:28.893

You have to use the id attribute only when you know your item is unique.

If you have multiple id="event" then you need to use class="event" instead and $(".event").each instead of $("#event").each.

If my assumptions are correct, you are trying to make a copy of event form when you click on #add_form button. Then, it's advised to provide a remove button inside the #event form so that every clone has his own remove button and a single add button outside of the #event element.

If you put it that way it's not about Show/Hide rather Add/Remove DOM elements.

<div id="to_clone" style="display:none">
    <div class="row collapse" class="event">
        ...

        <div class="small-2 large-2 columns">
            <button type="submit" class="button tiny alert" class="remove_form"></button>
        </div>  
    </div>
 </div>

<div id="events_container">
    <button type="submit" class="button tiny" id="add_form"></button>
</div>

Jquery

$('#add_form').click(function(){
    event=$("#to_clone").html();
   $(this).before(event);
});

$(document).on('click', '.remove_form', function(){ 
    $(this).closest(".event").remove();
    return false;
});

In case you're wondering how to submit those forms you can add a function that translate inputs into json.

function getEventsJson()
{
    var json='[';
    $('.event').each(function()
    {
        json=json+'{ "field1": "'+$(this).find('.field1class').val()+'","field2": "'+$(this).find('.field2class').val()+'"},';
    });
    json=json.replace(/,\s*$/, "");
    json=json+']'
    return json;
}

Or provide for each event it's own form and submit them one by one.

$('.event').each(function()
{
    var form=$(this).find('form');
    $.ajax({
        type:"POST",
        url: "/events",
        data: {
            'event' : form.serialize(),
        },
        dataType: 'json',
        success: function(data) {

        },
        error: function(data){

        }
    });
}

jQuery - failed show/hide buttons

1 Answers1

Linked