web-dev-qa-db-ja.com

ページをリロードせずにフォームを送信する

私はクラシファイドのウェブサイトを持っており、広告が表示されるページで、「友人にチップを送る」フォームを作成しています...

したがって、誰でも広告のヒントを友人のメールアドレスに送信できます。

フォームを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なし...

ありがとう

phpjavascripthtmlforms
78
user188962

ページをリロードせずにメールを送信するには、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ページに送信されます。このページでは、リクエストを処理してメールを送信する必要があります。

58
jkilbride

もっと簡単な方法だと思うものを見つけました。ページにiframeを配置すると、アクションのexitをリダイレクトして表示することができます。もちろん何もできません。その場合、iframeディスプレイをnoneに設定できます。

<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>
67
Juan Diego

AJAXを使用するか、または

  • iframeを作成してドキュメントに追加します
  • iframes名を「foo」に設定します
  • フォームターゲットを「foo」に設定します
  • 提出する
  • フォームアクションに 'parent.notify（...）'でjavascriptをレンダリングさせてフィードバックを与える
  • オプションで、iframeを削除できます
20
Sean Kinsey

最も高速で簡単な方法は、iframeを使用することです。ページの下部にフレームを配置します。

<iframe name="frame"></iframe>

そして、あなたのフォームでこれを行います。

<form target="frame">
</form>

また、CSSでフレームを非表示にします。

iframe{
  display: none;
}
9
Dragan Marjanovic

これはまさにjQueryとAJAXなしで動作する方法であり、シンプルなiFrameを使用して非常にうまく機能しています。大好きです。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>
  ');
}
4
Tyler

これで問題が解決するはずです。
送信ボタンをクリックした後のこのコードでは、jquery ajaxを呼び出し、投稿するurlを渡します
タイプPOST/GET
data：入力フィールドまたはその他を選択できるデータ情報。
成功：サーバーからのすべてが正常であればコールバック
関数パラメーターテキスト、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>
4
Matas Lesinskas

ページをリロードせずにフォームを送信し、同じページで送信されたデータの結果を取得する

この問題を解決するためにインターネットで見つけたコードの一部を次に示します

インデックスファイル：

   <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>

server_action.php

<?php 
$name = $_POST['name'];
$descr = $_POST['descr'];


echo $name;
echo $descr;

?>

タグ：phpajaxjqueryserverside

3
Rhalp Darren Cabrera

この場合、jquery-ajaxの助けを借りる必要があります。 ajaxがなければ、現在のところ解決策はありません。

最初に、フォームが送信されたときにJavaScript関数を呼び出します。 onsubmit="func()"を設定するだけです。関数が呼び出された場合でも、送信のデフォルトのアクションが実行されます。実行された場合、ページの更新またはリダイレクトを停止する方法はありません。したがって、次のタスクはデフォルトのアクションを防止することです。 func()の先頭に次の行を挿入します。

event.preventDefault()

これで、リダイレクトや更新は行われなくなります。したがって、単にfunc()からajax呼び出しを行い、呼び出しが終了したときにやりたいことを行うだけです。

例：

形：

<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(){...},
    });
}
3
taufique

フォームのターゲット属性を非表示のiframeに設定して、フォームを含むページがリロードされないようにすることができます。

ファイルのアップロード（AJAXを介して実行できないことがわかっている）で試してみましたが、うまく機能しました。

3
wtaniguchi

IFrameを使用してみましたか？ Ajaxはありません。元のページは読み込まれません。

送信フレームをiframe内の別のページとして表示できます。送信された場合、外部/コンテナページはリロードされません。このソリューションでは、どの種類のajaxも使用しません。

2
DanC

上記の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>
1
drtechno

さらなる可能性は、関数への直接のJavaScriptリンクを作成することです：

<form action="javascript:your_function();" method="post">

...

0
burncycle

フォームがある同じページに送信する場合は、アクションなしでフォームタグを記述して、次のように送信します

<form method='post'> <!-- you can see there is no action here-->
0
Mohamed

iframeにならないようにJavaScriptを使用する必要があります（ugいアプローチ）。

JavaScriptで実行できます。 jQueryを使用すると簡単になります。

AJAXと投稿をチェックすることをお勧めします。

0
alex