私はlaravelフレームワークでここで作業しています。ユーザーが18番目のテキストボックスに到達したときに18個のテキストボックスが必要になります。追加する方法はわかりません。私はjqueryとjavascriptで新しいです。誰もがここで私Addボタンをクリックしてテキストボックスを追加します。
を助けることができるスクリーンショットです： - 
ここでは私のHTMLコードです： -
<div>
<input type="text" name="name" class="form-control">
<div class="sign-btn signup-page">
<button class="btn btn-info sign-bttn">Add More</button>
</div>
</div>
それぞれの名前の値を取得するためにnameの配列を作成し、コードは次のようになり、
$(function() {
var len = 4; // for testing purpose I am using 4 you can change it to 18
$('.sign-bttn').on('click', function() {
if($('#name-container-list .name-list').length==len){
alert("You can't add more");
return false;
}
$clone = $('#name-container-list .name-list:first').clone();
$clone.find('input').val(''); // empty the new clone field
$(this).parent('div').before($clone);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="name-container-list">
<div class="name-list">
<input type="text" name="name[]" class="form-control" />
</div>
<div class="sign-btn signup-page">
<button class="btn btn-info sign-bttn">Add More</button>
</div>
</div>各テキストボックスの値はどのように取得されますか –
'name'を' name [] 'のようなフィールドの配列として作成します。 –
ありがとうございます。私はあなたのコードを実行するが、私は "あなたはもっと追加することはできません"私の長さは4です警告する3番目のテキストボックスを追加するときに私はaddmoreボタンをクリックするとき。 – kunal
これは役立つかもしれない、
$('.sign-bttn').click(function(e) {
$('.text-boxes').prepend('<input type="text" name="name" class="form-control">');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-boxes">
<input type="text" name="name" class="form-control">
<div class="sign-btn signup-page">
<button class="btn btn-info sign-bttn">Add More</button>
</div>
</div>あなたのHTML：
<div id="divContain">
<div id='divText'>
<input type="text" name="name" class="form-control">
</div>
<div class="sign-btn signup-page">
<button class="btn btn-info sign-bttn">Add More</button>
</div>
</div>
あなたはJQuery：
var maxField = 18;
var fieldHTML = ' <input type="text" name="name" class="form-control">'; //New input field html
var x = 1; //Initial field counter is 1
$('.btn-info').click(function() { //Once add button is clicked
if (x < maxField) { //Check maximum number of input fields
x++; //Increment field counter
$('#divText').append(fieldHTML); // Add field html
}
else
{
alert('No more text box :)');
}
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.sign-bttn').click(function(e) {
if($('input[name="name"]').length < 18)
{
$('.text-boxes').prepend('<input type="text" name="name" class="form-control" value='+ ($('input[name="name"]').length + 1) +'>');
}
else
{
alert("reached 18 TextBoxes.............")
}
});
});
</script>
</head>
<body>
<div class="text-boxes">
<input type="text" name="name" class="form-control">
<div class="sign-btn signup-page">
<button class="btn btn-info sign-bttn">Add More</button>
</div>
</div>
</body>
</body>
</html>
ここであなたのJavaScriptコードはありますか？ – madalinivascu
私はこの部分のjqueryのコード方法を知らない。私はマダリンに尋ねています – kunal