jquery kullanarak çoklu metin alanı ekle

Ders kimliğini ve krediyi eklemek için bir form oluşturmak istiyorum ve kullanıcı iki metin alanı ekle'yi tıklattığında birlikte görünecek, iki giriş kutusu eklemeyi denedim ancak tıklattığımda yalnızca bir tane eklendiğindejquery kullanarak çoklu metin alanı ekle

görünüyor peşin

teşekkürler ..

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<script src="jquery.js"></script> 
 
<script type="text/javascript"> 
 
$(document).ready(function(){ 
 
\t var maxField = 10; //Input fields increment limitation 
 
\t var addButton = $('.add_button'); //Add button selector 
 
\t var wrapper = $('.field_wrapper'); //Input field wrapper 
 
\t var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field"><img src="remove-icon.png"/></a></div>'; //New input field html 
 
\t var x = 1; //Initial field counter is 1 
 
\t $(addButton).click(function(){ //Once add button is clicked 
 
\t \t if(x < maxField){ //Check maximum number of input fields 
 
\t \t \t x++; //Increment field counter 
 
\t \t \t $(wrapper).append(fieldHTML); // Add field html 
 
\t \t } 
 
\t }); 
 
\t $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked 
 
\t \t e.preventDefault(); 
 
\t \t $(this).parent('div').remove(); //Remove field html 
 
\t \t x--; //Decrement field counter 
 
\t }); 
 
}); 
 
</script>

<style type="text/css"> 
 
input[type="text"]{height:20px; vertical-align:top;} 
 
.field_wrapper div{ margin-bottom:10px;} 
 
.add_button{ margin-top:10px; margin-left:10px;vertical-align: text-bottom;} 
 
.remove_button{ margin-top:10px; margin-left:10px;vertical-align: text-bottom;} 
 
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<body> 
 
<form name="codexworld_frm" action="" method="post"> 
 
<div class="field_wrapper"> 
 
\t <div> 
 
    \t <input type="text" name="field_name[]" value=""/> 
 
     <a href="javascript:void(0);" class="add_button" title="Add field"><img src="add-icon.png"/></a> 
 
    </div> 
 
</div> 
 
<input type="submit" name="submit" value="SUBMIT"/> 
 
</form> 
 
</body>

kaynak

2016-04-05 shroog

'fieldHTML' sadece başka – Rayon

' 2' elemanları bulunmamaktadır :) –

Sadece şablona alan eklemek ...

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<script src="jquery.js"></script> 
 
<script type="text/javascript"> 
 
$(document).ready(function(){ 
 
\t var maxField = 10; //Input fields increment limitation 
 
\t var addButton = $('.add_button'); //Add button selector 
 
\t var wrapper = $('.field_wrapper'); //Input field wrapper 
 
\t var fieldHTML = '<div><input type="text" name="field_name[]" value=""/> <input type="text" name="credit" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field"><img src="remove-icon.png"/></a></div>'; //New input field html 
 
\t var x = 1; //Initial field counter is 1 
 
\t $(addButton).click(function(){ //Once add button is clicked 
 
\t \t if(x < maxField){ //Check maximum number of input fields 
 
\t \t \t x++; //Increment field counter 
 
\t \t \t $(wrapper).append(fieldHTML); // Add field html 
 
\t \t } 
 
\t }); 
 
\t $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked 
 
\t \t e.preventDefault(); 
 
\t \t $(this).parent('div').remove(); //Remove field html 
 
\t \t x--; //Decrement field counter 
 
\t }); 
 
}); 
 
</script>

<style type="text/css"> 
 
input[type="text"]{height:20px; vertical-align:top;} 
 
.field_wrapper div{ margin-bottom:10px;} 
 
.add_button{ margin-top:10px; margin-left:10px;vertical-align: text-bottom;} 
 
.remove_button{ margin-top:10px; margin-left:10px;vertical-align: text-bottom;} 
 
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<body> 
 
<form name="codexworld_frm" action="" method="post"> 
 
<div class="field_wrapper"> 
 
\t <div> 
 
    \t <input type="text" name="field_name[]" value=""/> 
 
     <a href="javascript:void(0);" class="add_button" title="Add field"><img src="add-icon.png"/></a> 
 
    </div> 
 
</div> 
 
<input type="submit" name="submit" value="SUBMIT"/> 
 
</form> 
 
</body>

kaynak

2016-04-05 17:35:49

çok teşekkür ederim ekleyin ... yalnızca şablonun içinde bir girişi var – shroog

jquery kullanarak çoklu metin alanı ekle

cevap

İlgili konular