动态添加文本字段 JQuery

Question

嗨，我是 JQuery 的新手，我正在制作一个 API 工具，就像 https://www.hurl.it/ 我还想要添加参数按钮，它将创建一个参数名称和一个值字段并将其呈现在 div 中。这是我的表格。

<div class="panel-body">
    {!! Form::open(array('url' => 'invoker', 'class' => 'form-horizontal', 'id' => 'form')) !!}
    <div class="form-group">
        <label class="col-sm-2 control-label">URI</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="uri" placeholder="Enter URL">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Parameters</label>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" class="btn btn-default" id="addParams">Add Parameter</button>
        </div>
    </div>

    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10" id="paramArea">

       </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </div>
    {!! Form::close() !!}
</div>

这是我的脚本

$(function() {
    $("#addParams").click(function() {
        $('<input/>').attr({
            type: 'text',
            id: 'test',
            name: 'test',
            autofocus: 'true',
            class: 'form-control'
        }).appendTo('#paramArea');

        $('<input/>').attr({ 
            type: 'text', 
            id: 'paramValue', 
            name: 'paramValue', 
            autofocus: 'true', 
            class: 'form-control', 
            placeholder: 'value' 
        }).appendTo('#paramArea');
    });
});

这与我想要完成的目标相去甚远。有人可以帮我吗？谢谢

Answer 1

这是您可以执行的解决方案：

从您的输入中删除 id 元素，因为在您的情况下，您添加到表单中的任何数量的项目都将具有相同的 id，因为 id 应该是唯一的。
将文本框附加到 div 而不是表单。
这是一个有效的 sample。

在此代码中，"addText" 是我为 HTML 中的 div 元素提供的 ID。

$(document).ready(function() {
  $("#addParams").click(function() {
    $("#addText").append('<br><input type=text class="form-control" name=test value="New Element" />');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
  <!-- {!! Form::open(array('url'=> 'invoker', 'class' => 'form-horizontal', 'id' => 'form')) !!} -->
  <form>
    <div class="form-group">
      <label class="col-sm-2 control-label">URI</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="uri" placeholder="Enter URL">
      </div>
    </div>
    <div class="form-group">
      <label for="inputPassword3" class="col-sm-2 control-label">Parameters</label>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10" id="addText">
        <button type="button" class="btn btn-default" id="addParams">Add Parameter</button>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
    </div>
  </form>
  <!-- {!! Form::close() !!} -->
</div>

动态添加文本字段 JQuery

Dynamic Adding of Text Fields JQuery

html

jquery

textfield