2016-08-30 10 views
0

私は最近ウェブサイトを作成するよう依頼されましたが、私はまだ完全にコースを通過していません。私はウェブサイトを作るときに勉強しています。もちろん、私が邪魔になるところに沿ってポイントにつながります。最初に支払われたウェブサイトでPHPフォームの提出について混乱しました

通常、私自身の研究をしていますが、今度もそうしましたが、私はまだPHPフォームの提出について混乱しています。

現在のところ、氏名、メールアドレス、電話番号、メッセージを送信できる米国の連絡先ページがあります。これまで厳密にはHTML、CSS、ブートストラップであり、このページにはPHPはありません。

私のコースのPHPセクションを2〜3回、google検索しましたが、別の.phpファイルで厳密にPHPフォームを作成しました。私はローカルサーバーとしてMAMPを使用していますが、localhost:8888と入力すると、ページが表示され、フォームの送信は正常に動作します。ここに私のPHPコードは次のとおりです。

<!DOCTYPE HTML> 
<html> 
<head> 
</head> 

<body> 

    <?php 
// define variables and set to empty values 
    $fnameErr = $emailErr = $messageErr = ""; 
    $fname = $lname = $email = $message = ""; 

if ($_SERVER["REQUEST_METHOD"] == "POST") { 

    if (empty($_POST["fname"])) { 
    $fnameErr = "Name is required"; 
    } else {   
     $fname = test_input($_POST["fname"]); 
if (!preg_match("/^[a-zA-Z ]*$/",$fname)) { 
    $fnameErr = "Please enter a valid name"; 
} else 

    $fname = test_input($_POST["fname"]); 
    } 

    $lname = test_input($_POST["lname"]); 

    if (empty($_POST["email"])) { 
    $emailErr = "Email is required"; 
    } else { 
    $email = test_input($_POST["email"]); 
    // check if e-mail address is well-formed 
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { 
     $emailErr = "Invalid email format"; 
    } 
    } 

    $phone = test_input($_POST["phone"]); 

if (empty($_POST["message"])) { 
    $messageErr = "Please enter a message"; 
    } else { 
    $message = test_input($_POST["message"]); 
    } 

} 

function test_input($data) { 
    $data = trim($data); 
    $data = stripslashes($data); 
    $data = htmlspecialchars($data); 
    return $data; 
} 
?> 

     * Required Field 
     <br> 
     <br> 
     <form method="post" action=""> 

      <input type="text" name="fname" class="form-control input-lg" placeholder="First Name" value="<?php echo $fname;?>"> 
      <span class="error">* <?php echo $fnameErr;?></span> 
      <br> 


      <input type="text" name="lname" class="form-control input-lg" placeholder="Last Name" value="<?php echo $lname;?>"> 
      <br> 

      <input type="text" name="email" class="form-control input-lg" placeholder="Email" value="<?php echo $email;?>"> 
      <span class="error">* <?php echo $emailErr;?></span> 
      <br> 

      <input type="text" name="phone" class="form-control input-lg" placeholder="Phone" value="<?php echo $phone;?>"> 
      <br> 

      <textarea class="form-control" name="message" rows="8" placeholder="Message" value="<?php echo $message;?>"></textarea> 
      <span class="error">* <?php echo $messageErr;?></span> 
      <br> 

      <button class="btn" type="submit" name="contact_submit">Submit</button> 
     </form> 

     <?php 
echo "<h2>Your Input:</h2>"; 
echo $fname; 
echo "<br>"; 
echo $lname; 
echo "<br>"; 
echo $email; 
echo "<br>"; 
echo $phone; 
echo "<br>"; 
echo $message; 
echo "<br>"; 
?> 

</body> 

</html> 

今、私は何をしようとしているユーザーがHTMLページ上で投稿ボタンを押したときに、このコードがトリガされるように取得することです。私はユーザーが常にページにとどまりたいと思っています。現時点では、ユーザが送信ボタンをクリックすると、PHPページにリダイレクトされます。フォームにはPHPコードがあらかじめ入力されています。フォームaction彼が提出ヒットしたときに、ユーザーがphp/get_post.phpにリダイレクトされます属性を1として

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>The Friendly Medium</title> 

    <!-- Bootstrap --> 
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/CStyles.css" rel="stylesheet"> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 

</head> 

<body> 

    <div id="wrapper"> 

     <div id="content"> 

      <nav class="navbar navbar-fixed-top navbar-inverse"> 
       <div class="container"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> 
          <span class="sr-only">Toggle navigation</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 

        </div> 
        <div class="collapse navbar-collapse" id="navbar-collapse"> 
         <ul class="nav navbar-nav"> 

          <a class="navbar-brand"> 
           <img style="max-width:214px; 
            margin-top: -3px; 
            margin-left:-514px;" src="img/Logo.png"> 
          </a> 

          <li> 
           <a href="home.html">Home</a> 
          </li> 
          <li> 
           <a href="bookings.html">Bookings</a> 
          </li> 
          <li> 
           <a href="about.html">About</a> 
          </li> 
          <li class="active"> 
           <a href="contact.html">Contact Us</a> 
          </li> 

         </ul> 
        </div> 
       </div> 
      </nav> 

      <section class="contact"> 
       <div class="container"></div> 
       <p>Please fill out the form below</p> 
       <h5>* Reqired Field</h5> 


       <div class="container"> 
        <form action="php/get_post.php" method="post"> 


         <input type="text" name="fname" class="form-control input-lg" placeholder="First Name*"> 

         <input type="text" name="lname" class="form-control input-lg" placeholder="Last Name"> 

         <input type="text" name="email" class="form-control input-lg" placeholder="Email*"> 

         <input type="text" name="phone" class="form-control input-lg" placeholder="Phone"> 

         <textarea class="form-control" name="message" rows="8" placeholder="Message*"></textarea> 

         <button class="btn" type="submit" name="contact_submit">Submit</button> 


        </form> 

       </div> 
      </section> 


      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
      <!-- Include all compiled plugins (below), or include individual files as needed --> 
      <script src="bootstrap/js/bootstrap.min.js"></script> 

      <div id="footer">2016</div> 
     </div> 
    </div> 

</body> 

</html> 
+0

を試してみてください この場合、JavascriptのAJaxを調べなければならない場合があります。私はあなたのコードを必要以上に複雑にしていると思います。 – GrumpyCrouton

答えて

0

:ここに私のHTMLファイルからコードがあります。私はあなたが入力したPHPコードだと仮定していますか?ファイルの先頭に$phoneのような変数を設定しています。これは、ユーザーがページに行くときに、$_POSTの値がHTMLと同じフォームに印刷されることを意味します。

あなたがする必要がありそうでない場合は、あなただけの登録を処理し、バックフロントページにユーザーをリダイレクトし、$_POST値の誤差がある場合、あなたのエラーチェックとを作成するように、フォームを表示するPHPコードをラップフォームにはvalue属性がありません。

リコルトを使用して$_POSTの値を返し、同じフォームを使用することで、重複した重複コードを書き込まないようにすることもできます。あなたは常にJavaScriptが無効になっているそこに人がいるので、トッピングを作成するためにJavaScriptを使用して、その後、最初のPHPで行けば、私の意見では

if (empty($_POST["fname"])) { 
    $fnameErr = "Name is required"; 
} 

if(!empty($fnameErr)) { 
    // Show HTML form where values are set 
} else { 
    // Handle registration and redirect user back 
} 

今実際の質問です。

リロードしないでリダイレクトしないようにするには、JavaScript、具体的にはjQuery $.ajaxをよく知っておく必要があります。

基本的なAJAX要求(JavaSript)は次のようになります。

$('form').submit(function() { 
    $.ajax({ 
    url: 'php/get_post.php', 
    type: 'post' 
    data: $(this).serialize(), 
    success: function(response) { 
     // Handle notificationsetc. 
    } 
    }); 
}); 
0

PHPのフォームの固有の性質は、サーバー側のスクリプトを実行することです。スクリプトが完了したら、ユーザーが連絡先ページに戻ってくるようにするには、長さhereで説明されているPHPリダイレクトを使用する必要があります。

0

フォームを送信するときに、ページをリロードしたくないですか?この

<!DOCTYPE html> 
<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<title>The Friendly Medium</title> 

<!-- Bootstrap --> 
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
<link href="css/CStyles.css" rel="stylesheet"> 

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
<!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
<![endif]--> 

