質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.37%

javascriptで値が0だったらajaxの処理を中断したいのですが...

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 739

score 15

値が0ではなかったらajaxの処理をやめたいのですが、このコードだと、submitボタンをクリックして、0ではなかったらアラートで0にして下さいと表示されてから、クリックイベントのajaxの処理が動きます。
イベントをonsubmitにしたらコードが動かなくて困っています。
0ではなかったらpostを中断したいのですが、どのようにすればよろしいでしょうか?
また、このコードがないと分からないなど情報が不足していたらお伝えいたします。
回答よろしくお願いいたします。

start.php

<div id=title>
<div class="sample_box8">
<?php

while( in_array( ($arrangenumber = mt_rand(1,180)), array(163, 166, 169, 172, 173, 175, 176, 178, 179,) ) );
echo $arrangenumber . "<br>" . "<br>";

?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel ="stylesheet" href="../../css/top.css">
    <!-- <script type="text/javascript" src="./start.js"></script> -->
    <script type="text/javascript" src="./problem.js"></script>
    <title>dartsarrange</title>
</head>
<body>

<form action="#" name="form1" method="post" >

<p>1本目</p>
<br>
<select name="goods1" class="a" onChange="keisan()">
<option value="0">タイプを選択してください</option>
<option value="50">bull</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
</select>

<br>

<select name="goods2" class="b" onChange="keisan()">
<option value="0">タイプを選択してください</option>
<option value="1" data-val="50">こちらを選択して下さい</option>
  <option value="1" data-val="1">シングル</option>
  <option value="2" data-val="1">ダブル</option>
  <option value="3" data-val="1">トリプル</option>
  <option value="1" data-val="2">シングル</option>
  <option value="2" data-val="2">ダブル</option>
  <option value="3" data-val="2">トリプル</option>
  <option value="1" data-val="3">シングル</option>
  <option value="2" data-val="3">ダブル</option>
  <option value="3" data-val="3">トリプル</option>
  <option value="1" data-val="4">シングル</option>
  <option value="2" data-val="4">ダブル</option>
  <option value="3" data-val="4">トリプル</option>
  <option value="1" data-val="5">シングル</option>
  <option value="2" data-val="5">ダブル</option>
  <option value="3" data-val="5">トリプル</option>
  <option value="1" data-val="6">シングル</option>
  <option value="2" data-val="6">ダブル</option>
  <option value="3" data-val="6">トリプル</option>
  <option value="1" data-val="7">シングル</option>
  <option value="2" data-val="7">ダブル</option>
  <option value="3" data-val="7">トリプル</option>
  <option value="1" data-val="8">シングル</option>
  <option value="2" data-val="8">ダブル</option>
  <option value="3" data-val="8">トリプル</option>
  <option value="1" data-val="9">シングル</option>
  <option value="2" data-val="9">ダブル</option>
  <option value="3" data-val="9">トリプル</option>
  <option value="1" data-val="10">シングル</option>
  <option value="2" data-val="10">ダブル</option>
  <option value="3" data-val="10">トリプル</option>
  <option value="1" data-val="11">シングル</option>
  <option value="2" data-val="11">ダブル</option>
  <option value="3" data-val="11">トリプル</option>
  <option value="1" data-val="12">シングル</option>
  <option value="2" data-val="12">ダブル</option>
  <option value="3" data-val="12">トリプル</option>
  <option value="1" data-val="13">シングル</option>
  <option value="2" data-val="13">ダブル</option>
  <option value="3" data-val="13">トリプル</option>
  <option value="1" data-val="14">シングル</option>
  <option value="2" data-val="14">ダブル</option>
  <option value="3" data-val="14">トリプル</option>
  <option value="1" data-val="15">シングル</option>
  <option value="2" data-val="15">ダブル</option>
  <option value="3" data-val="15">トリプル</option>
  <option value="1" data-val="16">シングル</option>
  <option value="2" data-val="16">ダブル</option>
  <option value="3" data-val="16">トリプル</option>
  <option value="1" data-val="17">シングル</option>
  <option value="2" data-val="17">ダブル</option>
  <option value="3" data-val="17">トリプル</option>
  <option value="1" data-val="18">シングル</option>
  <option value="2" data-val="18">ダブル</option>
  <option value="3" data-val="18">トリプル</option>
  <option value="1" data-val="19">シングル</option>
  <option value="2" data-val="19">ダブル</option>
  <option value="3" data-val="19">トリプル</option>
  <option value="1" data-val="20">シングル</option>
  <option value="2" data-val="20">ダブル</option>
  <option value="3" data-val="20">トリプル</option>
