How to do this task in jquery?

JavaScript
1

Hi there

This is my Jsfiddle.net
http://jsfiddle.net/d0pwhrf1/2/

What I want before adding that block to a attached blocked I want to change Text of UserText id
before it is added to a block

How can I do this?

Thanks

2

Hi,

I don’t understand the question. Can you rephrase?

3

Did you mean something like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<div class="appendBlock"></div>
<div id="block" class="block">
		<label class="userText">Your Text Here</label>
		<br>
		<input type="text" name="userName[]">
		<br>
		<input type="text" name="userEmail[]">
		<br>
		<input type="text" name="userAddress[]">
		<br><br>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
var e=$("#block");
for(var i=0; i < 3; i++) {
 $('.appendBlock').append($(e).html());
 $('.appendBlock').find('.userText').last().text('Changed text ' + " " + i);
} 
</script>
</body>
</html>

@James_Hibbard can make it nicer :smile:

4

Thanks
@PaulOB

this is my updated final code
Here I also set value on Input Fields

5

Not really. This was my attempt : )

var e = $('.block');
for(var i=0; i < 3; i++) {
  var text = "Changed text" + i;
  e.clone().insertAfter(e);
  e.find("label").text(text)
  e.find("input").first().val(text);
}
6

@pullo

although I understand code but can you explain why we use first and last method while appending value?

What is the differnece in these two

e.find("input").first().val(text);
7

.first() selects the first input element within the div block, which is what I thought you wanted to do.
https://api.jquery.com/first/

8

Ok @Pullo

here I need some more change on that file
this is my JavaScript file

Now what I want row added on StudentDetails block should align with each other mean behave like that are in same table all spaced between are equal

9

Ok one more question
suppose I have added a delete button

I want div block to append after table but before delete button How can I do this?

10

Why not try implementing this yourself and let us know if you get stuck?

11

see my attempt I have posted my JSfiddle.net that I have attempt so far

I am thinking something like

(“#targetId”).append(“#valueToAttach”).insertAfter(“targetHere”)

12

somebody help on this topic I have posted my Effort

13

Give it a try using insertAfter() & insertBefore() jquery API’s.

Not sure if i understood this long thread properly but here is my try to make things work your way.

check this fiddle -

jQuery API Links -
http://api.jquery.com/insertbefore/
http://api.jquery.com/insertafter/

14

Can you do that in case of my code

I know how to use insertAfter and insertBefore

but how in my code?

15

please check the fiddle link given in last reply.

For your reference - http://jsfiddle.net/ylokesh/d0pwhrf1/18/

16

but why only one row

I have written code for 3 rows at least

17

You are right buddy @vngx . It should print 3 rows atleast :smile: Let me give it a try one more time :wink:

Check this fiddle - http://jsfiddle.net/ylokesh/d0pwhrf1/20/

18

Thanks Lokesh

I want that Each block should add a Unique Id to it
like 1,2,3 according to value of loop counter

but its not working

19

That is tricky. To achieve this, we may choose one alternate route by generating HTML on the fly.

Let me know, if it works as per your need.

1 Like
20

Couldn’t you use the jQuery version of setAttribute? eg.

.attr("id", i )

http://api.jquery.com/attr/

1 Like