phpとajaxでフォーム送信する

投稿者: | 2020年2月5日

phpとajaxでフォーム送信するスクリプト

<!--index.html form部分-->
	<div id="contents">
	<div id="contents">
	  <h2>ajaxフォーム送信</h2> 
      <div class="contents_box">
		<div class="page_des6">
		<ul>
		  <li class="des2_5"><input type="text" class="text3" name="suppliers_remarks1" id="suppliers_remarks1" value="test" /></li>
            <div class="selectWrap">
              <select class="select js-changeYear2" name="suppliers_c_id" id="suppliers_c_id" required>
		<option value="">--</option>
				<option value="3">3番</option>
				<option value="2">2番</option>
				<option value="1" selected="selected">1番</option>
				</select>
            </div>
	      <li class="des1_3"><input type="button" id="submit" name="dlbtn_m" value="登録" class="sysNextSubmit2" onclick="alertFunction1()"/>
</li>
<input type="hidden" name="suppliers_id" id="suppliers_id" value=""/>
<input type="hidden" name="suppliers_flg1" id="suppliers_flg1" value="2"/>



    <script>
    $(document).ready(function()
    {




        /**
         * 登録ボタンクリック
         */
         
        $('#submit').click(function()
        {
        
 //ダイアログ
    if (!confirm("登録しますか?")) {
         

      // 処理を中断
      return false;
 
    }        
        
        
        
        
        
        
        
        
            //POSTメソッドで送るデータを定義します var data = {パラメータ名 : 値};
//            var data = {q : $('#req').val()};
/*
$("#get_button").click( function() {
    var radioVal = $("input[name='radio_test']:checked").val();
    alert(radioVal);
});
*/
    //var radioVal = $("input[name='radio_test']:checked").val();

//var data = {q : $('#req').val(), q1 : $("input[name='req1']:checked").val(), q2 : $('#req2').val(), q3 : $('#req3').val(), q4 : $('#req4').val() };
var data = {

 q : $('#datepickerFrom').val(),
 suppliers_id : $('#suppliers_id').val(),
 suppliers_flg1 : $('#suppliers_flg1').val(),
 suppliers_c_id : $('#suppliers_c_id').val(),
 suppliers_remarks1 : $('#suppliers_remarks1').val(),
 suppliers_remarks2 : $('#suppliers_remarks2').val()
 
 
  };
            /**
             * Ajax通信メソッド
             * @param type  : HTTP通信の種類
             * @param url   : リクエスト登録先のURL
             * @param data  : サーバに登録する値
             */
            $.ajax({
                type: "POST",
                
                url: "./index.php",
                
                data: data,
                /**
                 * Ajax通信が成功した場合に呼び出されるメソッド
                 */
                success: function(data, dataType)
                {
                    //successのブロック内は、Ajax通信が成功した場合に呼び出される

                    //PHPから返ってきたデータの表示
                    //alert(data);
                    //$("#res32").html(data);

                    alert("登録しました");
                    
                },
                /**
                 * Ajax通信が失敗した場合に呼び出されるメソッド
                 */
                error: function(XMLHttpRequest, textStatus, errorThrown)
                {
                    //通常はここでtextStatusやerrorThrownの値を見て処理を切り分けるか、単純に通信に失敗した際の処理を記述します。

                    //this;
                    //thisは他のコールバック関数同様にAJAX通信時のオプションを示します。

                    //エラーメッセージの表示
                    alert('Error : ' + errorThrown);
                }
            });
            
            //サブミット後、ページをリロードしないようにする
            return false;
        });
    });
    </script>






<?php
//index.php
header('Content-Type: text/html; charset=UTF-8');



		$hp_url = APP_HP_URL;
		$hp_url_sm = APP_HP_URL_SM;

		$referer = $_SERVER['HTTP_REFERER'];



	$dlbtn_m  = $this->getRequest("dlbtn_m");
	$suppliers_id  = $this->getRequest("suppliers_id");
	$suppliers_flg1  = $this->getRequest("suppliers_flg1");
	$suppliers_c_id  = $this->getRequest("suppliers_c_id");
	$suppliers_remarks1  = $this->getRequest("suppliers_remarks1");
	$suppliers_remarks2  = $this->getRequest("suppliers_remarks2");
	$date = new DateTime();
	$suppliers_update1  = $date->format('Y-m-d H:i:s');

    if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) &amp;&amp; strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){  
 if (isset($dlbtn_m)) {


//DB登録
		$prd->suppliersupdate(
		$suppliers_id,
		$suppliers_flg1,
		$suppliers_c_id,
		$suppliers_remarks1,
		$suppliers_remarks2,
		$suppliers_update1
			
		);
	}
	}
	
	
	//	header("Location: {$referer}");

        }
}

?>

jQuery 1.8以上の場合、以下のようにするようだ。

success() → done()
error() → fail()
complete() → always()

ラジオボタンの場合

var radioVal = $(“input[name=’radio_test’]:checked”).val();

こうする 参考https://webcake.stars.ne.jp/jquery-ajax-php-post-sample.html

ajax 配列の場合(checkbox)

    <input type="checkbox" name="check[]" value="1" />check1

$(function(){
    $("#form").submit(function(){
        //選択されたチェックボックスの値を配列に保存
        var checks=[];
        $("[name='check[]']:checked").each(function(){
            checks.push(this.value);
        });
});

参考https://tech-tech.hatenadiary.org/entry/20100920/1284992262

サンプル https://blog.tama-tama.net/test/slider/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA