Formにインデックスの値を渡したい

質問

JavascriptとFormに関する質問です。

今、Form送信で伝票の発行をしようとしています。
伝票は４種類あり（今後増えるかもしれません）、ダイアログを開いてその中のひとつを選択させ、その値を取得してFormに渡そうと考えています。

コードはこんな感じです。

【Form部分】
<form name="fmPrintSlip" method="post" action="/printSrip" onsubmit="return checkSubmitPrintSlip();">
<input type="hidden" id="slipFormId" name="slipFormId" />'
<input type="submit" id="submPrinttSlip" value="伝票発行" />
</form>

【Javascript部分】
function checkSubmitPrintSlip(){

gSliprModalDialog.dialog( "open" );

var res = '';
res += '伝票発行を行います。伝票種を選択してください。<br />'
+ '<select name="choiseSlipName">'
+ '<option value="1">納品書１</option>'
+ '<option value="2">納品書２</option>'
+ '<option value="3">受注票</option>'
+ '<option value="4">配送伝票</option>'
+ '</select>'
+ '<input type="button" value="選択" onclick="choiseFormId();">';

// 「伝票種類」をセット
var space = document.getElementById("dataSlipDialog");
space.innerHTML = res;

return true;
}

function choiseFormId(){
var atai = $("select[name='choiseSlipName']").val();
$('#slipFormId').get(0).value = atai;;
console.log("値は=======" + atai);
gSliprModalDialog.dialog( "close" );
}

ところが、checkSubmitPrintSlip()　を通ったら最後は「true」なのでインデックスの値を取得できないままFormに戻ってしまい、うまくいきません。
「true」なので当たり前といえば当たり前です。
「false」にしたらインデックスの値を取得できるのですが、そこで終ってしまうので、Formに値を渡すことができません。これも当たり前といえば当たり前なんですが・・

これをどのようにしたら、インデックスの値を取得してFormに返せるようにできるでしょうか。
ご指導ください。
よろしくお願いします。

回答No.2

byDesign · ベストアンサー

res += '伝票発行を行います。伝票種を選択してください。'
+ '<form method="post" action="/printSrip" onsubmit="return choiseFormId();">' // ★変更
+ '<select name="choiseSlipName">'
+ '<option value="111">佐川急便</option>'
+ '<option value="112">佐川急便　個数タグ</option>'
+ '<option value="113">ヤマト運輸</option>'
+ '<option value="114">ヤマト運輸　コレクト</option>'
+ '</select>'
+ '<input type="hidden" name="slipFormId" />' // ★追加
+ ' <input type="hidden" value="伝票発行" /> // ★追加
+ '<input type="submit" value="選択" >'　// ★変更
+ '<form>';

//★の部分を変更(追加)すればよいのではないでしょうか？（変更２箇所・追加２箇所）
伝票発行の選択時にsubmitしたいわけですよね？
でしたら、その場所でsubmitすれば良いだけなのではないでしょうか？
それとも何か戻さないといけない理由があるのでしょうか？

お礼

byDesignさん、ご丁寧な説明ありがとうございました。

私が「戻る」ことにこだわったのは最初の起点となる<form name="fmPrintSlip">に戻さないと処理できないと考えたからです。
Formが２個あってはダメだ、と頭から離れなかったためです。

byDesignさんの指摘されたように、submitする場所を伝票種の選択のところにすればいいわけですね。
目からウロコがとれた感じでした。

それで、最初のFormの方はボタンだけにして、あとの方のFormで送信することによってうまくいきました。
本当にありがとうございまました。
大助かりです。

回答No.3

byDesign

どうしても戻したい場合は、以下のようにすれば良いと思います

１．checkSubmitPrintSlip()内で伝票種類があればtrue/なければダイアログをだしてfalse
２．choiseFormIdで伝票種類をセットしてsubmit

function checkSubmitPrintSlip(){
var slipFormId = $("#slipFormId").val();
if(slipFormId){
return true;
}

var res = '';
res += '伝票発行を行います。伝票種を選択してください。<br />'
+ '<select name="choiseSlipName">'
+ '<option value="1">納品書１</option>'
+ '<option value="2">納品書２</option>'
+ '<option value="3">受注票</option>'
+ '<option value="4">配送伝票</option>'
+ '</select>'
+ '<input type="button" value="選択" onclick="choiseFormId();">';

//
var space = document.getElementById("dataSlipDialog");
space.innerHTML = res;
alert('aa')
return false;
}

function choiseFormId(){
var atai = $("select[name='choiseSlipName']").val();
$("#slipFormId").val(atai);
$("[name='fmPrintSlip']").submit();

}
// ダイアログの部分はカットしているので、適当に入れてください。

サンプルです
https://jsfiddle.net/4knxmzvm/1/

回答No.1

byDesign

伝票種類の選択をformで囲む（他送るものがあればhiddenでセット）
choiseFormId()のボタンtypeをsubmitに変更
choiseFormId()をonsubmitに移動

でどうでしょうか？

お礼

byDesignsann、早速の回答ありがとうございました。
ご指摘のとおり以下のように<form>でくくり、buttonをsubmitに変えてみましたが変化はありませんでした。<form>のnameもないし、action先もなくてよかったんでしょうか。
やはり「true」なのでもとのFormにIDが送信されないので、正しく処理できません。
var res = '';
res += '伝票発行を行います。伝票種を選択してください。'
+ '<form>'
+ '<select name="choiseSlipName">'
+ '<option value="111">佐川急便</option>'
+ '<option value="112">佐川急便　個数タグ</option>'
+ '<option value="113">ヤマト運輸</option>'
+ '<option value="114">ヤマト運輸　コレクト</option>'
+ '</select>'
+ '<input type="submit" value="選択" onsubmit="choiseFormId();">'
+ '<form>';

// 検索条件のコンボボックスに「伝票種類」をセット
var space = document.getElementById("dataTableDeliverySlipDialog");
space.innerHTML = res;

私の説明が中途半端だったのかもしれません。<form name="fmPrintSlip">の送信で発行処理せる際に、onsubmit="return checkSubmitPrintTransportSlip();"　に飛び、モーダルダイアログを開いて一覧表示された伝票を選択させ、その伝票のIDを<form name="fmPrintSlip">に戻して送信処理させようとしたものです。
説明が足りなかったようで申し訳ありません。