このウェブページを複数のフォームでどのようにデザインしますか？

Question

私は現在、フォームを1つしか持たない単純なphp/htmlページを持っています。ユーザーが数字を入力すると、ページがロードされます（ただし今回はパラメータ付きです）。

いくつかのキーコードライン：今、私は楽しみにして3つの以上のフィールドを追加し、各フォームのための私のページを分割してい

<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>"; 
    } 
?>             

。 ユーザーは自由に4つのフォームを使用する必要があります。毎回ページをリロードする必要はありません。私はこのページをどのようにデザインするのか分かりません。私はページを修正してJSで作業すべきでしょうか？

私はPHPで基本知識がありますが、JSでは少しです。私は私が必要とするほとんどのものをgoogleすることができるだろうが、まず私は適切な方向が必要:)感謝！

Answer 1

あなたは、この目的のためにAJAXを使用することができます...

$(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

各フォームを送信するたびにページをリロードする必要がない場合は、apiを呼び出すためにAjaxを使用する必要があります。別のAPIをPHPで書いて、JqueryのAjaxでそのAPIを呼び出します。

ここではページは再読み込みされません。また、ボタンをクリックするたびにajaxを呼び出すことができます。

Answer 3

各インタラクションの間にページをリロードする必要がない場合は、AJAXが必須です。

問題があり、PHP（ページの再読み込みあり）を選択したい場合は、1ページで複数のフォームを簡単に処理することができます。私の優先メソッドは、「アクション」設定その値&は、例えば、再びページのロード時にこれを読んで：

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

あなたは、ユーザーがフォームのそれぞれと相互に作用するように更新それらを維持するたびに保存し、各フォームの値をエコー可能性があります。

しかし、AJAXはより良い解決策です。