web-dev-qa-db-fra.com

javascript Soumettre plusieurs formulaires avec un seul bouton

Dans mon html, j'ai plusieurs formulaires (entrées de texte, boutons radio, cases à cocher et sélectionner) et un bouton. Je voudrais remplir tous ces formulaires et envoyer des valeurs à mon fichier php. Pour l'instant, j'essaie de soumettre des valeurs à partir de la saisie de texte et de sélectionner mais je suis bloqué à ce stade.

J'ai un fichier js submit:

 submitForms = function(){
  document.getElementById("form1").submit();
  document.getElementById("form2").submit();
 }

Et mes formes sont comme ceci: SELECT:

 <form id ="form1" name="dists" action="solve.php" method="post">
        <select id="demo" name="sadzba" onchange="selectElement1(this.value)>
                <option value="">-- vyberte oblasť --</option>
        </select>
    </form>

Formulaire de saisie de texte + bouton:

 <form id="form2" action="solve.php" method="post">
    <input type="text" name="spotVT" ><label>kWh za rok VT</label>
    <div id="nt" style='display:none'><input type="text" name="spotNT"  ><label>kWh za rok NT</label></div>

    </form>
 <input id="sub" type="button" value="Ok" style="margin-left:15px;" onclick="submitForms()"/>

Mais ça ne fonctionne pas. Pouvez-vous m'aider s'il vous plaît? Je vous remercie

javascriptjqueryformssubmitform-submit
8
user2886091

Voici un exemple simple d'implémentation Javascript native.

<!DOCTYPE html>
<html>
<head>
    <title>Multiform - JAVASCRIPT</title>
</head>
<body>

<fieldset>
    <legend>Form 1</legend>
    <form name="f1" id="f1" onsubmit="return validate(this)">
        <input type="text" name="username" placeholder="Username" />
    </form>
</fieldset>

<fieldset>
    <legend>Form 2</legend>
    <form name="f2" id="f2" onsubmit="return validate(this)">
        <input type="text" name="email" placeholder="Email" />
    </form>
</fieldset>

<fieldset>
    <legend>Form 3</legend>
    <form name="f3" id="f3" onsubmit="return validate(this)">
        <input type="text" name="password" placeholder="Password" />
    </form>
</fieldset>

<button onclick="submitAll();">SUBMIT ALL</button>

<script>
'use strict';

function validate(form){
    //forms processsing goes here...
    console.log(form, form.name)
    return false;
}

function submitAll(){
    for(var i=0, n=document.forms.length; i<n; i++){
        document.forms[i].onsubmit();
    }

}

</script>

</body>
</html>
1
Jhan Mateo

Il sera plus facile de ne soumettre qu'un seul formulaire. Vous pouvez attribuer le même nom à votre balise select et input en affectant form = "your-form-id". 

1
Pei Guo

Une fois que vous avez soumis un formulaire, votre page recharge ou met fin au javascript après l'envoi de ce formulaire. Il est donc préférable d'utiliser Ajax pour soumettre plusieurs formulaires en même temps

avec jquery 

$("#sub").click(function(){
    $("form").each(function(){
        var fd = new FormData($(this)[0]);
        $.ajax({
            type: "POST",
            url: "solve.php",
            data: fd,
            processData: false,
            contentType: false,
            success: function(data,status) {
               //this will execute when form is submited without errors
           },
           error: function(data, status) {
               //this will execute when get any error
           },
       });
    });
});

Le code ci-dessus soumettra chaque formulaire lorsque vous cliquez sur un bouton avec l'id sub  

0
Vikas Kandari

Vous pouvez essayer ceci. Si soumettre tous les formulaires convient à votre page

 $('form').submit();

Fonction actuellement utilisée:

function trySubmitAllForms() {
    if ($('.saveSpinner').is(':visible')) {
        return;
    }
    if ($('form').valid()) {
        $('.saveSpinner').show();
        $('form').submit();
    } else {
        showValidationErrorMessages();
    }
}
0
Frog