Wie würden Sie diese Webseite mit mehreren Formularen gestalten?

Question

Ich habe derzeit eine einfache PHP/HTML-Seite mit nur einem Formular, wo der Benutzer eine Nummer eingibt, dann lädt sich die Seite selbst (aber diesmal mit Parametern).

Einige Schlüsselcodezeilen:

<form action="index.php" method="get"> 
    <input type="text" name="name"> 
    <input type="submit" value="Submit"> 
</form> 


<?php 
    if (!isset ($_GET["name"])) { 

    echo "<div> Adding some content related to the input </div>"; 
    } 
?>             

Jetzt freue ich mich, indem 3 weitere Felder, und spaltete meine Seite für jedes Formular. Der Benutzer sollte frei sein, die 4 Formulare getrennt zu verwenden, ich möchte die Seite nicht jedes Mal neu laden. Ich bin mir nicht sicher, wie ich diese Seite gestalten soll - sollte ich meine Seite überarbeiten und mit JS arbeiten?

Ich habe Grundkenntnisse mit PHP, ein wenig mit JS. Ich werde googeln können die meisten Dinge, die ich brauche, aber zuerst brauche ich eine richtige Richtung :) danke!

Answer 1

Sie können AJAX verwenden zu diesem Zweck ...

$(document).ready(function() { 

// process the form 
$('form').submit(function(event) { 

    // get the form data 
    // there are many ways to get this data using jQuery (you can use the class or id also) 
    var formData = { 
     'name'    : $('input[name=name]').val(), 
     'email'    : $('input[name=email]').val(), 
    }; 

    // process the form 
    $.ajax({ 
     type  : 'POST', // define the type of HTTP verb we want to use (POST for our form) 
     url   : 'process.php', // the url where we want to POST 
     data  : formData, // our data object 
     dataType : 'json', // what type of data do we expect back from the server 
     encode  : true 
    }) 
     // using the done promise callback 
     .done(function(data) { 

      // log data to the console so we can see 
      console.log(data); 

      // here we will handle errors and validation messages 
     }); 

    // stop the form from submitting the normal way and refreshing the page 
    event.preventDefault(); 
}); 

});

Answer 2

Wenn Sie die Seite nicht jedes Mal neu laden möchten, wenn Sie jedes Formular absenden, sollten Sie Ajax zum Aufrufen Ihrer API verwenden. Sie schreiben die separate API in PHP und rufen dann diese API in Jquery's Ajax auf.

Hier wird die Seite nicht neu geladen. Sie können auch die Ajax bei jedem Klick auf die Schaltfläche aufrufen.

Answer 3

AJAX ist ein Muss, wenn Sie nicht möchten, dass die Seite zwischen den einzelnen Aktionen neu geladen wird.

Wenn Sie Probleme damit haben und nur PHP (mit Seitenladefunktionen) verwenden möchten, können Sie mehrere Formulare auf einer Seite problemlos verarbeiten - meine bevorzugte Methode besteht darin, einen versteckten Wert in den sogenannten 'Aktion'-Einstellungen festzulegen sein Wert & dies wieder zu lesen, wenn die Seite geladen wird zum Beispiel:

<?php if(isset($_POST['action'])) 
{ 
    $action = $_POST['action']; 


    switch ($action) 
    { 
     case 'hello': 

       echo 'hello'; 

     break; 



     case 'bye': 

       echo 'bye'; 

     break; 


    } 

} 

?> 


<form method="post" action="Untitled-5.php"> 
<input type="hidden" name="action" value="hello"/> 
<input type="submit" value="hello"/> 

</form> 



<form method="post" action="Untitled-5.php"> 
<input type="hidden" name="action" value="bye"/> 
<input type="submit" value="bye"/> 

</form> 

Sie könnten dann bilden sie, wenn der Benutzer mit jedem der Formen interagiert aktualisiert jedes Mal für jeweils die Werte speichern und echo aus.

AJAX ist die schönere Lösung jedoch