2016-03-20 11 views
4

最初の投稿。 PHPのnoob。私はこれがいかに難しいかに驚いています...ユーザーがhtml形式で送信をクリックしたときに緑色のチェックマークを表示したい場合

私は、phpファイル(sendemail.php)に投稿する送信ボタン付きのhtmlフォーム(index.html)を持っています。

phpファイルはフォームデータを収集し、指定したアドレスに電子メールで送信するように設定されています。

このメールを送信すると、送信ボタンの横に成功アイコンが表示されます。 (正直なところ、失敗条件はないので、ユーザーが[送信]をクリックしたときに成功アイコンを表示するだけで満足しているので、[送信]をクリックしないでください)。

これをはじめ多くのフォーラムを読んだ後、私は多くのアプローチを試みました。私はこれを2日間行っていて、何か助けを得ることができた。

以下にいくつかの抜粋を示します。私は基本的にPHPファイルで送信されている電子メールを検出し、echo json_encodeを使ってHTMLページにフラグ($ val)を送信しようとしています。私はonloadトリガでjavascriptを使ってキャプチャしようとしていますし、送信アクションが完了した後にページがリフレッシュされるときにjavascriptを使ってDIV visibilityを操作しようとしています。

これはPHPを処理しますが、ヘッダー行に達してhtmlページをリロードするようには見えません。画面をリフレッシュして、「インライン」という言葉だけを表示します。

私は困惑しています。助けてください!

:HTMLのおかげで

sendmail.php

// Check, if message sent to your email 
// mark success or fail then refresh page 

if($send_contact){ 


$val="inline"; 
echo json_encode($val); 

} 
else { 
echo "Error"; 

} 

if($send_contact){ 
header('location:index.html'); 

} 
else { 
echo "Error"; 
} 
?> 

Javascriptを

<script type="text/javascript"> 
     function success(){ 
     var val = <?php echo json_encode($val); ?>; 
     document.getElementById('success').setAttribute('display', val); 

     } 
     window.onload = success; 
    </script> 

HTMLのDIV私は

<div style="text-align: left; font-weight: bold; color:#000000; display:val;" 

       class="success" id="success" name="success"><img src="success.png" 

        height="25px">Event added! It may take 20 minutes to appear on 
       the calendar. </div> 

UPDATEをコントロールしようとしています10

私はmanRoの提案を試み、緑色のチェックマークから必要な動作を得ることができました。ページロード時に隠され、PHPファイルから200ステータスメッセージを受け取ったときに表示されます。

私はこの論理を自分のAjaxに組み込もうとすると何かが壊れていて、フォームデータは送信されなくなり、緑のチェックマークロジックが機能しなくなります。

私の更新を介して実行することを許可する:

現在、私のスクリプトのヘッダーは次のようになります。

<script type="text/javascript" src="util-functions.js"></script> 
<script type="text/javascript" src="clear-default-text.js"></script> 
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script> 

私は緑のチェックマークを設定する機能を呼び出すために、体内でのonloadを持っていますただきちんと物事を保つために、 "非表示":

<body onload="setdisplay()"> 

は、この関数を呼び出す:

を私は私のフォームは次のように始め

<form id="main" name="main" action=""> 

は、ここでの例入力です:

<td style="text-align: right; "> <br> 
     </td> 
     <td><input id="title" name="title" value="Event title" class="cleardefault rounded" 

      required="true" type="text"> </td> 

フォームが現在のタイプで、ボタンを提出=ボタン

<input style="background-color: #99d6ff; text-align:center; 

font-weight:bold; "value ="イベントを追加する "id =" addevent "name =" addevent "onclick =" processmain(); "

  class="button" type="button"> 

これは私が成功に応じて、表示または非表示にする必要がありDIVです:今、がっしりした体格一部

<div style="text-align: left; font-weight: bold; color:#000000; display:none;" 

      class="success" id="success" name="success"><img src="success.png" 

       height="25px"></div> 

....私は私のメインフォーム処理にあなたのmanRoの提案を統合しようとしました現時点で

 <script> 
     } 
     function processmain() 
{ 



    // event.preventDefault(); 



     var title = $("input#title").val(); 
    var location = $("input#location").val(); 
    var startdate = $("input#startdate").val(); 
    var starttime = $("input#starttime").val(); 
    var enddate = $("input#enddate").val(); 
    var endtime = $("input#endtime").val(); 
    var other = $("input#other").val(); 


    $.ajax({ 



     url: "sendemail.php", 
     type:'POST', 
     data: 
     { 
      title: "title", 
      location: "location", 
      startdate: "startdate", 
      starttime: "starttime", 
      enddate: "enddate", 
      endtime: "endtime", 
      other: "other" 
     }, 
     success: function(event) 
     { 
      $.get('sendmail.php', function(data) { 
     document.getElementById("success").style.display = "inline"; 
      })    
     }  
    });} 

    </script> 

:AJAX「成功」状態の一部としてスクリプト、フォームデータをPHP に渡されていない 緑のチェックマークは、を表示しません。画面は更新されなくなりました(提出するのではなくボタンタイプ=ボタンなので)。

私は近くにいるように感じます。私は電子メールが送信されるようにPHPに送信されたフォームデータを取得する必要があります。私は適切に緑色のチェックマークを導入することができるように、ページをリフレッシュしないようにする必要があります。

私のコードであなたのソリューションを実装する方法を見て、私が間違っていることを教えてください。ありがとうございました!!

+0

あなたは 'エコーjson_encode後にヘッダを送信することはできません( $ val); '確認してくださいhttp://php.net/manual/en/function.header.php – manRo

答えて

3

あなたは何をしたいのですか?成功すると200のHTTPステータスコードを返すPHPスクリプトへのajax呼び出しを伴うHTMLフォームです。

私は非常に簡単な例であなたを説明しようとします。

htmlファイル以下をご覧ください:

<html> 
    <head> 
    <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script> 
    </head> 
    <body> 
    <form action="sendmail.php"> 
     <input type="email" name="email"/> 
     <input type="submit"/> 
    </form> 
    <script> 
     $(document.forms[0]).submit(function(event) { 
     event.preventDefault(); 
     $.get('sendmail.php', function(data) { 
      alert('all good'); 
     }); 
     }); 
    </script> 
    </body> 
</html> 

sendmail.phpその場合には、電子メールなどを送信するための責任のコードが含まれている必要があります。

<?php 
//code here... 
if ($email_sent) { 
    http_response_code(200); 
} else { 
    http_response_code(400); 
} 
+0

ありがとうございます!私はそれがとても簡単だとは信じられない! Ajaxがどのようにデータを渡すのかについて心配していたのですが、これで解決しました。私は今すぐ実験に行き、一度フォローアップします。再度、感謝します!一度私は十分な担当者を持っているupvoteよ! – Dave

+0

私のアプローチはあなたの提案に基づいて更新されましたが、新しい問題にぶつかっています。最初の投稿で私の更新を見てください。ありがとう! – Dave

関連する問題