最初の投稿。 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に送信されたフォームデータを取得する必要があります。私は適切に緑色のチェックマークを導入することができるように、ページをリフレッシュしないようにする必要があります。
私のコードであなたのソリューションを実装する方法を見て、私が間違っていることを教えてください。ありがとうございました!!
あなたは 'エコーjson_encode後にヘッダを送信することはできません( $ val); '確認してくださいhttp://php.net/manual/en/function.header.php – manRo