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']) && 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
コメント