wake-up-neo.com

javascript Senden Sie mehrere Formulare mit einer Schaltfläche

In meiner HTML-Datei habe ich mehrere Formulare (Texteingaben, Optionsfelder, Kontrollkästchen und Auswahl) und eine Schaltfläche. Ich möchte alle diese Formulare ausfüllen und Werte an meine PHP-Datei senden. Im Moment versuche ich, Werte aus der Texteingabe zu übermitteln und auszuwählen, aber ich stehe an diesem Punkt fest.

Ich habe eine js Submit-Datei:

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

Und meine Formulare sind wie folgt: 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>

Texteingabeformular + Schaltfläche:

 <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()"/>

Das funktioniert aber nicht. Kannst du mir bitte helfen? Vielen Dank

8
user2886091

Hier ist ein einfaches Beispiel für eine native Javascript-Implementierung.

<!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

Es ist einfacher, nur ein Formular einzureichen. Sie können Ihrem select- und input-Tag den gleichen Namen geben, indem Sie form = "your-form-id" zuweisen. 

1
Pei Guo

Nachdem Sie ein Formular übermittelt haben, lädt Ihre Seite das Javascript nach dem Senden des Formulars neu oder beendet es. Verwenden Sie Ajax daher besser, um mehrere Formulare gleichzeitig zu senden

mit 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
           },
       });
    });
});

Der obige Code sendet jedes Formular, wenn Sie auf eine Schaltfläche mit der ID sub klicken. 

0
Vikas Kandari

Sie könnten es versuchen. Wenn Sie alle Formulare übermitteln, reicht Ihre Seite aus

 $('form').submit();

Funktion, die tatsächlich verwendet wird:

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