Question

我正在尝试按需创建新的空白文本框，同时保持文本输入到上一个框中，每个框都有一个唯一的名称，在JavaScript中。我经历了几个小时，感到沮丧，并使用PHP来做到这一点。但是如你所知，这会为每个盒子创建一个回调服务器。我想要做的是将以下内容转换为JavaScript。（仅供参考：也使用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

您可以尝试使用以下代码获取每个文本框的唯一名称。

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");
   }
 };

说明：

在Jquery中，首先我检查了是否存在类名为“dynamicInput”的任何元素。

如果此类名存在任何内容，那么我将获得最后一个元素的名称。我使用split函数找到最后一个元素的数字。然后我递增此值以设置下一个输入框的唯一名称。

如果没有类名“dynamicInput”的输入框，则创建一个名为“test_1”的新输入字段。

Answer 2

Naga Sai A指出了正确的方向。完成的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>

在javascript中使用uniqe名称创建新文本框

2 个答案: