Erstellen Sie neue Textfelder mit uniqe Namen in Javascript

Question

Ich versuche, neue leere Textfelder auf Anfrage zu erstellen, während der Text in das vorherige Feld eingegeben, haben jedes Feld mit einem eindeutigen Namen, in JavaScript. Ich war ein paar Stunden dabei, wurde frustriert und verwendete PHP dafür. Aber wie Sie wissen, erzeugt dies für jede Box einen Rückruf an den Server. Ich möchte folgendes in JavaScript konvertieren. (Zur Info: auch mit jQuery)

index.html

<script type="text/jscript"> 
function adddefinition() { 
    $.post('definitions.php', 
    $('form[name="help"]').serialize(), 
function (output) { 
    $('#definitions').html(output).show(); 
    }); 
    } 
</script> 

<form name="help" method="post" action="submitnewhelp.php"> 

Title: <input name="Title" id="t1" type="text"> 
<br> 
<br> 
Summary 
<textarea name="Summary" cols="20" rows="2"></textarea> 
<hr> 
<div id="definitions"></div> 
<input name="TD" type="button" value="Add Term and Definition" onclick="adddefinition();"> 
<hr> 
<input name="Submit1" type="submit" value="submit"> 
</form> 

definitions.php

<?php 
for ($Number = 1; !empty($_POST['Term:'.$Number]); $Number++) {} 

echo '<input name="TermCount" type="hidden" value='.$Number.'>'; 

if(!empty($Number)){$TermNumber = $Number;}else{$TermNumber = 1;} 
foreach (range(1, $Number) as $number) { 
echo 'Term: <input name="Term:'.$number.'" type="text" value="';if(!empty($_POST['Term:'.$number])){echo $_POST['Term:'.$number];} 
echo '" style="width: 100px"> Definition:&nbsp; <input name="Definition:'.$number.'" type="text" value="';if(!empty($_POST['Definition:'.$number])){echo $_POST['Definition:'.$number];} 
echo '" style="width: 1000px"> 
<br>'; 
} 
?> 

Answer 1

Naga Sai A wies mich in die richtige Richtung. Das fertige jQuery ...

<script type="text/jscript"> 
num = 0; 
function adddefinition() { 
num++; 
$('#definitions').append('Term:&nbsp;<input name="Term:'+num+'" type="text">Definition:&nbsp;<input name="Definition:'+num+'" type="text"><br><br>');//Code must be one line// 
}; 
</script> 

Answer 2

Sie können den Code unten versuchen, eindeutige Namen für die einzelne Textfelder zu erhalten.

HTML:

Title: <input name="Title" id="t1" type="text"> 
<br> 
<br> Summary 
<textarea name="Summary" cols="20" rows="2" id='test'></textarea> 
<hr> 
<div id="definitions"></div> 
<button onclick="adddefinition()">Add Term and Definition</button> 
<hr> 

Javascript:

function adddefinition() { 
    if($('.dynamicInput').length>0) { 
    elementName = $('.dynamicInput').last().attr('name'); 
    name = parseInt(elementName.split("_")[1])+1; 
    $('<input type="text" name ="test_'+name+'" class="dynamicInput"></br></br>').insertBefore("button"); 
    } else { 
      $('<input type="text" name ="test_1" class="dynamicInput"></br></br>').insertBefore("button"); 
    } 
}; 

Erläuterung:

In Jquery, zuerst geprüft habe ich, ob ein Element mit dem Klassennamen "dynamicInput" existieren.

Wenn irgendetwas mit diesem Klassennamen existiert, dann bekomme ich den Namen des letzten Elements. Und ich finde die Nummer des letzten Elements mit der Split-Funktion. Dann erhöhte ich diesen Wert, um den eindeutigen Namen für das nächste Eingabefeld festzulegen.

Wenn kein Eingabefeld mit dem Klassennamen "dynamicInput" existiert, erstellen Sie ein neues Eingabefeld mit dem Namen "test_1".