La sélection disparaît quand une nouvelle fenêtre s'ouvre

Question

Je travaille actuellement sur un projet et je suis coincé. Selon les exigences du client, une petite modification a été apportée à un formulaire existant.

Imaginer la page HTML comme suit:

• J'ai ajouté un nouvel élément de formulaire nommé type d'entreprise et il y a 10 options qui.
• L'utilisateur doit sélectionner une ou plusieurs options et soumettre et les données seront stockées dans la base de données. Les données sont également stockées dans la base de données. J'ai vérifié cela.
• Il y a aussi un bouton dans le formulaire qui ouvre une petite fenêtre pour choisir quelques options. Lorsque cette fenêtre s'ouvre, la sélection effectuée dans Business Type (dans le formulaire) disparaît. Comment empêcher cela de se produire?

J'essaie d'utiliser des sessions. Mais existe-t-il un moyen meilleur et plus facile d'y parvenir? Je veux conserver les sélections multiples qui sont faites.

Answer 1

Cela peut être fait côté client. Fondamentalement, vous créez un formulaire avec toutes les questions que vous souhaitez poser et ensuite utiliser JavaScript pour afficher des questions supplémentaires. Si l'utilisateur ne clique pas sur le bouton pour ouvrir les questions supplémentaires, il conserve simplement ses valeurs vides. Si elles ouvrent les questions supplémentaires, le pop apparaîtra sur la page et l'utilisateur remplira les entrées. Une fois qu'ils ont fini avec ces questions, vous les cachez simplement, mais ils contiennent toujours les valeurs que l'utilisateur a définies.

Placez donc les champs optionnels dans un div masqué dans le formulaire, puis affichez ce div lorsque vous cliquez sur le bouton.

<form ...> 
... required inputs 
... 
... 
<a href="#" id="show-optional-inputs">Ask more questions</a> 
<div id="optional-inputs" style="display: none;"> 
    <input ... /> 
    <input ... /> 
    <a href="#" id="save-optional-inputs">'Save' optional questions</a> 
</div> 

<input type="submit" value="submit" /> 

Ensuite, donnez la #optional-inputs certains CSS (ou vous pouvez le dénommer comme bon vous semble):

#optional-input { 
    left: ...px; 
    position: absolute; 
    top: ...px; 
    width: ...px; 
} 

Pour le bouton/lien qui ouvre les autres questions, ajouter un peu de JavaScript/jQuery pour ouvrir la div en tant que fenêtre positionnée en absolu.

$('#show-optional-inputs').click(function(e) { 
    $('#optional-inputs').show(); 
    e.preventDefault(); 
}); 

Vous y serez pour la plupart. Vous devez lier un événement pour déclencher la boîte de questions facultatives à enregistrer/fermer - ce qui en fait cache la boîte et conserve les valeurs que l'utilisateur a définies dans le formulaire.