</head> 

<body> 

<div id="wrapper"> 

    <div id="content"> 

     <nav class="navbar navbar-fixed-top navbar-inverse"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 

       </div> 
       <div class="collapse navbar-collapse" id="navbar-collapse"> 
        <ul class="nav navbar-nav"> 

         <a class="navbar-brand"> 
          <img style="max-width:214px; 
           margin-top: -3px; 
           margin-left:-514px;" src="img/Logo.png"> 
         </a> 

         <li> 
          <a href="home.html">Home</a> 
         </li> 
         <li> 
          <a href="bookings.html">Bookings</a> 
         </li> 
         <li> 
          <a href="about.html">About</a> 
         </li> 
         <li class="active"> 
          <a href="contact.html">Contact Us</a> 
         </li> 

        </ul> 
       </div> 
      </div> 
     </nav> 

     <section class="contact"> 
      <div class="container"></div> 
      <p>Please fill out the form below</p> 
      <h5>* Reqired Field</h5> 


      <div class="container"> 
           <?php 
           if(isset($_POST["contact_submit"])){ 
            $passed=FALSE; 
       // define variables and set to empty values 
        $fnameErr = $emailErr = $messageErr = ""; 
        $fname = $lname = $email = $message = ""; 

       if ($_SERVER["REQUEST_METHOD"] == "POST") { 

        if (empty($_POST["fname"])) { 
        $fnameErr = "Name is required"; 
        $passed=FALSE; 
        } else {   
         $fname = test_input($_POST["fname"]); 
       if (!preg_match("/^[a-zA-Z ]*$/",$fname)) { 
        $fnameErr = "Please enter a valid name"; 
        $passed=FALSE; 
       } else 

        $fname = test_input($_POST["fname"]); 
        $passed=TRUE; 
        } 

        $lname = test_input($_POST["lname"]); 

        if (empty($_POST["email"])) { 
        $passed=FALSE; 
        $emailErr = "Email is required"; 
        } else { 
        $email = test_input($_POST["email"]); 
        // check if e-mail address is well-formed 
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { 
         $passed=FALSE; 
         $emailErr = "Invalid email format"; 
        }else{ 
         $passed=TRUE; 
        } 
        } 

        $phone = test_input($_POST["phone"]); 

       if (empty($_POST["message"])) { 
        $messageErr = "Please enter a message"; 
        $passed=FALSE; 
        } else { 
        $passed=TRUE; 
        $message = test_input($_POST["message"]); 
        } 

       } 

       function test_input($data) { 
        $data = trim($data); 
        $data = stripslashes($data); 
        $data = htmlspecialchars($data); 
        return $data; 
       } 
       if($passed) 
       { 
       echo "<h2>Your Input:</h2>"; 
       echo $fname; 
       echo "<br>"; 
       echo $lname; 
       echo "<br>"; 
       echo $email; 
       echo "<br>"; 
       echo $phone; 
       echo "<br>"; 
       echo $message; 
       echo "<br>"; 
       } 
       } 
       ?> 
       <form action="" method="post"> 


        <input type="text" name="fname" class="form-control input-lg" placeholder="First Name*"><span class="error">* <?php echo $fnameErr;?></span> 

        <input type="text" name="lname" class="form-control input-lg" placeholder="Last Name"> 

        <input type="text" name="email" class="form-control input-lg" placeholder="Email*"><span class="error">* <?php echo $emailErr;?></span> 

        <input type="text" name="phone" class="form-control input-lg" placeholder="Phone"> 

        <textarea class="form-control" name="message" rows="8" placeholder="Message*"></textarea><span class="error">* <?php echo $messageErr;?></span> 

        <button class="btn" type="submit" name="contact_submit">Submit</button> 


       </form> 

      </div> 
     </section> 


     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <!-- Include all compiled plugins (below), or include individual files as needed --> 
     <script src="bootstrap/js/bootstrap.min.js"></script> 

     <div id="footer">2016</div> 
    </div> 
</div> 

</body> 

</html> 
+1

皆様お返事ありがとうございます。あなたが投稿したことの多くは、現時点で私の頭の上に少しビットですが、私はそれから学ぶものを実装しようとすると戻って報告します。 – Brandon

関連する問題