Accessing form fields generated dynamically.

0

I have an equipment control system. In this system, while the user fills out the form, he has the option to add another field to register another equipment that will be associated with a client. To do this functionality I used a code in javascript

    <script type="text/javascript">
        $(document).ready(function () {
            var $link = $('#add_answer');
            var $model = $link.prev('.equipamento');
            $link.click(function () {
                var $clone = $model.clone(false);
                $(this).before($clone);
                $clone.wrap('<div class="wrapper"></div>')
                        .after('<a href="javascript:void(0)" class="remove"></a>')
                        .addClass('added')
                        .parent()
                        .hide()
                        .fadeIn();
            });

            $('a.remove').live('click', function () {
                $(this).parent().fadeOut('normal', function () {
                    $(this).remove();
                });
            });
        });
    </script>

How do I access form fields using JQuery.

Can you help me? Any suggestion? Am I doing the right thing? Is there a better way to do this?

note: I did not program this javascript

    
asked by anonymous 30.01.2014 / 16:23

4 answers

0

See if I understand your question, you want to access the clones in javascript.

There are some possibilities I will address some.

Using each

$(".equipamento").each(function() {
     var obj = $(this); //aqui você irá ter acesso aos "clones"
     console.log(obj);
});

To know how many objects you have, you can use length

$(".equipamento").length //retorna a quantidade de "clones"

Using filtering for jquery (session traversing )

You can access each object separately with eq first last

$(".equipamento").first() //acesso ao primeiro objeto
$(".equipamento").eq(0) //retorna o mesmo objeto de cima

$(".equipamento").eq(1) //acesso ao segundo objeto

$(".equipamento").last() //acesso ao último objeto
$(".equipamento").eq($(".equipamento").length-1) //mesma coisa de cima

Now if the page already creates N objects when it is rendered. You can access the objects by using the ".added" class instead of ".equipamento" in the above codes (by changing the selector ) ,

    
31.01.2014 / 04:41
1

You can use Knockoutjs to build your layout instead of doing it 'on hand'. At library documentation you'll find what you're trying to do.

    
30.01.2014 / 22:49
0

If your system is ASP.NET MVC with Razor or Web Forms, this package solves everything you need:

link

An example usage is below (I've already translated it for Razor). The component is able to generate a temporary ID for new elements that can be replaced in logic:

@using (Html.BeginCollectionItem("Equipamentos"))
{
    @Html.EditorFor(m => m.Nome)
    @Html.ValidationMessageFor(m => m.Nome)
    <br />
}

In the link below there are examples for Web Forms and further usage explanations, such as validation in Ajax of data:

link

    
30.01.2014 / 20:08
0

To write to the database the array as a string, you just need to serialize the array. You can use, for example, JSON.

Some interesting ways:

link

JsonConvert.SerializeObject(product);

JsonConvert.DeserializeObject<Product>(json);

However, the right thing to store would be to go through the array and add equipment per piece of equipment in the database. By loading these devices into a form, you would look for related equipment and mount the html for each device.

The clone script would still work.

    
31.01.2014 / 03:54