2

I am trying to add a input text just before the submit button using jquery

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

</form>

I want to dynamically add another textbox just above the submit button

Prady
  • 10,978
  • 39
  • 124
  • 176
  • possible duplicate of [Creating a div element in jQuery](http://stackoverflow.com/questions/867916/creating-a-div-element-in-jquery) – Waxen Sep 04 '14 at 16:03

6 Answers6

5

You can do this way:

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

FIDDLE:

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

Ehsan Sajjad
  • 61,834
  • 16
  • 105
  • 160
3

Give your button an id attribute like so:

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

Then, this should do it

$( '#submitbtn' ).before( '<input type="text" id="text3" />' );
SheedySheedySheedy
  • 536
  • 1
  • 6
  • 14
2

I'm assuming you wish to append the text box on button click.

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

Jquery code

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

If you wish to keep adding input tags and keep each id dynamic

var i = 3;
$("#btn").click(function(){
    $("#btn").before('<input type='text' id="text'+id+" />');
    i++; 
});
Siddharth Patel
  • 193
  • 1
  • 2
  • 15
1

If you give an id to your form, It would be asier to select only the form you want.

In jQuery there is a method called before:

$("input[type=submit]").before("<input type='text' id='text3' />");
user3592436
  • 461
  • 2
  • 4
  • 13
1

Here is an example for both adding and removing elements dynamically using jQuery:

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

This is the 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>

This is the 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();
    });
});

the final result allows you to do the following:

enter image description here

EdsonF
  • 2,719
  • 3
  • 30
  • 34
0

Try this

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

<script>

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

Also replace your submit input by

<input type="submit" name="submit" class="submit">
Ahmad
  • 477
  • 2
  • 9