Search jQuery

jQuery Forum

Getting Started

kampflitc..

Dynamic Formular

in Getting Started • 11 years ago

Hey Guys!

I want to create a formular in which I can new input forms with a click. So I created following:

<html>
<head>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"></script>
<script>
$(document).ready(
function() {
// use this to reset several forms at once
$("#testtest").click(
function() {
$("#formular").append(
$('#fieldset_numeric_choice').clone()
.show());
a = $("#formular").children().size();
var el = $("#formular fieldset:last");
el.html(el.html().replace("###3###", a));
return false;
});
});
</script>
</head>
<body>
<a href="#" id="testtest">Single</a>
<form id="formular">
<div id="firstelement" style="width: 200px;">test</div>
</form>
<fieldset id="fieldset_numeric_choice" style="display: none;"
class="fieldsetter">
Numeric###3###:<input type="Text" name="text" />
</fieldset>
</body>
</html>

The adding of new input fields works well, but my placeholder ###3### is not replaced in the right way. The fields should be numbered consecutively. But every ###3### is replaced by "2".

Has anyone an idea how I can solve my problem?

Thanks in advance!
kampflitchi

Replies(6)

dsvick

What is the 'right way'? Your code is doing exactly what you are telling it to do, replacing the '###3###' with the current number of children of $("#formular"), which, at that time, is two.

What are you trying to accomplish?

kampflitc..

Re: Dynamic Formular

11 years ago

For the first added element ###3### should be replaced by 1. For the second added element ###3### should be replaced by 2. So it should be increment. I need it to identify the form elements.

Do you know what I mean?

dsvick

Re: Dynamic Formular

11 years ago

You are appending the elements to the form $("#formular") and that form already has one child, the div with the id of firstelement. So after you clone the fieldset and append it, it is the second element which is what $("#formular").children().size(); is telling you.

If you want to get a count specifically of the fieldsets then change it to this: $("#formular").children("fieldset").size()

If it isn't fieldset specific then just decrement your size by one and use that.

If there will be other elements and they'll need separate indexes you'll need to use the index method http://api.jquery.com/index/ to determine the position of each one after you add it, or you could simply create a counter and increment it for each type of element.

Hope that helps

kampflitc..

Re: Dynamic Formular

11 years ago

The indx()-function seems to be that what I am looking for. I tried it to implement, but it doesn't work. Here is my code:

<html>
<head>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"></script>
<script>
$(document).ready(
function() {
// use this to reset several forms at once
$("#testtest").click(
function() {
$("#formular").append(
$('#fieldset_numeric_choice_333').clone().show()
);
a = $("#formular fieldset:last").index();
var el = $("#formular").children('fieldset:last');
el.html(el.html().replace(/333/g,a));
return false;
});
});
</script>
</head>
<body>
<a href="#" id="testtest">Single</a>
<form id="formular">
<div id="firstelement" style="width: 200px;">tessdfst</div>
<fieldset id="fieldset_numeric_choice_1" class="fieldsetter">
Numeric1:<input type="Text" name="text" />
</fieldset>
<fieldset id="fieldset_numeric_choice_2" class="fieldsetter">
Numeric2:<input type="Text" name="text" />
</fieldset>
<fieldset id="fieldset_numeric_choice_3" class="fieldsetter">
Numeric3:<input type="Text" name="text" />
</fieldset>
</form>
<fieldset id="fieldset_numeric_choice_333" style="display: none;" class="fieldsetter">
Numeric#333:<input type="Text" name="text333" value="333"/>
</fieldset>
</body>
</html>

It is intended that the first the elements are displayed.
But if I add now new elements, every placeholder is replaced by a 4. It doesn't increment.
How do I use .index() (Line 20) in the right way?

Thank you in advance!

dsvick

Re: Dynamic Formular

11 years ago

Here you go:

$("#testtest").click(
      function() {
            var $newElem = $('#fieldset_numeric_choice_333').clone().show();
            $("#formular").append($newElem);
            var a = $("#formular fieldset").index($newElem) + 1;
            $newElem.attr("id", "fieldset_numeric_choice_" + a);
            $newElem.html($newElem.html().replace(/333/g,a));
            return false;
});

There were a couple of things I changed here:
I created the new element and assigned it to a variable so we could just work with it and not have to work with selectors all the time.
I changed your index call to specifically get the index of the new element (it is zero based so I added 1).
You were not changing the ID of the new elements, so they all had the same ID.
Lastly, I change the html of the specific element rather than using a selector.

Hope that helps

Dave

kampflitc..

Re: Dynamic Formular

11 years ago

Thank you. It works!

Top Reply

Response title

Attachments

jQuery Forum

Dynamic Formular

Replies(6)

Re: Dynamic Formular

Re: Dynamic Formular

Re: Dynamic Formular

Re: Dynamic Formular

Re: Dynamic Formular

Re: Dynamic Formular

Statistics

Tags

Actions

Related Posts