2016-04-06 14 views
1

Oluşturduğum bir form için Bootstrap ile dinamik metin kutuları oluşturmaya çalışıyorum.Form öğesi eklemek dinamik metin kutusunu çalışmayı durdurur

$(function() { 
 
    $(document).on('click', '.btn-add', function(e) { 
 
    e.preventDefault(); 
 

 
    var controlForm = $('.controls form:first'), 
 
     currentEntry = $(this).parents('.entry:first'), 
 
     newEntry = $(currentEntry.clone()).appendTo(controlForm); 
 

 
    newEntry.find('input').val(''); 
 
    controlForm.find('.entry:not(:last) .btn-add') 
 
     .removeClass('btn-add').addClass('btn-remove') 
 
     .removeClass('btn-success').addClass('btn-danger') 
 
     .html('<span class="glyphicon glyphicon-minus"></span>'); 
 
    }).on('click', '.btn-remove', function(e) { 
 
    $(this).parents('.entry:first').remove(); 
 

 
    e.preventDefault(); 
 
    return false; 
 
    }); 
 
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="control-group" id="fields"> 
 
    <label class="control-label" for="field1">Nice Multiple Form Fields</label> 
 
    <div class="controls"> 
 
     <form role="form" autocomplete="off"> 
 
     <div class="entry input-group col-xs-3"> 
 
      <input class="form-control" name="fields[]" type="text" placeholder="Type something" /> 
 
      <span class="input-group-btn"> 
 
           <button class="btn btn-success btn-add" type="button"> 
 
            <span class="glyphicon glyphicon-plus"></span> 
 
      </button> 
 

 
      </span> 
 

 
     </div> 
 
     </form> 
 
     <br> 
 
     <small>Press <span class="glyphicon glyphicon-plus gs"></span> to add </small> 
 
    </div> 
 
    </div> 
 
</form>
: Ben aşağıda gibi çalışmayı durdurur nedense onun etrafında bir form öğesi eklediğinizde

$(function() { 
 
    $(document).on('click', '.btn-add', function(e) { 
 
    e.preventDefault(); 
 

 
    var controlForm = $('.controls form:first'), 
 
     currentEntry = $(this).parents('.entry:first'), 
 
     newEntry = $(currentEntry.clone()).appendTo(controlForm); 
 

 
    newEntry.find('input').val(''); 
 
    controlForm.find('.entry:not(:last) .btn-add') 
 
     .removeClass('btn-add').addClass('btn-remove') 
 
     .removeClass('btn-success').addClass('btn-danger') 
 
     .html('<span class="glyphicon glyphicon-minus"></span>'); 
 
    }).on('click', '.btn-remove', function(e) { 
 
    $(this).parents('.entry:first').remove(); 
 

 
    e.preventDefault(); 
 
    return false; 
 
    }); 
 
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="control-group" id="fields"> 
 
    <label class="control-label" for="field1">Nice Multiple Form Fields</label> 
 
    <div class="controls"> 
 
    <form role="form" autocomplete="off"> 
 
     <div class="entry input-group col-xs-3"> 
 
     <input class="form-control" name="fields[]" type="text" placeholder="Type something" /> 
 
     <span class="input-group-btn"> 
 
           <button class="btn btn-success btn-add" type="button"> 
 
            <span class="glyphicon glyphicon-plus"></span> 
 
     </button> 
 

 
     </span> 
 

 
     </div> 
 
    </form> 
 
    <br> 
 
    <small>Press <span class="glyphicon glyphicon-plus gs"></span> to add </small> 
 
    </div> 
 
</div>

sorun: Ben işleri aşağıdaki kodu var

Herhangi bir fikir takdir edilecektir.

cevap

1

içiçe hayır, bir kelimeyle

... html ... nested form is not possible mümkün değildir. Bir sayfada çeşitli formlar olabilir, ancak iç içe geçmemelidir. 4.10.3 form öğesi

İçerik modeli:

Akış içeriği, ancak hiçbir form öğesi torunları ile.

<div class="control-group" id="fields"> 
    <label class="control-label" for="field1">Nice Multiple Form Fields</label> 
    <div class="controls"> 
     <form role="form" autocomplete="off"> 
     <div class="entry input-group col-xs-3"> 
      <input class="form-control" name="fields[]" type="text" placeholder="Type something" /> 
      <span class="input-group-btn"> 
           <button class="btn btn-success btn-add" type="button"> 
            <span class="glyphicon glyphicon-plus"></span> 
      </button> 

      </span> 

     </div> 
     </form> 
     <br> 
     <small>Press <span class="glyphicon glyphicon-plus gs"></span> to add </small> 
    </div> 
    </div> 


$(function() { 
    $(document).on('click', '.btn-add', function(e) { 
    e.preventDefault(); 

    var controlForm = $('.controls form:first'), 
     currentEntry = $(this).parents('.entry:first'), 
     newEntry = $(currentEntry.clone()).appendTo(controlForm); 

    newEntry.find('input').val(''); 
    controlForm.find('.entry:not(:last) .btn-add') 
     .removeClass('btn-add').addClass('btn-remove') 
     .removeClass('btn-success').addClass('btn-danger') 
     .html('<span class="glyphicon glyphicon-minus"></span>'); 
    }).on('click', '.btn-remove', function(e) { 
    $(this).parents('.entry:first').remove(); 

    e.preventDefault(); 
    return false; 
    }); 
}); 
İlgili konular