(jsを使用して)要素を選択および設定できるリスト(単純なリスト)、必要な要素の数を選択できるフォーム、および送信フォームがあります。要素を選択すると、例外をスローするスクリプトがあります。問題は、要素が選択されていない場合にフォームが送信されないようにしたいが、例外はスローせず、送信ボタンの下にメッセージを表示することです(jqueryを使用)。以下の私のスクリプト:
<? foreach ($types as $type):?>
<ul class = "product_types">
<? if ($type->stock_2 > 0):?>
<li id = 'product_types'><a href="#" onclick='selecteazaElement(<?= $type->id; ?>,<?= $type->stock_2; ?>);'><?= $type->label; ?></a></li>
<? else: ?>
<li id = 'product_unavailable_types'><label><?= $type->label; ?></label></li>
<? endif; ?>
</ul>
<? endforeach; ?>
<form name="addtobasket" method="POST" action="<?= Route::url('Add to Basket', array('sale_id' => $sale->id)); ?>">
<input type="hidden" name="idOfSelectedItem" id="idOfSelectedItem" value="-1">
<select name="number" id="number">
<option value=0>Alege numarul de produse</option> </select>
<button type="submit" name = "submit" onclick="addtobasket";>Adauga in cos</button><br />
</form>
リストの要素を設定するjs:
<script type="text/javascript">
function selecteazaElement(id,stock)
{
document.addtobasket.idOfSelectedItem.value=id;
window["canSubmit"] = true;
var number23=document.addtobasket.number;
number23.options.length=0;
if (stock>=6)
stock=6;
for (i=1;i<=stock;i++)
{
//alert ('id: '+id+'; stock: '+stock);
number23.options[number23.options.length]=new Option(i, i);
}
//window.status="my status";
}
submit
リスナーをフォームに追加します。送信されたら、要素が選択されているかどうかを確認します。選択されていない場合は、return false
を使用して送信を禁止できます。次に例を示します。
$('#myForm').submit(function()
{
if (/* test case not true */) {
$('#myError').show();
return false;
}
// ... continue work
});
そして、これがHTMLです:
<form id="myForm">
<input type="text"/>
<input type="submit"/>
</form>
JQueryを使用したくない場合は、次のように単純なJavaScriptで送信イベントを処理することもできます。
var myform = document.getElementById('myForm');
myform.addEventListener('submit', function() { console.log('Submitted!'); return false; });