Une erreur se produit lorsque jQuery traite un formulaire à l'intérieur d'un autre formulaire

Question

J'écris un formulaire en utilisant jQuery et je rencontre quelques difficultés.

Mon formulaire fonctionne bien dans une page statique (html).
Cependant, lorsque j'utilise le formulaire dans une page dynamique (aspx), le formulaire ne se comporte pas correctement. Je ne peux pas ajouter d'éléments au formulaire et appeler la fonction form.serialize.

Je pense que l'erreur se produit lorsqu'un formulaire se trouve à l'intérieur d'un autre formulaire (le code .aspx doit être entouré d'une balise de formulaire).

Que dois-je faire ?

Permettez-moi de vous présenter une version simplifiée de mon code :

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

Code jQuery :

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

Lorsque l'utilisateur soumet le formulaire,

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

Je veux ajouter un élément à "form_inside" et sérialiser le formulaire "form_inside".
Le formulaire "Form1" est requis par l'aspx et je ne peux pas le supprimer.

Answer 1

Pourriez-vous simplement sérialiser les champs à l'intérieur de Form1 ?

Je ne connais rien à l'ASP, mais il semble que vous ne fassiez pas un simple "submit" de toute façon - alors est-ce vraiment important si les champs ne sont pas dans leur propre formulaire séparé ?

Vous pouvez éventuellement regrouper les champs qui vous intéressent au sein d'un <div> ou quelque chose du genre, par exemple :

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

puis remplacer #form-inside con #my-interesting-fields le cas échéant - est-ce utile ?

Editar

OK, un coup d'œil rapide au code jQuery suggère que serialize() dépend de l'option elements membre.

Je suppose qu'il y a plusieurs façons de procéder :

• Copier tous les éléments de #my-interesting-fields dans un <form> que vous créez dynamiquement en dehors de Form1 puis appeler serialize() sur ce point. Quelque chose comme :

  $("#Form1").after("<form id='tmp-form'></form>").
              append("#my-interesting-fields input");
  $("tmp-form").serialize();

• Ou encore, créer un elements membre sur #my-interesting-fields , par exemple

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

Je n'ai essayé ni l'un ni l'autre, mais cela pourrait vous donner quelques idées. Non pas que je recommande nécessairement l'un ou l'autre :)

Answer 2

Comme vous ne pouvez pas avoir de balises <form> imbriquées, vous devrez fermer la balise de formulaire standard de dotnet comme ci-dessous :

<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 sur un tableau d'éléments de formulaire donnera les mêmes résultats que .serialize()

donc vous récupérez tous les éléments dans la div $("#form_inside *) puis vous filtrez pour les éléments puis sur le résultat jQuery.param vous donnera exactement ce dont vous avez besoin