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

Asked
Viewd1323

2

Я пишу форму с помощью 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, и я не могу ее удалить.

  • Опубликуйте это как ответ, Крис. :-)

    John Kugelman02 июля 2009, 04:08
  • Я знаю, что у меня не должно быть вложенного элемента

    . Но в моей ситуации, что я могу сделать, когда aspx должен иметь элемент
    в самом начале страницы?
    Billy02 июля 2009, 04:03
  • Тогда, я думаю, вам нужно использовать этот элемент формы. Затем выберите другие способы координации ваших интересных элементов формы, например, пометив их классом маркера css или чем-то еще, чтобы их можно было легко выбрать.

    Chris Farmer02 июля 2009, 04:07
  • Было бы полезно, если вы разместите какой-нибудь код и укажете, что он делает или какие ошибки возникают. В частности, если вы можете предоставить ОЧЕНЬ простой пример кода ASPX / HTML и jQuery, который демонстрирует проблему…

    Michael Bray02 июля 2009, 03:49
  • К вопросу добавлен пример. Спасибо.

    Billy02 июля 2009, 03:58
  • Обратите внимание, что у вас не может быть вложенных элементов

    на HTML-странице.
    John Kugelman02 июля 2009, 03:51

2 ответов

1

Не могли бы вы просто сериализовать поля внутри 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();
    

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

  • Я пытаюсь сериализовать его с помощью $ («# my-интересных-полей> input»). serialize (). Не работает.

    Billy02 июля 2009, 04:21
  • Первый способ работает. Я обычно такой код: $ («

    ») .append ($ («# мои-интересные-поля *»)). Serialize ()

    Я не совсем понимаю второй способ.

    Billy02 июля 2009, 06:39
  • Я не могу сериализовать элемент формы внутри «моих-интересных-полей».

    Billy02 июля 2009, 04:17
  • Второй метод - это уродливый взлом, который зависит от внутренней реализации serialize () - я бы его избегал. Код в основном делает div похожим на форму (чтобы обмануть jQuery). Рад, что первый метод сработал для вас.

    harto02 июля 2009, 06:46
  • Хм. Кажется, что serialize () может работать только с элементами формы. Вы могли бы попробовать скопировать поля во «временную» форму?

    harto02 июля 2009, 04:38
1

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

, вам необходимо закрыть стандартный тег формы 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 даст вам именно то, что вам нужно

  • Из-за структуры и кода веб-страницы я не могу удалить ее из тега формы dotnet.

    Billy02 июля 2009, 04:19