• 締切済み

Ajaxの使い方がおかしいでしょうか?

Javascript の初級者です。 今、Formを使って更新処理しようとしています。 同時に、submitが押されたときに、データをチェックするために関数に 飛ばしています。 ★印のところだけが「true」で他のところは「false」なので処理を中断させたいと 考えています。 Ajaxを非同期で実行すると訳が分からなくなってしまったので同期処理にしています。 ところがどのような条件でsubmitしてもFromが実行されてしまいます。 Ajaxの success 下にこのような分岐処理を書くのは間違いなんでしょうか。 どなたかお分かりになる方、ご指導下さい。 よろしくお願いします。 function upadateCheck(){ var strYear = $("#year").val(); var strMonth = $("#month").val(); var strClosingDate = $("#closingDate").val(); $.ajax({ async: false, // 同期処理 type: "POST", url: "/customercheckclosingdate", data: {"closingDate":strClosingDate,"year":strYear,"month":strMonth,}, dataType: 'text', success: function(request){ var arr = eval(request); var data = arr[0]; if(data.result == "nothing"){ window.alert("指定の「締日」の得意先はありませんでした。"); return false; }else if(data.result == "no"){ window.alert("指定の「処理年月」と「締日」で更新処理を行うには、締日の不整合があります。"); return false; }else{ if(window.confirm("締日:" + strClosingDate + "日\n処理年月:" + strYear + "年" + strMonth + "月\n\nの更新処理を行います。")){ return true; ★★★★★★★★★★★★★★★★ }else{ return false; } } }, error: function(msg){ alert( "Data Saved: " + msg ); return false; } }); } <form method="POST" action="/update" onsubmit="return upadateCheck()"> <table> <tr> <th>締   日:</th> <td> <input type="hidden" id="year" name="year"> <input type="hidden" id="month" name="month"> <SELECT id="closingDate" name="closingDate" > <OPTION value="05">5</OPTION> <OPTION value="10">10</OPTION> <OPTION value="15">15</OPTION> <OPTION value="20">20</OPTION> <OPTION value="25">25</OPTION> <OPTION value="末">末</OPTION> </SELECT> </td> <td colspan="2"> <input type="submit" value="更新処理" /> </td> </tr> </table> </form>

みんなの回答

  • shockatz
  • ベストアンサー率80% (153/191)
回答No.2

Ajaxの処理プロセスに対する認識が間違っています。 $.ajaxで定義するオブジェクトの"success"属性に指定しているのは、「コールバック」としての関数定義です。 「コールバックバック関数」というのは同期であれ非同期であれ、「応答があれば実行される」イベントハンドラのようなものであり、リニアな処理手順とは別の流れを定義するものです。 なので、その中で"true"や"false"を返しても意味がありません。 主処理の最後に"false"を返すか、submitイベントの既定動作を停止する、"preventDefault();"を使うかして、まずformの自動submitを停止してください。 そのうえで、successコールバックの中で、検証結果がOKであれば、formをsubmit()します。 function(){ _ $.ajax({ _ type: "POST", _ url: "/customercheckclosingdate", _ data: {"closingDate":strClosingDate,"year":strYear,"month":strMonth,}, _ dataType: 'text', _ success: function(request){ _ // 送信結果の評価 検証OKならば、$('#myForm').submit(); _ }, _ error: function(msg){} _ }); _ return false; }

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

・FORMのonsubmitを削除 ・更新処理ボタンをsubmitからbuttonに変更 ・更新処理ボタンにonclickで関数hogeを実行 ・関数hogeの先頭でupadateCheckを実行 ・hogeの最後にFORMをsubmit これでやりたいことが可能になると思うわ

関連するQ&A

  • Ajaxがおかしいんです

    Javascript初級者です。 Ajaxを使ってデータの重複チェックを行おうとしました。 ところがAjaxがヘンな動きをするんです。 以下のコードなんですが、上の登録処理の中で、function doubleCheck を呼んで います。 問題は2つあって、ひとつは実際に重複していてもしていなくても「true」を 返してくることです。 console.log("res=========" + res) には「yes」とか「no」とか重複有り無しで 異なりますが、ちゃんとそれぞれセットするにも関わらず、 if(!doubleCheck() では必ず「false」が戻ってきてしまいます。 もう一つおかしい点は、重複検索(これはPHPでやってます)の最中にもかかわらず、 「true」が返ってきて "重複があったので登録できません。" お、出てしまうことです。 それで調査するために console.logその2を入れてみました(※※※のところ)。 ところがこの console 何も吐き出しません。 ということは doubleCheck() の最後の if文にたどり着いていない、または 途中でエラーになっているのかもしれません。 私の書いた Ajax のコードがおかしいんでしょうか。 どなたか御指導下さい。 よろしくお願いします。 // 追加登録処理 function doActionAdd(){ if(dataCheck()){ // customerId が 空白か否かのチェック if($('#customerId').val() == ""){ if(window.confirm("追加登録していいですか?")){ if(!doubleCheck()){ window.alert("重複はありませんでした"); }else{ window.alert("重複があったので登録できません。"); }  (以下略) function doubleCheck(){ var yomi = $('#customerYomi').val(); var res = ''; // 重複チェック $.ajax({ type: "POST", url: "../customer/CustomerDoubleCheck.php", data: {"customerYomi":yomi}, dataType: 'text', // ajax通信が成功したときの処理 success: function(request){ console.log("request=========" + request); var json = JSON.parse(request); console.log(json[0].result ); res = json[0].result; console.log("res=========" + res); }, error: function(XMLHttpRequest, textStatus, errorThrown){ $('div#jobStatus').text("重複チェック検索ができませんでした。"); return false; } }); console.log("resその2=========" + res); //※※※ if(res == "yes"){ // 重複していたので「false」を返す。 return false; }else{ // 重複していなかったので「true」を返す。 return true; } }

  • jqueryの$.ajaxで送信できない

    はじめまして。 jquery初心者ですが、$.ajax使ってのPOST送信ができません、php側でログを取ってみてもアクセスすらしません。若干お手上げなので、分かる方がいたら、アドバイスを頂けませんか? 【やりたいこと】 formにデータを入力(html)し → jqueryを使ってpost送信(js) → 認証(php) → 結果をhtmlに表示させたい。 【ソース】 -a.html- <form method="post" id="signin" action=""> <input id="email" name="email" value="" title="email" class="required" tabindex="4" type="text"> <input id="posturl" type="hidden" name="posturl" value="a.php"> <input id="signin_submit" value="Sign in" tabindex="6" type="submit"> </form> -------- -a.js- $(function() { $("form#signin").submit(function() { var email = $("input#email").val(); var postFile = $("input#posturl").val(); var data = {email:email}; $.ajax({ type: "POST", url: postFile, data: data, timeout: 1000, error: function(){ // エラー時 alert('Error'); }, success: function(data) { if(data != ''){ alert(data.result); } else { alert('no data'); } } }); }); }); -------- -a.php- (他略、とりあえず適当に出力してみる) echo "{'status': false,}"; exit; -------- よろしくお願いします。m_m

  • ajax でのデータ受け渡しに関して

    ajax でのデータ受け渡しに関して わかりにくい内容で申し訳ありません。 現在、PHPで作成されているプログラムの中に、ajaxを組み込みたいと考えています。 処理の動きとしては、あるプルダウンが選択された場合、すぐさまその値をもとにしてDBへ 検索しに行くというものです。 通常、PHPだけの処理の場合、POST等を用いて、ボタンが押されたら違うphpファイルへ値を 送る事が可能かと思われます。 その処理をajax で選択されたらすぐに検索、表示というような動きをしたいと考えて います。 但し、同じソース、画面上の中でなら、以下のような記述で表示させる事は可能かと 思われますが、HTMLで分割した画面で、上段で選択されたプルダウンの値をもとにして、検索 された結果を下段に表示させたいと考えています。 そもそも、ajaxでは同じ画面上での受け渡ししかできず、上記のように分割されたものでは 不可能なのでしょうか。。。 初歩的な内容で申し訳ありませんが、教えて頂きたいと思います。 《記述内容》 ※ 現状では以下のようなサンプル記述をもとに、自画面(同一)上では表示が可能となっています。 <script> function createXMLHttpRequest(){ if( window.XMLHttpRequest ){ return new XMLHttpRequest(); }else if( window.ActiveXObject ){ try{ return new ActiveXObject( "Msxml2.XMLHTTP" ); }catch(e){ return new ActiveXObject( "Microsoft.XMLHTTP" ); } } return null; } function getDataPost( serverURL, objID ,obj){ var ajax = createXMLHttpRequest(); ajax.open( "POST", serverURL ); ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.onreadystatechange=function(){ if(( ajax.readyState == 4 ) && ( ajax.status == 200 )){ if(objID!=""){ var obj = document.getElementById( objID ); obj.innerHTML = ajax.responseText; } } } ajax.send( obj.name+"="+obj.value ); } </script> <select name="fuga" onchange="getDataPost('hogehoge.php','hoge',this)"> <option value="">---</option> <option value="1">1</option> <option value="2">2</option> </select> <div id="hoge"></div> よろしくお願いします。

    • ベストアンサー
    • AJAX
  • Formのシリアライズができない

    新米プログラマーです。 JavascriptとJavaでショッピング画面を作っています。 以下のコードで function doActionShoppingEntry(){ で登録用のフォームを表示して、 function doActionShoppingAdd(){ Ajax通信で登録処理を行っています。 var data = $('#fmShoppingDetail').serialize(); でフォームの内容をシリアライズしようと しているのですが、うまくシリアライズされず data は空っぽのままです。 読み込む順番とか、スコープの問題かな、とも思ったんですけど、 var data_shoppingDate = $('#shoppingDate').val(); や var data_hinme = $('#hinmei').val(); は認識されて、空欄チェックをちゃんとしてくれます。 いろいろやってみたのですが、シリアライズされない状況が続いています。 どなたかヒントを頂くなりお願いできますでしょうか。 よろしくお願いします。 // ■お買物登録 // 登録画面表示 function doActionShoppingEntry(){ var space = ""; space += '<form id="fmShoppingDetail">' + '<tr>' + '<th>購入日</th>' + '<td><input type="text" id="shoppingDate" /></td>' + '</tr>' + '<tr>' + '<th>場所</th>' + '<td><input type="text" id="place" /></td>' + '</tr>' + '<tr>' + '<th>品名</th>' + '<td><input type="text" id="hinmei" /></td>' + '</tr>' + '<tr>' + '<th>金額</th>' + '<td><input type="text" id="kingaku" /></td>' + '</tr>' + '<input type="button" onclick="doActionShoppingAdd();" value="登録" />' + '<input type="hidden" id="customerId" value="' + $('#customerId') + '" />' + '</form>'; var obj = document.getElementById("datatableShoppingAdd"); obj.innerHTML = space; // お買上日 $(function(){ $('#shoppingDate').datepicker(); $("#shoppingDate").datepicker("option", "dateFormat", "yy/mm/dd"); } ); } // 登録 function doActionShoppingAdd(){ // 必須項目の入力チェック var data_shoppingDate = $('#shoppingDate').val(); if(data_shoppingDate == ""){ window.alert('購入日は空白では登録できません。'); return false; }else{ var data_hinme = $('#hinmei').val(); if(data_hinme == ""){ window.alert('品名は空白では登録できません。'); return false; } } if(window.confirm("登録していいですか?")){ var data = $('#fmShoppingDetail').serialize();                ←ここです。 $('#gon').text("登録内容は" + data); //gon内のテキストに表示 console.log("data[0]==========" + data[0]); $.post('/shoppingadd',data,function(resp, status, XHR){ if(status == "success"){ $('div#status').text("登録しました。"); } }); }else{ return false; } }

  • jQuery $.ajax JSON形式のPOST

    jQuery $.ajax JSON形式のPOSTでフォーム内容を送信し、送信先のPHPでメール送信させるプログラムをかいているのですが、どうしても$.ajaxのerrorが呼び出される状況です。errorが呼び出されますが、PHPの方のメール送信はできております。 PHP側の出力がうまくいっていないのではないかと思いますが、原因がわかりません。どなたかご教授いただけないでしょうか?宜しくお願いします。 ---js--- $("#send").click(function(){ var NAME = $('#name').val(); var EMAIL = $('#email').val(); var TITLE = $('#titlel').val(); var COMMENT = $('#comment').val(); $.ajax({ url : "sendmail.php", dataType : "json", data : {name:NAME, email:EMAIL, title:TITLE, comment:COMMENT}, type : "post", success : function(data){ if(data != ''){ alert(data.result); } }, error : function(){ alert("通信に失敗しました。"); } }); }); ---sendmail.php--- if($_SERVER["REQUEST_METHOD"] != "POST"){ header("HTTP/1.0 404 Not Found"); return; }else{ //メール送信処理 (省略) $message = "送信完了メッセージ"; $result = array('result' => $message); echo json_encode($result); }

  • 日付から曜日を表示したい

    現在、HTMLでJavaScriptを用いたホームページを作成しています。 プルダウンリストの日付から閏年に対応しているソースコードを参考にして組んだまでは 良かったのですが、プルダウンリストで選択された年月日から曜日の抽出がうまくいかず悩んでいます。 以下、少しわかりにくいですがイメージです。 2015   年   1   月   1  日    → ○曜日 2016       2       2 2017       3       3  ~        ~       ~ 2030       12      31 具体的なヒントやソースを頂けないでしょうか? よろしくお願いします。 原状のbodyの中身を書いておきます。  <form name="formDate"> <label>申請日:</label> <select name="selectYear" onchange="setSelectMonth()"></select> <label>年</label> <select name="selectMonth" onchange="setSelectDate()"></select> <label>月</label> <select name="selectDate"></select> <label>日</label> <select name="selectWeek" onchange="setSelectyear()" onchange="setSelectMonth()" onchange="setSelectDate()"disabled> <OPTION>日曜日<OPTION>月曜日<OPTION>火曜日<OPTION>水曜日<OPTION>木曜日<OPTION>金曜日<OPTION>土曜日 </select> </form> <script type="text/javascript"> <!--初期値設定--> var Now = new Date(); var NowYear = Now.getFullYear(); var NowMonth = Now.getMonth()+1; var NowDate = Now.getDate(); var NowWeek = Now.getDay(); <!--閏年--> function Uruu( Year ){ var uruu = ( Year%400==0 ) ? true : ( Year%100==0 ) ? false : ( Year%4==0 ) ? true : false; return uruu; } <!--年--> function setSelectYear(){ for(var y=NowYear;y<NowYear+6;y var select = document.formDate.selectYear; var option = select.appendChild( document.createElement('option') ); option.value = y; option.text = y; option.selected = ( y==NowYear ) ? 'selected' : false; } setSelectMonth(); } setSelectYear(); <!--月--> function setSelectMonth(){ var Year = document.formDate.selectYear.options[document.formDate.selectYear.selectedIndex].value; var select = document.formDate.selectMonth;// while( select.options.length ){ select.removeChild( select.options[0] ); } for(var m=1;m<=12;m++){ var option = select.appendChild( document.createElement('option') ); option.value = m; option.text = m; option.selected = ( Year==NowYear ) ? ( ( m==NowMonth ) ? 'selected' : false ) : ( ( m==1 ) ? 'selected' : false ); option.disabled = ( Year==NowYear ) ? ( ( m<NowMonth ) ? 'disabled' : false ) : false; } setSelectDate(); } <!--日--> function setSelectDate(){ var Year = document.formDate.selectYear.options[document.formDate.selectYear.selectedIndex].value; var Month = document.formDate.selectMonth.options[document.formDate.selectMonth.selectedIndex].value; var days = [31,( Uruu(Year) ? 29 : 28 ),31,30,31,30,31,31,30,31,30,31]; var select = document.formDate.selectDate; while( select.options.length ){select.removeChild( select.options[0] );} for(var d=1;d<=days[Month-1];d++){ var option = select.appendChild( document.createElement('option') ); option.value = d; option.text = d; option.select = ( Year==NowYear && Month==NowMonth ) ? ( ( d==NowDate ) ? 'selected' : false ) : ( ( d==1 ) ? 'selected' : false ); option.disabled = ( Year==NowYear && Month==NowMonth ) ? ( ( d<NowDate ) ? 'disabled' : false ) : false; } } </script>

  • PHP+Ajaxでプルダウンの連動

    お世話になっております。久しぶりですが、わからないところが出てきたので、質問させてくださいませ。 現在、PHP+MySQLでホームページを作っています。 A(大カテゴリ)、B(小カテゴリ)のそれぞれのプルダウンを持っていて、 MySQL上では、BはどのAに所属しているかが格納されています。 その上で、 PHPソース <script type="text/javascript" src="ajax.js"></script> Aの部分 <select name="category" id="category" onChange="changePack(this)"> <option value="">--</option> <option value="1">A-1</option> <option value="2">A-2</option> <option value="3">A-3</option> </select> Bの部分 <select name="pack" id="pack"> <option value="">--</option> </select> Ajax部分のソース // 検索結果画面初期表示用 function setList() { var Category = "0"; var Pack = "0"; setPackOption(Category); document.rsv_input.category.selectedIndex = 0; document.rsv_input.pack.selectedIndex = 0; } // カテゴリ選択時 function changePack(Category) { var Category; getResult(Category.value); } function getResult(Category) { //XMLHttpRequestオブジェクト生成 var xmlhttp = createHttpRequest(); if (xmlhttp == null) { return null; } var data = ""; data += "category=" + Category; sendRequest(xmlhttp, "POST", "result.php", false, data, callBack); } function callBack(xmlhttp) { var result = xmlhttp.responseText; var resArray = result.split(","); for (i=0; i<resArray.length; i++) { var packArray = resArray[i].split("/"); document.rsv_input.pack.options[i] = new Option(packArray[1], packArray[0]); } } relust.phpのソース $category = ( $_POST["category"] != "0" )? $_POST["category"] : ''; select文で「$category」を持つ、レコードから「小カテゴリ」のid、名称 を取得 $id = $Cols['id']; $name = $Cols['name']; $data .= ',' . $id . '/' . $name; echo($data); としておりますが、小カテゴリのプルダウンに$dataの中身が反映されません。(result.phpの$_POSTを$_GETに変更して単体で動かした場合は、$dataが読み取れる状態になります。) http://www.okushin.co.jp/information/Ajax_report/06_sample02.php を参考にさせていただいていますが、プルダウンの総数が違う。や、最終結果をテキストデータとしてhtml中に書き出すなど若干の相違点でつまずいています。 当方、PHP(0.5年)、JavaScript(0.5年)位の経験しか持ち合わせていないので、余計にわかってないだけかも知れません。 お手数をおかけいたしますが、修正箇所の指摘やその方法などを教えていただけませんでしょうか。よろしくお願いいたします。

    • ベストアンサー
    • PHP
  • フォームでEnterを押してもsubmitさせない

    現在製作中のサイトで、ajaxで処理を行うため、フォームでEnterキーを押しても通常のsubmitをさせずに、別途処理を関数で呼び出すようにしています(下記参照)。 チェックしたほとんどのブラウザでは思い通りの動作なのですが、IE8(他のIEは未テスト)で、同じページに別のフォーム(こちらのフォームはEnterでsubmitさせています)があるページのみ、submitされてしまいます。(ajax_submit()も実行されます) 小さな可能性でもかまいません。お心当たりがございましたらお助けください。 ▼HTML <form method="get" action="">  <input id="s" type="text" value="" onKeyPress="return submitStop(event);" />  <p id="search_sbm" onclick="ajax_submit();">検索</p> </form> ▼JavaScript function submitStop(e){  if (!e) var e = window.event;  if(e.keyCode == 13) {   ajax_submit();   return false;  } }

  • [java script]NNでnullになる

    selectボックスに西暦を表示しています。 このselectボックスを2つ用意して、範囲設定を行っているのですが、 範囲指定大小チェックのロジックを作り、IEでは正しく動作したのですが、 NNだと関数conf()内でdocument.test.FROM_YEAR.valueとdocument.test.TO_YEAR.valueの値をみてみると、nullになっていたためFORM_YEAR>TO_YEARと指定しても範囲指定大小チェックのif文が、必ずfalseになって 処理を続行してしまいます。 なぜ、IEではうまくいくのにNNだとうまくいかないのでしょうか? これってNNのバグ??? ~ソースコード(抜粋)~ <SCRIPT LANGUAGE="JavaScript"> <!-- function conf() { from = document.test.FROM_YEAR.value; to = document.test.TO_YEAR.value; if (from > to) { alert("年の指定に誤りがあります。"); return false; } } //--> </SCRIPT> <FORM NAME='test' ACTION='test.html' METHOD="post" onSubmit="return(conf())"> <SELECT NAME='FROM_YEAR'> <OPTION VALUE='2001'>2001 <OPTION VALUE='2002' SELECTED>2002 <OPTION VALUE='2003'>2003 <OPTION VALUE='2004'>2004 <OPTION VALUE='2005'>2005 <OPTION VALUE='2006'>2006 </SELECT>年 <SELECT NAME='TO_YEAR'> <OPTION VALUE='2001' SELECTED>2001 <OPTION VALUE='2002'>2002 <OPTION VALUE='2003'>2003 <OPTION VALUE='2004'>2004 <OPTION VALUE='2005'>2005 <OPTION VALUE='2006'>2006 </SELECT>年 <INPUT TYPE='SUBMIT' NAME='SUBMIT' VALUE='登録'>

  • セレクトボックスの内容を次のページで受け取る方法

    <form action="./check.asp" method="POST"> <table> <tr> <td> <select name="year"> <option value="2006" >2006</option> <option value="2007" >2007</option> <option value="2008" >2008</option> </select> </td> </tr> <tr> <td align="center"><input type="submit" value="確認する"></td> </tr> </table> </form> として 次のページで YEAR =Trim(request("year")) Response.Write YEAR で受け取り表示しようとしていますが取れません。なぜですか?教えてください