クラシファイド広告のWebサイトを持っていて、広告が表示されるページで、「友達にヒントを送る」フォームを作成しています...
したがって、誰でも広告のヒントを友達にメールで送信できます。
フォームを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なしで...
ありがとう
<iframe>およびtarget属性は、それを行います。
回答:
ページをリロードせずにメールを送信するには、ajaxリクエストを送信する必要があります。見てくださいhttp://api.jquery.com/jQuery.ajax/を
あなたのコードは次のようなものでなければなりません：
$('#submit').click(function() {
$.ajax({
url: 'send_email.php',
type: 'POST',
data: {
email: 'email@example.com',
message: 'hello world!'
},
success: function(msg) {
alert('Email Sent');
}
});
});フォームはsend_email.php、リクエストを処理してメールを送信する必要があるページにバックグラウンドで送信します。
return false;
もっと簡単な方法だと思います。ページにiframeを配置すると、アクションの終了をそこにリダイレクトして表示させることができます。もちろん、何もできません。その場合、iframe表示をなしに設定できます。
<iframe name="votar" style="display:none;"></iframe>
<form action="tip.php" method="post" target="votar">
<input type="submit" value="Skicka Tips">
<input type="hidden" name="ad_id" value="2">
</form>action="about:blank"
$_POST["ad_id"]
AJAXを使用するか、
<form id="myGiswebForm" method="post" action="https://******/saveForm.asp" target="myiframe">および<iframe style="display:none;" src="" name="myiframe"></iframe>
最も速くて簡単な方法は、iframeを使用することです。ページの下部にフレームを配置します。
<iframe name="frame"></iframe>
そしてあなたのフォームでこれをしてください。
<form target="frame">
</form>そしてあなたのCSSでフレームを見えなくする。
iframe{
display: none;
}display:none;ありborder:0pxます。編集を試しましたが、編集コメントを見てわざわざいないレビュアーが私の編集を拒否しました。回答を修正してコードを修正してください。
この問題を解決するためにインターネットで見つけたコードの一部を次に示します。
フォームが送信されるとアクションが実行され、再読み込みする特定のiframeをターゲットにします。
<iframe name="content" style="">
</iframe>
<form action="iframe_content.php" method="post" target="content">
<input type="text" name="Name" value="">
<input type="submit" name="Submit" value="Submit">
</form><?php
if (isset($_POST['Submit'])){
$Name = $_POST['Name'];
echo $Name;
}
?> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js">
</script>
<script type="text/javascript">
function clickButton(){
var name=document.getElementById('name').value;
var descr=document.getElementById('descr').value;
$.ajax({
type:"post",
url:"server_action.php",
data:
{
'name' :name,
'descr' :descr
},
cache:false,
success: function (html)
{
alert('Data Send');
$('#msg').html(html);
}
});
return false;
}
</script>
<form >
<input type="" name="name" id="name">
<input type="" name="descr" id="descr">
<input type="submit" name="" value="submit" onclick="return clickButton();">
</form>
<p id="msg"></p><?php
$name = $_POST['name'];
$descr = $_POST['descr'];
echo $name;
echo $descr;
?>jquery-ajaxこの場合は助けが必要です。なしajaxでは、現在のところ解決策はありません。
まず、フォームが送信されたときにJavaScript関数を呼び出します。設定するだけonsubmit="func()"。関数が呼び出されても、送信のデフォルトアクションが実行されます。これが実行された場合、ページの更新やリダイレクトを停止する方法はありません。したがって、次のタスクはデフォルトのアクションを防止することです。の先頭に次の行を挿入しますfunc()。
event.preventDefault()これで、リダイレクトや更新は行われなくなります。したがって、あなたは単純にからajax呼び出しfunc()を行い、呼び出しが終了したときにやりたいことを何でもします。
例：
形：
<form id="form-id" onsubmit="func()">
<input id="input-id" type="text">
</form>JavaScript：
function func(){
event.preventDefault();
var newValue = $('#input-field-id').val();
$.ajax({
type: 'POST',
url: '...',
data: {...},
datatype: 'JSON',
success: function(data){...},
error: function(){...},
});
}これは、jQueryとAJAXがなくても機能する方法であり、単純なiFrameを使用すると非常にうまく機能します。I LOVE IT、Opera10、FF3、IE6で動作します。上記のいくつかのポスターのおかげで私に正しい方向を示しています、それが私がここに投稿している唯一の理由です：
<select name="aAddToPage[65654]"
onchange="
if (bCanAddMore) {
addToPage(65654,this);
}
else {
alert('Could not add another, wait until previous is added.');
this.options[0].selected = true;
};
" />
<option value="">Add to page..</option>
[more options with values here]</select>
<script type="text/javascript">
function addToPage(iProduct, oSelect){
iPage = oSelect.options[oSelect.selectedIndex].value;
if (iPage != "") {
bCanAddMore = false;
window.hiddenFrame.document.formFrame.iProduct.value = iProduct;
window.hiddenFrame.document.formFrame.iAddToPage.value = iPage;
window.hiddenFrame.document.formFrame.submit();
}
}
var bCanAddMore = true;</script>
<iframe name="hiddenFrame" style="display:none;" src="frame.php?p=addProductToPage" onload="bCanAddMore = true;"></iframe>上記で呼び出されているページを生成するphpコード：
if( $_GET['p'] == 'addProductToPage' ){ // hidden form processing
if(!empty($_POST['iAddToPage'])) {
//.. do something with it..
}
print('
<html>
<body>
<form name="formFrame" id="formFrameId" style="display:none;" method="POST" action="frame.php?p=addProductToPage" >
<input type="hidden" name="iProduct" value="" />
<input type="hidden" name="iAddToPage" value="" />
</form>
</body>
</html>
');
}printを使用してHTMLコードを印刷しないでください。phpタグ?>を閉じ、htmlコードを追加します。使用exitは避けてください（致命的なエラーなど）
これで問題が解決するはずです。
このコードでは、送信ボタンをクリックした後、jquery ajaxを呼び出し、投稿
タイプのPOST / GET
データにURLを渡します。入力フィールドまたはその他のデータ情報を選択できます。
成功：サーバー
関数のパラメーターテキスト、htmlまたはjsonで問題がなければコールバック、サーバーからの応答
が成功した場合は、取得したデータが何らかの状態にある場合に書き込み警告を書き込むことができます。または、次に何をすべきかコードを実行します。
<form id='tip'>
Tip somebody: <input name="tip_email" id="tip_email" type="text" size="30" onfocus="tip_div(1);" onblur="tip_div(2);"/>
<input type="submit" id="submit" value="Skicka Tips"/>
<input type="hidden" id="ad_id" name="ad_id" />
</form>
<script>
$( "#tip" ).submit(function( e ) {
e.preventDefault();
$.ajax({
url: tip.php,
type:'POST',
data:
{
tip_email: $('#tip_email').val(),
ad_id: $('#ad_id').val()
},
success: function(msg)
{
alert('Email Sent');
}
});
});
</script>フォームのtarget属性を非表示のiframeに設定して、フォームを含むページがリロードされないようにすることができます。
私はファイルのアップロード（AJAXでは実行できないことがわかっています）を試してみましたが、問題なく動作しました。
フォームがあるのと同じページに送信する場合、アクションなしでフォームタグを書くことができ、このように送信されます
<form method='post'> <!-- you can see there is no action here-->上記のjqueryと同様のことを行いましたが、フォームデータとグラフィック添付キャンバスをリセットする必要がありました。だからここに私が思いついたものがあります：
<script>
$(document).ready(function(){
$("#text_only_radio_button_id").click(function(){
$("#single_pic_div").hide();
$("#multi_pic_div").hide();
});
$("#pic_radio_button_id").click(function(){
$("#single_pic_div").show();
$("#multi_pic_div").hide();
});
$("#gallery_radio_button_id").click(function(){
$("#single_pic_div").hide();
$("#multi_pic_div").show();
});
$("#my_Submit_button_ID").click(function() {
$("#single_pic_div").hide();
$("#multi_pic_div").hide();
var url = "script_the_form_gets_posted_to.php";
$.ajax({
type: "POST",
url: url,
data: $("#html_form_id").serialize(),
success: function(){
document.getElementById("html_form_id").reset();
var canvas=document.getElementById("canvas");
var canvasA=document.getElementById("canvasA");
var canvasB=document.getElementById("canvasB");
var canvasC=document.getElementById("canvasC");
var canvasD=document.getElementById("canvasD");
var ctx=canvas.getContext("2d");
var ctxA=canvasA.getContext("2d");
var ctxB=canvasB.getContext("2d");
var ctxC=canvasC.getContext("2d");
var ctxD=canvasD.getContext("2d");
ctx.clearRect(0, 0,480,480);
ctxA.clearRect(0, 0,480,480);
ctxB.clearRect(0, 0,480,480);
ctxC.clearRect(0, 0,480,480);
ctxD.clearRect(0, 0,480,480);
} });
return false;
}); });
</script>これは私にとってはうまくいきます。HTMLフォームだけのアプリケーションの場合、このjqueryコードを次のように簡略化できます。
<script>
$(document).ready(function(){
$("#my_Submit_button_ID").click(function() {
var url = "script_the_form_gets_posted_to.php";
$.ajax({
type: "POST",
url: url,
data: $("#html_form_id").serialize(),
success: function(){
document.getElementById("html_form_id").reset();
} });
return false;
}); });
</script>さらなる可能性はあなたの関数への直接のJavaScriptリンクを作ることです：
<form action="javascript:your_function();" method="post">...
JavaScriptを使用しない場合は、ページがリロードされます
<iframe name="ew" />と<form target="ew" />
function Foo(){
event.preventDefault();
$.ajax( {
url:"<?php echo base_url();?>Controllername/ctlr_function",
type:"POST",
data:'email='+$("#email").val(),
success:function(msg) {
alert('You are subscribed');
}
} );
}私は良い解決策を何度も試しましたが、@ taufiqueの回答がこの回答にたどり着きました。
注意：event.preventDefault(); 関数の本体の最初に置くことを忘れないでください 。
以下は、phpページに投稿してhtmlを取得するためのjQueryです。
$('form').submit(function() {
$.post('tip.php', function(html) {
// do what you need in your success callback
}
return false;
});