wake-up-neo.com

HTML-Formular "Aktion" ausführen, wenn auf "Senden" geklickt wird

Ich möchte mehr über HTML-Formulare erfahren. Zum Beispiel habe ich 2 Eingabetextfelder für Vor- und Nachnamen und eine Senden-Schaltfläche. Wenn Sie auf die Schaltfläche "Senden" klicken, möchte ich, dass auf der Webseite Folgendes angezeigt wird: Ihr Name ist "Vorname" "Nachname".

<!DOCTYPE html>
<html>
   <body>
      <form>
         First name: <input type="text" name="firstname" /><br />
         Last name: <input type="text" name="lastname" /><br />
         <input type="submit" value="Submit" />
      </form> 
   </body>
</html>

Was muss ich hier haben, um eine "Aktion" zu haben, wenn ich auf diese Schaltfläche klicke?

Edit: Ok jetzt finde ich heraus, dass ich entweder PHP oder JavaScript hier brauche. Kann jemand einen Beispielcode vorschlagen oder bereitstellen von PHP oder Js als Referenz für mich?

Ok, ich werde es versuchen. Wenn Sie mit PHP arbeiten möchten, müssen Sie sowohl PHP als auch einen Webserver auf Ihrem Computer installieren und konfigurieren. In diesem Artikel erhalten Sie möglicherweise erste Schritte: PHP Manual: Installation unter Windows Systeme

Sobald Sie Ihre Umgebung eingerichtet haben, können Sie mit Webformularen arbeiten. Direkt aus dem Artikel: Verarbeitung von Formulardaten mit PHP :

Für dieses Beispiel müssen Sie zwei Seiten erstellen. Auf der ersten Seite erstellen wir ein einfaches HTML-Formular, um einige Daten zu sammeln. Hier ist ein Beispiel:

<html>   
<head>
 <title>Test Page</title>
</head>   
<body>   
    <h2>Data Collection</h2><p>
    <form action="process.php" method="post">  
        <table>
            <tr>
                <td>Name:</td>
                <td><input type="text" name="Name"/></td>
            </tr>   
            <tr>
                <td>Age:</td>
                <td><input type="text" name="Age"/></td>
            </tr>   
            <tr>
                <td colspan="2" align="center">
                <input type="submit"/>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Diese Seite sendet die Daten Name und Alter an die Seite process.php. Jetzt können Sie process.php erstellen, um die Daten aus dem von uns erstellten HTML-Formular zu verwenden:

<?php   
    print "Your name is ". $Name;   
    print "<br />";   
    print "You are ". $Age . " years old";   
    print "<br />";   $old = 25 + $Age;
    print "In 25 years you will be " . $old . " years old";   
?>

Wie Sie vielleicht wissen, zeigt die URL mit den Daten, wenn Sie den method = "post" -Teil des Formulars weglassen. Wenn Sie beispielsweise Bill Jones heißen und 35 Jahre alt sind, wird auf unserer Seite process.php Folgendes angezeigt: http://yoursite.com/process.php?Name=Bill+Jones&Age=35 If Wenn Sie möchten, können Sie die URL auf diese Weise manuell ändern, und die Ausgabe wird entsprechend geändert.

Zusätzliches JavaScript-Beispiel

In diesem Beispiel für eine einzelne Datei wird der HTML-Code aus Ihrer Frage übernommen und das Ereignis onSubmit des Formulars mit einer JavaScript-Funktion verknüpft, die die Werte der beiden Textfelder abruft und in einem Warnungsfeld anzeigt.

Hinweis : document.getElementById("fname").value ruft das Objekt mit dem ID -Tag ab, das fname entspricht, und zieht dann Es ist value - in diesem Fall der Text im Textfeld Vorname.

 <html>
    <head>
     <script type="text/javascript">
     function ExampleJS(){
        var jFirst = document.getElementById("fname").value;
        var jLast = document.getElementById("lname").value;
        alert("Your name is: " + jFirst + " " + jLast);
     }
     </script>

    </head>
    <body>
        <FORM NAME="myform" onSubmit="JavaScript:ExampleJS()">

             First name: <input type="text" id="fname" name="firstname" /><br />
             Last name:  <input type="text" id="lname" name="lastname" /><br />
            <input name="Submit"  type="submit" value="Update" />
        </FORM>
    </body>
</html>
25
xelco52

index.html

<!DOCTYPE html>
<html>
   <body>
       <form action="submit.php" method="POST">
         First name: <input type="text" name="firstname" /><br /><br />
         Last name: <input type="text" name="lastname" /><br />
         <input type="submit" value="Submit" />
      </form> 
   </body>
</html>

Danach noch eine Datei, welche Seite Sie anzeigen möchten, nachdem Sie den Submit-Button gedrückt haben

submit.php

<html>
  <body>

    Your First Name is -  <?php echo $_POST["firstname"]; ?><br>
    Your Last Name is -   <?php echo $_POST["lastname"]; ?>

  </body>
</html>
1
Amaresh Tiwari