Bonjour, j'ai un fichier html avec cette structure:

<div class="row">
<div class="col">
    <div></div>
    <div>
        <form name="form" action="action1.php" method="post">
            <input type="number" name="number">
        </form>
    </div>
</div>
<div class="col">
    <div></div>
    <div>
        <form name="form" action="action1.php" method="post">
            <input type="email" name="email">
        </form>
    </div>
</div>
<div class="col">
    <div></div>
    <div>
        <form name="form" action="action1.php" method="post">
            <input ...>
        </form>
    </div>
</div>
</div>
<div class="mt-3">
    <button class="btn" type="submit">Continue</button>
</div>

Est-ce que je peux premierement avoir ce genre de page ? Deuxiemement, comment puis-je soumettre tous ces formulaires comme si c'etait un seul donc le bouton Continue va soumettre un unique formulaire avec les champs [number], [email], [...] ?

Des avis s'il vous plait. Toute idee pour le faire m'aiderait, ou meme une alternative

Bonjour un form avec un name bizarre si je ne dis pas de bêtise cet attribut est reservé aux champs d'entrée input,textarea ect

Ensuite solution pour les soumettre en 1 bah tout mettre en 1. Si l'esthétique est le soucis ca doit pouvoir se gérer en css par exemple dans ton cas ouvrir la balise form au dessus de la première div du code que tu as posté et la fermer après 

ou alors mettre un evenement sur le ou les bouttons d'envoi et ses événements appelleraient une seule et meme fonction qui construirait un new FormData() et via append ajouterait les infos de tous les formulaires dans ce nouveau formulaire.

Suite à quoi tu peux envoyer ton formulaire en js si tu as besoin d' un exemple hésite pas de toutes manières j'en ferai un plus tard

edit : voici l'exemple pour l'adapter a ton formulaire tu auras juste à mettre à jour let form_list mais tu peux tester déjà avec ça le html des formulaires de test (par contre je n'ai pas fait de gestion de fichiers long pour un exemple tu peux je pense l'ajouter facilement si besoin)

<form class="form_1">
    <input type="text" name="user_name">
    <input type="email" name="user_email">
    <button>Send</button>
</form>

<form id="form_2">
    <input type="password" name="user_password">
    <button>send</button>
</form>

le javascript

window.addEventListener('load',() => {

    let get_final_form = (form_list,submit_name = 'send_button') => {

        let final_form = new FormData()

        form_list.forEach(form => {

            form.form_entries_name.forEach(entry_name => {

                final_form.append(entry_name,document.querySelector(`${form.form_selector} [name="${entry_name}"]`).value )
            })
        })

        final_form.append(submit_name,'true')

        return final_form
    }

    let form_list = [
        {
            'form_selector' : '.form_1',
            'form_entries_name' : ['user_name','user_email']
        },
        {
            'form_selector' : '#form_2',
            'form_entries_name' : ['user_password']
        }
    ]

    form_list.forEach(form => {

        document.querySelector(form.form_selector).addEventListener('submit',submit_event => {

            submit_event.preventDefault()

            // ton formulaire sera ici a toi d'en faire ce que tu veux
            let final_form = get_final_form(form_list,'nom_du_boutton_d_envoi')

            console.log(final_form.get('user_email') )
        })
    })
})

-
Edité par zvheer 25 mai 2022 à 23:41:34

Bonjour.

Si tu veux transmettre tous les formulaires... il suffit de n'en faire qu'un.

J'avoue que je ne comprends pas ce que tu cherches à obtenir en les multipliant.

Avoir des input qui ont le même nom a souvent un intérêt comme par exemple lorsqu'on a un liste d'articles qui ont chacun un prix, un nombre en stock etc. (le nom doit être alors suffixé par des accolade : <input name="monNom[]">)

Mais le name d'un form ne sert qu'à appeler facilement un de ses éléments par JS et n'a aucun intérêt côté serveur vu qu'il n'est pas transmis

Cordialement.

<form name=formu>
    <input type=text name="input1">
    <input type=text name="input2">

document.formu.input1.value= 'premier input'

-
Edité par Domi65 26 mai 2022 à 0:39:47

>Ensuite solution pour les soumettre en 1 bah tout mettre en 1. Si l'esthétique est le soucis ca doit pouvoir se gérer en css par exemple dans ton cas ouvrir la balise form au dessus de la première div du code que tu as posté et la fermer après 

J'ai finalement opté pour ceci, j'ai mis mon .container dans un form. L'affichage reste le meme et j'ai plus besoin de plusieurs forms. C'est mieux que de se compliquer la tache pour ensuite appeler une longue fonction js pour avoir un seul form final, Merci pour le code.

Domi65 a écrit:

J'avoue que je ne comprends pas ce que tu cherches à obtenir en les multipliant.

Avoir des input qui ont le même nom a souvent un intérêt comme par exemple lorsqu'on a un liste d'articles qui ont chacun un prix, un nombre en stock etc. (le nom doit être alors suffixé par des accolade : <input name="monNom[]">)

Mais le name d'un form ne sert qu'à appeler facilement un de ses éléments par JS et n'a aucun intérêt côté serveur vu qu'il n'est pas transmis

Cordialement.

-
Edité par Domi65 il y a 11 minutes

Sur ma page j'avais plusieurs inputs un peu de partout juste un seul et même formulaire. En mettant les balises form "net" pour contenir les inputs le rendu n'était pas comme je voulais donc j'ai pensé a mettre chaque input dans un form et a la fin creer un submit button pour tous les envoyer comme si c'etait un seul. J'ai changé d'avis et j'ai juste augmenté la "portée" du form.