[解決済み] ページを再読み込みせずにフォームを送信する
2022-12-23 15:48:56
質問
クラシファイドサイトを持っていて、広告を表示するページに、"Send a tip to a friend"のフォームを作っているのですが...。
そのため、希望する人は誰でも、広告の情報を友人の電子メールアドレスに送信することができます。
フォームがPHPのページに送信されなければならないのでは?
<form name="tip" method="post" action="tip.php">
Tip somebody:
<input
name="tip_email"
type="text"
size="30"
onfocus="tip_div(1);"
onblur="tip_div(2);"
/>
<input type="submit" value="Skicka Tips" />
<input type="hidden" name="ad_id" />
</form>
フォームを送信すると、ページが再読み込みされる...。そんなの嫌だ...。
リロードされずにメールを送信する方法はありますか? できればajaxやjqueryを使わないで...。
どのように解決するのですか?
ページを再読み込みせずにメールを送信するには、ajaxリクエストを送信する必要があります。を見てみましょう。 http://api.jquery.com/jQuery.ajax/
あなたのコードは、次のようなものであるべきです。
$('#submit').click(function() {
$.ajax({
url: 'send_email.php',
type: 'POST',
data: {
email: '[email protected]',
message: 'hello world!'
},
success: function(msg) {
alert('Email Sent');
}
});
});
フォームはバックグラウンドで送信され
send_email.php
ページがリクエストを処理し、メールを送信する必要があります。
関連
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] 箇条書きのない順序なしリストが必要です。
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] jQueryを使用しない$(document).ready相当
-
[解決済み] フォーム送信のようなJavaScriptのポストリクエスト
-
[解決済み] jQuery AJAX送信フォーム
-
[解決済み] イテレータでmap()を使用する
-
[解決済み] Chrome拡張機能:popup.htmlを強制終了させる
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ジェスト あるクラスの特定のメソッドをモックする方法
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] javascript の関数から `undefined` と `null` のどちらを返すのが良いのでしょうか?
-
[解決済み] JavaScriptで、ある文字列が別の文字列の中に出現するすべてのインデックスを見つけるにはどうすればよいですか?
-
[解決済み] JavaScriptで文字列を数値に変換する最速の方法は何ですか?
-
[解決済み] $.ajax実行中にローディングイメージを表示する
-
[解決済み] 文字列とラベルのローカライズとグローバリゼーションのベストプラクティス【終了しました
-
[解決済み] Node.jsのES6クラスをrequireで作る
-
[解決済み] <ng-content>が空かどうかを確認する方法は?(これまでのAngular 2+で)
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?