如何使用jquery在表单中的提交按钮上方添加输入文本

Question

我正在尝试使用jquery

在提交按钮之前添加输入文本

<form>
<input type="text" id ="text1" />
<input type="text" id ="text2" />
<input type="submit" name="submit">

</form>

我想在提交按钮

上方动态添加另一个文本框

Answer 1

你可以这样做：

$('form').find('input:submit').before('<input type="text"/>')

FIDDLE：

http://jsfiddle.net/ehsansajjad465/r4o09rdd/

Answer 2

为您的按钮添加一个id属性：

<input type="submit" id="submitbtn" name="submit">

然后，这应该这样做

$( '#submitbtn' ).before( '<input type="text" id="text3" />' );

Answer 3

如果您为表单提供了ID，则只选择您想要的表单会更容易。

在jQuery中有一个之前调用的方法：

$("input[type=submit]").before("<input type='text' id='text3' />");

Answer 4

以下是使用jQuery动态添加和删除元素的示例：

http://jsfiddle.net/EdsonF/pax9jqte/

这是HTML：

  <form role="form" action="/wohoo" method="POST">
  <label>Stuff</label>
    <div class="multi-field-wrapper">
      <div class="multi-fields">
        <div class="multi-field">
          <input type="text" name="stuff[]">
          <button type="button" class="remove-field">Remove</button>
        </div>
      </div>
    <button type="button" class="add-field">Add field</button>
  </div>
</form>

这是Javascript：

$('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    $(".add-field", $(this)).click(function(e) {
        $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
    });
    $('.multi-field .remove-field', $wrapper).click(function() {
        if ($('.multi-field', $wrapper).length > 1)
            $(this).parent('.multi-field').remove();
    });
});

最终结果允许您执行以下操作：

Answer 5

我假设您希望在按钮单击时附加文本框。

<input type="submit" id="btn">

Jquery代码

$("#btn").click(function(){
    $("#btn").before("<input type='text' id='text3' />");
});

如果您希望继续添加输入标记并保持每个ID动态

var i = 3;
$("#btn").click(function(){
    $("#btn").before('<input type='text' id="text'+id+" />');
    i++; 
});

Answer 6

试试这个

<input type="button" onclick="addInput()" value="Add input" />

<script>

        function addInput(){
                var _input = '<input type="text" name="anInput" value="Hola" />';
                _input.insertBefore('.submit');
        }

还可以通过

替换您的提交输入

<input type="submit" name="submit" class="submit">