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。

在此代码＆＃34; addText＆＃34;是我给你的HTML中的div元素的id。

＆＃13;

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

＆＃13;

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

＆＃13;

动态添加文本字段JQuery

1 个答案: