2016-04-05 5 views
1

Я хочу создать форму для вставки идентификатора курса и кредита, и когда пользователь щелкнет добавить два текстовых поля, они появятся вместе, я попытался добавить два поля ввода, но когда я нажал, добавьте только одиндобавить много текстовое поле, используя jquery

заранее спасибо ..

<!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>

+0

'fieldHTML' не имеет' 2' элементы – Rayon

+0

у вас есть только один вход в шаблоне ... просто добавить еще –

ответ

1

Просто добавьте поле в шаблон ...

<!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>

+0

спасибо так много :) – shroog