【javascript】submitのURLを複数設定したい

Question

質問にお目通しいただき、ありがとうございます。
1点お知恵をお借りしたいものがございまして、質問をさせていただきます。

■submitのURLを条件分岐したい■
現在、サービスの申し込み画面を作成しております。
サービスには申し込み条件があり、条件をみたしていないお申込みは完了画面にとばないようにしたいです。
そこで、条件聴取項目に紐づけてformの遷移先を変更するスクリプトを書いてみたのですが、どうも動きません。
ほかにもポップアップを出すスクリプトを記述しており、こちらは問題なく動作します。
現在の状況を記載いたしますので、ご確認いただけますと幸いでございます。

<form name="ansform">
  <div class="question">
    <h2>条件の項目聴取</h2>
    <select name="form__jyoken" id="jyoken" onchange="jyoken()">
      <option value="">お選びください</option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
    </select>
  </div>
  <!--  条件外の方にはポップアップでその旨をおしらせ  -->
  <script>
    function jyoken(){
    var val = document.getElementById('jyoken').value;
      if(val == 'A'){
        alert('申し訳ございません。Aの方はサービス対象外です。')
      }
      if(val == 'B'){
        alert('申し訳ございません。Bの方はサービス対象外です。')
      }
    }
  </script>

<!--
中略
  -->

  <div>
    <input type="image" src="/img/btnImage.png" value="確認画面へ" onsubmit="sendControl()">
  </div>
  <!--  遷移先URLの制御スクリプト  -->
  <script>
    function sendControl(){
    var val = document.getElementById('jyoken').value;
　　　//条件Aを選択した方は完了画面には遷移させない
      if(val == 'A'){
        document.ansform.action="http://google.co.jp/";
      }
　　　//条件Bを選択した方は完了画面には遷移させない
      if(val == 'B'){
        document.ansform.action="http://google.co.jp/";
      }
　　　//それ以外は確認画面へ
      else{  
        document.ansform.action="confirm.html";
      }
    }
  </script>

</form>

javascriptはなかなか学習状況がよくなく、
稚拙な記述になってしまっておりますが、
上級者のみなさまのお知恵をおかりできればと思い、
質問をさせていただきました。

お手数をおかけしますが、なにとぞよろしくお願いいたします！！

Comments

[Lhankor_Mhy]

document.ansform には何が入っていますか？

[x_x]

ansformはどこから出てきたのでしょうか？ 提示コードに重要なところが省略されていませんか？

[m.ts10806]

formのname属性にansformとついていないから動いていないということかも。またはtype="image"の初期値はsubmitだったはずなので色々する前に送信してしまうとか。いずれにしても起きている現象、エラー確認（ブラウザ開発ツール）をして、その結果も質問に追記してください。

[hello-]

ansformは<form name="ansform">に設定しておりました。ご指摘ありがとうございます。

[hello-]

＞mts10806さま　　エラー表示は特に表示されておらず、フォームがそのまま確認画面に遷移いる状況です。やはり先に送信してしまっているのでしょうか？image以外でも試してみます！

[m.ts10806]

あ、いえ、buttonで試してください。imageまたはsubmitだとevent.preventDefaultを対象の関数冒頭に入れると良いです。

[m.ts10806]

上記だといずれにしても送信しないので　最後にdocument.ansform.submit は入れてくださいね。

[Lhankor_Mhy]

横からすみません。onsubmit属性で指定する時って、どうやってeventオブジェクトを受け取るんでしたっけ……？

[think49]

To: Lhankor_Mhy さん、onsubmit属性内でeventは使えます。<form onsubmit="sendControl(event)">

[Lhankor_Mhy]

ありがとうございます！　そうなんですね、勉強になりました。

Answer 1

if(val == 'A'){
  alert('申し訳ございません。Aの方はサービス対象外です。')
}
if(val == 'B'){
  alert('申し訳ございません。Bの方はサービス対象外です。')
}

この設計、とても使いづらくないですか。

1. Aを選ぶ→エラー
2. Bを選ぶ→エラー
3. Cを選ぶ→エラーなし (ユーザの心の声: 選ぶ前に教えてくれ)

選べない選択肢を用意しておく事がナンセンスです。
「A,Bで申請したいのですが」と問い合わせが来ないように全サービスを選択肢にしてエラーになる事をユーザに確認させる意図があると推察しますが、それなら、ユーザビリティの高い別の対策を講じるべきでは。

• 選択肢にA,Bを含めず、選択肢付近に「A,Bはサービス対象外の為、申請出来ません」と注意書きを書いておく
• <option value="B(サービス対象外の為、申請不可)" disabled>

Re: hello- さん

Answer 2

まず、submitはフォームで起こるのでonsubmitをformに移動

<form name="ansform" onsubmit="sendControl()">

elseも抜けてます。

//if(val == 'B'){
else if(val == 'B'){

Answer 3

ブラウザ依存かもしれませんが、当方の環境では皆さんの回答に加えて、

      if(val == 'A'){
        document.ansform.action="http://google.co.jp/";
        return true;
      }

としないと、動作しませんでした。実行前コンパイルで関数内にreturn文がないと短絡されるのかも……？

Comments

[think49]

(編集後)回答欄に書こうとして、誤ってコメントしてしまいましたので、本コメントを編集しました。
失礼しました。

Answer 4

サブミットの部分は既に回答されているので、条件変更の部分について。idとfunction名は同じにしないほうが良いですよ。
jyoken()　⇒　changeJyoken()
に変更すると動くと思います。
※当方chrome+codepenで再現検証した際にchangeイベントが走りませんでした。