Help with this criteria ?
Users can be able to add as many Names as they want, ADD NAME link serves the purpose for this.
How can I handle this specification ? Please check the spec below:
Thanks.
Add a comment
|
2 Answers
var input = $('#input').clone().attr('name', 'name2').attr('id', 'input-2').appendTo('body')
You can go further and clone the entire row/div with $(el).clone() and then do .find('input') and modify the name and id attribute values so they're unique and don't conflict. You can pass true to clone if you want to copy the event handlers.
Incomplete non-jQuery "solution" since I don't know exactly at which point the OP is in since he claims he can clone nodes now..
<div id="wrap">
<div class="foo">
<label for="first_name">name:</label><input type="text" name="first_name[] " id="first_name"><a href="#">delete</a>
</div>
<a href="#" id="add">add name</a>
</div>
<script>
(function() {
var add = document.getElementById('add'), counter = 0;
add.onclick = function() {
var rows = document.getElementsByTagName('div'), last = false;
if ( rows.length ) {
for ( var i = rows.length; i--; ) {
if ( last ) { break; }
if ( rows[i].className.length && ( ' ' + rows[i].className + ' ' ).indexOf(' foo ') != -1 ) {
last = rows[i];
}
}
}
if ( last ) {
var newNode = last.cloneNode(true), wrap = document.getElementById('wrap'), input = newNode.getElementsByTagName('input');
input.id = input.id + (counter++);
wrap.appendChild( newNode );
}
}
})();
7 Comments
mpen
it's not a complete solution, but a good start. it looks like you'll want to tie that to the "click" event of the "Add name" text... and you'll have to use some sort of counting variable for the name attribute... better would be just to have it as an array "name[]" and not bother modifying it at all.
meder omuraliev
I never intended to post a full solution without seeing his specific markup, and I'm perfectly aware of what's possible.
ChrisR
Perhaps a little remaker: the solution by Meder uses jQuery, i don't see that mentioned anywhere.
Satish Ravipati
i can clone the name txtfield, i'm able to add as many as i can and delete the respective txtfiled....the problem is...how can i get values ? <input type="text" id="work_2_name" name="work[2][name]" /> <input type="text" id="work_3_name" name="work[3][name]" /> how can i get values entered in this textbox
Satish Ravipati
@ Meder, when i click on the submit, how can i get value entered in work[2][name] txtfield ? may be this seems very idiotic, but i'm not able to solve it meder, please help me
|
Hope this goes well.
<html>
<script type="text/javascript">
function addfieldset() {
var namefieldset = document.getElementById("name").cloneNode(true);
document.getElementById("names").appendChild( namefieldset );
}
function deletefieldset( e ) {
var namefieldset = e.parentNode;
namefieldset.parentNode.removeChild( namefieldset );
}
</script>
<body>
<div id="names"><div id="name">Name: <input name="namefield" type="text"/><a href="#" onclick="deletefieldset( this )">delete</a></div></div>
<input id="addnamebtn" type="button" value="Add Name" onclick="addfieldset()"/>
</body>
</html>
I remembered an excellent post from "quirkmodes" briefly explained this. I still hold in my bookmarks. Here it is.
Good Day!
2 Comments
Satish Ravipati
Thanx Ramiz, completed the work according to the spec and easy too quirksmode.org helped me a lot to solve this spec...thanx to all who gave a helpfull support
Ramiz Uddin
I'm glad you found it useful.