Ошибка возникает, когда jQuery обрабатывает форму внутри другой формы

Question

Я пишу форму с помощью jQuery и сталкиваюсь с некоторыми трудностями.

Моя форма отлично работает на статической странице (html).
Однако, когда я использую форму на динамической странице (aspx), она ведет себя некорректно. Я не могу добавлять элементы в форму и вызывать функцию form.serialize.

Я думаю, что ошибка возникает, когда форма находится внутри другой формы (код .aspx должен быть заключен в тег формы).

Что мне делать?

Позвольте мне представить упрощенную версию моего кода:

 <form name="Form1" method="post" id="Form1">
some content
<form name="form_inside">
<input name="fname" type="text" />
</form>
</form>

Код jQuery:

 $("#form_inside").append($("<input type='text' name='lname'>"));

Когда пользователь отправляет,

 $("#form_inside").serialize(); 
// it should return fname=inputfname&lname=inputlname

Я хочу добавить элемент в form_inside и сериализовать форму form_inside.
Форма "Form1" требуется aspx, и я не могу ее удалить.

score 1 · Accepted Answer · 02 июля 2009, 04:09

Не могли бы вы просто сериализовать поля внутри Form1?

Я ничего не знаю об ASP, но похоже, что вы все равно не выполняете прямую «отправку» - так ли это действительно важно, если поля не находятся в их собственной отдельной форме?

Вы могли бы сгруппировать интересующие вас поля в <div> или что-то в этом роде, например:

 <div id="my-interesting-fields">
    ...
</div>

затем замените #form-inside на #my-interesting-fields там, где это необходимо - это вообще полезно?

Изменить

Хорошо, беглый взгляд на код jQuery показывает, что serialize() зависит от элемента формы elements.

Я полагаю, вы можете взломать это несколькими разными способами:

Скопируйте все элементы из #my-interesting-fields во временный <form>, который вы динамически создаете вне Form1, затем вызовите serialize() для этого. Что-то вроде:
```
$("#Form1").after("<form id='tmp-form'></form>").
            append("#my-interesting-fields input");
$("tmp-form").serialize();
```

Или создайте член elements на #my-interesting-fields, например

$("#my-interesting-fields").elements = $("#my-interesting-fields input");
$("#my-interesting-fields").serialize();

Я не пробовал ничего из этого, но это может дать вам пару идей. Не то чтобы я обязательно рекомендовал кого-то из них :)

score 1 · Answer 2 · 02 июля 2009, 04:14

Поскольку у вас не может быть вложенных тегов

, вам необходимо закрыть стандартный тег формы dotnet, как показано ниже:

 <script type="text/javascript">
    $(document).ready(function() {
        $("#form_inside").append($("<input type='text' name='lname'>"));
        $("#submitBtn").click(function() {function() {
            var obj = $("#form_inside *");
            var values = new Array();
            obj.each(function(i,obj1) {
                if (obj1.name && !obj1.disabled && obj1.value) {
                    values.push(obj1);
                }; 
                });
                alert(jQuery.param(values));
        }); });
    });

</script>
<form id="form1" runat="server">
<div>
<div id="form_inside" name="form_inside"> <input name="fname" type="text" /><input type="button" id="submitBtn" /></div>

</div>
</form>

jQuery.param в массиве элементов формы даст те же результаты, что и .serialize ()

чтобы получить все элементы в div $ ("# form_inside *), затем отфильтровать элементы, а затем по результату jQuery.param даст вам именно то, что вам нужно

Ошибка возникает, когда jQuery обрабатывает форму внутри другой формы

2 ответов

Изменить