Adding a input field using jQuery

Question

I want to add a field2Label after field1Label, field2Input after field1Input and field2Label and field2Input before my submit button using jQuery.

So it looks something like this.

Desired output.

But my field2Label and field2Input doesn't show up. Please help.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
	var formGroupRowDiv = $(document.createElement('div')).attr("class",
			'form-group row');
	var emptyColumn = $(document.createElement('div'))
			.attr("class", 'col-md-2');

	var emptyColumn2 = $(document.createElement('div')).attr("class",
			'col-md-2');

	var field2Label = $(document.createElement('div')).attr("class",
			'col-md-2');

	var field2Input = $(document.createElement('div')).attr("class",
			'col-md-3');

	emptyColumn.appendTo(formGroupRowDiv);
	emptyColumn2.appendTo(formGroupRowDiv);

	field2Label.appendTo(formGroupRowDiv);
	field2Label.insertAfter('#field1Label').html(
			'<label for="field2Label">Field 2</label>');

	field2Input
			.appendTo(formGroupRowDiv)
			.insertAfter('#field1Input')
			.html(
					'<input id="field2Input"'
				+ '" name="field2Input"'
				+ '" type="text" class="form-control">');
	formGroupRowDiv.appendTo(".container");
</script>
</head>
<body>
	<div class="container">
		<form id="form" name="form" method="POST">
			<div class="form-group row">
				<div class="col-md-2"></div>
				<div class="col-md-2"></div>
				<div class="col-md-2">
					<label id="field1Label" for="field1">Field 1</label>
				</div>
				<div class="col-md-3">
					<input type="text" class="form-control" id="field1Input"
						name="field1Input" />
				</div>
			</div>
			<div class="form-group row">
				<div class="col-md-2"></div>
				<div class="col-md-2"></div>
				<div class="col-md-1"></div>
				<div class="col-md-1">
					<button id="newFieldBtn" value="newField" type="submit"
						name="button" class="btn btn-default">Submit</button>
				</div>
			</div>
		</form>
	</div>
</body>
</html>

You forgot to wrap your code in a DOM ready handler and it precedes the HTML it refers to. Do'h! — iCollect.it Ltd
– iCollect.it Ltd, Commented Dec 21, 2016 at 11:57
They can be combined, but when in jQuery... use jQuery (much shorter - as you can see by the first answer below) :) — iCollect.it Ltd
– iCollect.it Ltd, Commented Dec 21, 2016 at 12:02

Deep · Accepted Answer · 2016-12-21 13:50:43Z

you can do this in JQuery in simple 2 lines. Since you know what markup you require, create a markup string and append it after the first element in the form.

The key is to execute this script after just before the end of body tag.

   var formGroupRowDiv = '<div class="form-group row"> <div class="col-md-2"></div> <div class="col-md-2"></div> <div class="col-md-2"> <label id="field1Label" for="field1">Field 2</label> </div> <div class="col-md-3"> <input type="text" class="form-control" id="field2Input" name="field2Input" /> </div> </div>';
   $("#form > :first").after(formGroupRowDiv);

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<form id="form" name="form" method="POST">
			<div class="form-group row">
				<div class="col-md-2"></div>
				<div class="col-md-2"></div>
				<div class="col-md-2">
					<label id="field1Label" for="field1">Field 1</label>
				</div>
				<div class="col-md-3">
					<input type="text" class="form-control" id="field1Input"
						name="field1Input" />
				</div>
			</div>
			<div class="form-group row">
				<div class="col-md-2"></div>
				<div class="col-md-2"></div>
				<div class="col-md-1"></div>
				<div class="col-md-1">
					<button id="newFieldBtn" value="newField" type="submit"
						name="button" class="btn btn-default">Submit</button>
				</div>
			</div>
		</form>
	</div>
    
  <script type="text/javascript">
	
    var formGroupRowDiv = '<div class="form-group row"> <div class="col-md-2"></div> <div class="col-md-2"></div> <div class="col-md-2"> <label id="field1Label" for="field1">Field 2</label> </div> <div class="col-md-3"> <input type="text" class="form-control" id="field2Input" name="field2Input" /> </div> </div>';
   $("#form > :first").after(formGroupRowDiv);
  
</script>
</body>
</html>

$($("#form").children()[0]) is overkill. That should be just $("#form").children().first() or $("#form > :first")

u_mulder · Accepted Answer · 2016-12-21 12:02:06Z

1

Simple solution with a fiddle

$(document).ready(function() {
    // firstRow is a row that you want to clone
    var firstRow = $("#form").find(".row").eq(0);

    // el is a cloned element, full copy of firstRow
    var el = firstRow.clone();

    // find <input> among el descendants and set proper attributes
    el.find("input").attr("name", "new_name").attr("id", "newId");

    // find <label> among el descendants and set proper attributes
    el.find("label").attr("id","newId").text("label2");

    // add `el` (cloned element) after `firstRow`
    firstRow.after(el);
});

answered Dec 21, 2016 at 12:02

u_mulder

54.8k5 gold badges54 silver badges72 bronze badges

Collectives™ on Stack Overflow

Adding a input field using jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related