Add Textfeld bei Klick auf Schaltfläche "Hinzufügen"

Ich arbeite an Laravel Framework hier brauche ich, wenn Benutzer klicken Sie auf Mehr hinzufügen Schaltfläche das Textfeld oben auf Schaltfläche hinzufügen. Ich brauche 18 Textbox, wenn der Benutzer bis zum 18. Textbox erreicht, wird es Alarm geben. Ich weiß nicht, wie man hinzufügt. Ich bin neu in jQuery und Javascript. Kann mir jemand Add Textfeld bei Klick auf Schaltfläche "Hinzufügen"

Hier

helfen ist der Screenshot: -

Hier ist mein HTML-Code: -

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

Quelle

2016-10-04 kunal

wo ist Ihr JavaScript-Code? – madalinivascu

ich weiß nicht, wie man jquery dieses Teils kodiert. das ist y ich frage madalin – kunal

Make-Array von name Werte der einzelnen Namen zu erhalten und der Code wie folgt aussieht,

$(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>

Quelle

2016-10-04 04:50:06

Wie erhalten wir die einzelnen Textfeld Wert –

Make 'name' als Array von Feldern wie' name [] '. –

Danke rohan. Ich führe deinen Code aber jetzt, wenn ich addmore Knopf anklicke, wenn ich dritten Textkasten hinzufüge, es alarmiert mich, dass "du nicht mehr hinzufügen kannst" aber meine Länge ist 4. – kunal

Dies könnte helfen,

$('.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>

Quelle

2016-10-04 04:53:11

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

Ihre 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 :)'); 
    } 
});

Working Fiddle

Quelle

2016-10-04 04:57:16

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

Quelle

2016-10-04 05:06:23 Aswathy

Add Textfeld bei Klick auf Schaltfläche "Hinzufügen"

Antwort

Verwandte Themen