Inclure une partie de la forme dans la boîte de dialogue jQueryUI

Question

J'ai le code qui ressemble à ce qui suit:

<form id="MyForm" name="MyForm" method="post" action="index.php"> 

<input type="text" id="Input1" name="Input1"> 
<input type="text" id="Input2" name="Input2"> 

<div id="dialog"> 
<input type="text" id="Input3" name="Input3"> 
<input type="text" id="Input4" name="Input4"> 
</div> 

<button type="button" onclick="$('#dialog').dialog('open');">Fill out 3 and 4</button> 
<input type="submit" value="Submit"> 

</form> 

je peux mettre la deuxième partie de la forme dans une boîte de dialogue jQueryUI, Input3 & Input4 ne figure pas dans la POST données. Est-il possible de faire cela?

Answer 1

Modifié pour ne pas spécifier les noms d'entrée.

$('#dialog').bind('dialogclose', function(event, ui) { 
    $('#dialog :input').each(function(index) { 

     $("#myForm").add('<input>').attr({ 
     type: 'hidden', 
     id: $(this).attr('id') 
     }); 
    }); 
}); 

Answer 2

Le problème que vous avez est que lorsque vous appelez dialogue sur votre DIV, la DIV est détaché du DOM et recollé à la fin du document (en dehors de la forme alors)

Si vous voulez vraiment une boîte de dialogue jQuery pour gérer cela, peut-être vous pouvez essayer de supprimer la boîte de dialogue du DOM et le remettre dans le formulaire.

tout cela est non testé:

<form id="MyForm" name="MyForm" method="post" action="index.php"> 

<input type="text" id="Input1" name="Input1"> 
<input type="text" id="Input2" name="Input2"> 

<div id="hereismydialog"> 
<div id="dialog"> 
<input type="text" id="Input3" name="Input3"> 
<input type="text" id="Input4" name="Input4"> 
</div> 
</div> 


<button type="button" onclick="$('#dialog').dialog('open');">Fill out 3 and 4</button> 
<input type="submit" value="Submit"> 

</form> 

Lorsque le document est prêt vous:

// prepares the dialog, that will remove it from its location in the document and 
// put it at the end 
$('#dialog').dialog({ autoOpen: false }); 

// put it back where it was 
$('#dialog').parent().detach().appendTo('#hereismydialog'); 

Encore une fois, tout cela est non testé, j'essayer avec Firebug/firequery au prêt.

Answer 3

Brian, Avez-vous envisagé d'utiliser des champs de saisie masqués, puis de mettre à jour les champs masqués uniquement lorsque la boîte de dialogue est terminée? Cela vous éviterait de devoir effectuer des manipulations DOM ennuyantes.

Answer 4

Si les champs d'entrée cachés ne sont pas une option, qu'en est-il de l'ajout de gestionnaires d'événements à la forme du dialogue (c'est-à-dire les doublons des entrées réelles) qui définissent les valeurs du formulaire réel?

Si vous ne voulez pas faire cela parce que vous ne voulez pas que le formulaire original soit encombré de ce qui devrait être dans une boîte de dialogue, vous pouvez simplement tirer ces entrées hors de l'écran (c'est-à-dire left, ala image replacement) ou placez-les sur display:none (si cela n'empêche pas les navigateurs de soumettre leurs valeurs). Bien sûr, vous pouvez également utiliser les entrées hidden pour les champs de saisie triviaux (les téléchargements de fichiers ne peuvent pas être simulés comme ça). Le problème avec les boîtes de dialogue jQueryUI est qu'elles sont arrachées du DOM, vous ne pouvez donc pas compter sur leurs entrées sauf si le formulaire entier est contenu dans elles. Cependant, vous pouvez faire en sorte que leurs intrants se comportent comme des proxies.

Answer 5

Il est un peu laid, mais vous pouvez contenir les contrôles non-dialogue dans un div séparé, intercepter les soumettre et les ajouter à l'aide .each() ronde sélecteur non-dialogue, le POST sortant ...

Answer 6

Il suffit de détruire la boîte de dialogue et de déplacer tout son contenu après la fermeture. Comme ceci:

$("#trigger_link").click(function(event) { 
    // Dialog creation 
    $("div#form_part").dialog({autoOpen: false, buttons: {"OK": function() {$(this).dialog("close");}}}); 
    $("div#form_part").bind(
     'dialogclose', 
     function(event) { 
     $(this).dialog("destroy"); 
     $(this).appendTo("#form").hide(); 
     } 
    ); 
    // Displaying 
    $("#div#form_part").dialog('open'); 
    event.preventDefault(); 
    return false; 
    });