Dynamisches HTML-Formular Problem

Ich versuche, ein dynamisches HTML-Formular zu erstellen, um einige Gäste Benutzer zu erstellen und diese in einer Datenbank aufzufüllen.Dynamisches HTML-Formular Problem

Ich habe versucht, den Befehl in dem Thread unten zu folgen: Creating a dynamic html form

Aber ich kann es nicht auf meinem Server arbeiten. Ich bin wirklich nicht vertraut mit JavaScript in HTML (normalerweise bevorzuge ich Python), also bitte entschuldigen Sie mich für diese Dummy-Frage.

Nachfolgend finden (einer) der HTML-Code, den ich versucht:

$('#btnAdd').click(function() { 
 
    var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have 
 
    var newNum = new Number(num + 1); // the numeric ID of the new input field being added 
 

 
    // create the new element via clone(), and manipulate it's ID using newNum value 
 
    var newElem = $('#input' + num).clone().attr('id', 'input' + newNum); 
 

 
    // manipulate the name/id values of the input inside the new element 
 
    newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum); 
 
    newElem.children(':first').attr('id', 'email' + newNum).attr('name', 'email' + newNum); 
 

 
    // insert the new element after the last "duplicatable" input field 
 
    $('#input' + num).after(newElem); 
 

 
    // enable the "remove" button 
 
    $('#btnDel').attr('disabled', ''); 
 

 
    // business rule: you can only add 5 names 
 
    if (newNum == 5) { 
 
    $('#btnAdd').attr('disabled', 'disabled'); 
 
    } 
 
}); 
 

 
$('#btnDel').click(function() { 
 
    var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have 
 
    $('#input' + num).remove(); // remove the last element 
 

 
    // enable the "add" button 
 
    $('#btnAdd').attr('disabled', ''); 
 

 
    // if only one element remains, disable the "remove" button 
 
    if (num - 1 == 1) { 
 
    $('#btnDel').attr('disabled', 'disabled'); 
 
    } 
 
}); 
 

 

 
$('#btnDel').attr('disabled', 'disabled');

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <Title>My First dynamic form test</title> 
 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <form id="myForm"> 
 
     <div id="input1" style="margin-bottom:4px;" class="clonedInput"> 
 
     Name: <input type="text" name="name1" id="name1" /> 
 
     Email: <input type="text" name="email1" id="email1" /> 
 
     </div> 
 

 
     <div> 
 
     <input type="button" id="btnAdd" value="add another entry" /> 
 
     <input type="button" id="btnDel" value="remove last entry" /> 
 
     </div> 
 
    </form> 
 
    </body> 
 
</html>

Vielen Dank im Voraus

PS: übrigens, wenn jemand hat eine Idee, die zu tun gleich (wie einfach) in Python bitte zögern Sie zu teilen :)

Quelle

2016-09-03 Fabien GIRAUD

Ihr Code ausgeführt wird, bevor die Seite fertig geladen wurde. Möglicherweise möchten Sie das zweite Skriptelement nach dem Tag verschieben. – jeff

entfernen Sie die deaktivierte attr aus der Lösch-Taste wie folgt: '$ ('# btnDel'). Attr ('deaktiviert', false);' oder verwenden Sie $ ('# btnDel'). RemoveAttr ('deaktiviert') '. .. machen Sie das gleiche für die Schaltfläche hinzufügen – yezzz

Sie haben die folgenden Punkte:

Ihre js nur ausgeführt werden, wenn das Dokument fertig
ist/enble zu deaktivieren statt attr Sie müssen prop verwenden
die Länge Eigenschaft ist immer eine Zahl, so dass Sie nicht Nummer benötigen Konstruktor

// 
 
// wrap your code in document ready: 
 
// running rour code before the elements are not yet loaded is an error 
 
// 
 
$(function() { 
 
    $('#btnAdd').click(function() { 
 
    var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have 
 
    var newNum = num + 1;     // the numeric ID of the new input field being added 
 

 
    // create the new element via clone(), and manipulate it's ID using newNum value 
 
    var newElem = $('#input' + num).clone().find('[id]').andSelf().attr('id', function(index, attr) { 
 
     return attr.replace(/[0-9]*$/, '') + newNum; 
 
    }).attr('name', function(index, attr) { 
 
     return (attr === undefined) ? undefined : attr.replace(/[0-9]*$/, '') + newNum; 
 
    }).eq(0); 
 

 
    // insert the new element after the last "duplicatable" input field 
 
    $('#input' + num).after(newElem); 
 

 
    // enable the "remove" button 
 
    $('#btnDel').prop('disabled', false); 
 

 
    // business rule: you can only add 5 names 
 
    if (newNum == 5) 
 
     $('#btnAdd').attr('disabled', 'disabled'); 
 
    }); 
 

 
    $('#btnDel').click(function() { 
 
    var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have 
 
    $('#input' + num).remove();  // remove the last element 
 

 
    // enable the "add" button 
 
    $('#btnAdd').prop('disabled', false); 
 

 
    // if only one element remains, disable the "remove" button 
 
    if (num - 1 == 1) 
 
     $('#btnDel').prop('disabled', true); 
 
    }); 
 

 

 
    $('#btnDel').prop('disabled', true); 
 
});

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
 

 

 

 
<form id="myForm"> 
 
    <div id="input1" style="margin-bottom:4px;" class="clonedInput"> 
 
     Name: <input type="text" name="name1" id="name1"/> 
 
     Email: <input type="text" name="email1" id="email1"/> 
 
    </div> 
 

 
    <div> 
 
     <input type="button" id="btnAdd" value="add another entry"/> 
 
     <input type="button" id="btnDel" value="remove last entry"/> 
 
    </div> 
 
</form>

Quelle

2016-09-03 16:13:57 gaetanoM

Danke für die Erinnerung an die Verwendung von prop() ... Beachten Sie auch die zweite Zeile "newElem.children" zielt auf das falsche Element. Verwenden Sie ': last' oder': eq (1) 'oder': nth-of-type (2) ' – yezzz

Nun, es gibt eine andere Möglichkeit, es zu tun ... aber es könnte besser gewesen sein, es ähnlich dem OP-Code zu halten – yezzz

Vielen Dank, aber ich denke, dass etwas mit meinem Server nicht stimmt, denn selbst wenn ich das Skript nach dem hinzufüge passiert nichts, wenn ich auf die Schaltflächen klicke ... –

Dynamisches HTML-Formular Problem

Antwort

Verwandte Themen