</select>
<p>2本目</p>


以下省略~~

<p>合計</p><br><br>
<input type="text" name="field_total" size="8" value="0" >

<div class="btn-area">
    <input type="submit" value="次へ" id="problem_button" onsubmit="return checkForm();">
</div>

</form>
</div>
</div>

<script>

function checkForm(){
    if(document.form1.field_total.value != 0 ){
        alert("0にして下さい");
    return false;
    }else{
    return true;
    }
}

</script>

<script>


var $b = $('.b');
var original = $b.html();

$('.a').change(function() {

  var val1 = $(this).val();

  $b.html(original).find('option').each(function() {
    var val2 = $(this).data('val');
    if (val1 != val2) {
      $(this).not(':first-child').remove();
    }
  });

  if ($(this).val() == "") {
    $b.attr('disabled', 'disabled');
  } else {
    $b.removeAttr('disabled');
  }

});


var $d = $('.d');
var originala = $d.html();

$('.c').change(function() {

  var val3 = $(this).val();

  $d.html(originala).find('option').each(function() {
    var val4 = $(this).data('val');
    if (val3 != val4) {
      $(this).not(':first-child').remove();
    }
  });

  if ($(this).val() == "") {
    $d.attr('disabled', 'disabled');
  } else {
    $d.removeAttr('disabled');
  }

});


var $f = $('.f');
var originalb = $f.html();

$('.e').change(function() {

  var val5 = $(this).val();

  $f.html(originalb).find('option').each(function() {
    var val6 = $(this).data('val');
    if (val5 != val6) {
      $(this).not(':first-child').remove();
    }
  });

  if ($(this).val() == "") {
    $f.attr('disabled', 'disabled');
  } else {
    $f.removeAttr('disabled');
  }

});

</script>

<script type="text/javascript">
<!--
function keisan(){

    var price1 = document.form1.goods1.options[document.form1.goods1.selectedIndex].value;


    var price2 = document.form1.goods2.options[document.form1.goods2.selectedIndex].value;


    var price3 = document.form1.goods3.options[document.form1.goods3.selectedIndex].value;


    var price4 = document.form1.goods4.options[document.form1.goods4.selectedIndex].value;


    var price5 = document.form1.goods5.options[document.form1.goods5.selectedIndex].value;


    var price6 = document.form1.goods6.options[document.form1.goods6.selectedIndex].value;


    total = parseInt(price1) * parseInt(price2) + parseInt(price3) * parseInt(price4) + parseInt(price5) * parseInt(price6);


  var $arrangenumber = <?php echo json_encode($arrangenumber); ?>;


  document.form1.field_total.value = $arrangenumber - total; 

}




</script>

</body>
</html>

problem.js

$(function() {

    $('#problem_button').click(function() {

                  var data = {request : $('#request').val()};

                  $.ajax({
                          //POST通信
                          type: "POST",

                          url: "start.php",
                          data: data,

                          success : function(data, dataType) {
                              //HTMLファイル内の該当箇所にレスポンスデータを追加します。
                              $('#res').html(data);
                          },
                          //処理がエラーであれば
                          error : function() {
                              alert('通信エラー');
                          }
                   });
                   //submitによる画面リロードを防いでいます。
                   return false;
      });
    });
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2019/08/12 17:35

    どこに「0」が入力されるのでしょうか。

    キャンセル

  • kazumons

    2019/08/12 17:52

    プルダウンのvalue値の計算で0が出力されています。

    0が表示されているのはこちらです。
    document.form1.field_total.value = $arrangenumber - total;

    キャンセル

回答 1

+1

$('#problem_button').clickの関数でも0が入っているかどうかを確認すればよいのでは。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/12 18:01

    ご回答ありがとうございます。
    それはどのようにすればよろしいでしょうか?

    キャンセル

  • 2019/08/12 18:05

    アラートを出すコードの部分で、ご自身でifを使って分岐されていると思うのですが・・・。

    キャンセル

  • 2019/08/12 18:39

    ご回答ありがとうござます。どうしてもできません。
    problem.jsの所にどのように記述すればよろしいでしょうか?

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る