2

私は現在、クライアント ポータルに取り組んでおり、このフォーラムの人々の助けを借りて、何時間もの血の汗と涙を流しながら、下の写真のようにこの時点に到達しました。

代替テキスト

このフォームの最後の手順を完了する必要がありますが、どうすればよいかわかりません。下部にはタブ付きのインターフェイスがあり、その上にはチェック ボックスがあります。私が欲しいのは、ユーザーがボックスをチェックしたりチェックを外したりして、タブが表示されたり消えたりして、開いている曜日を選択できるシステムです。このコードは、フォームの範囲からタブの詳細を追加/削除する必要もあり、これは私が解決するのに苦労している部分です. フォームの残りの部分は JQuery を使用して構築されているため、コードの一貫性を維持したいと考えています。

一番下のフォームを送信してほしくないのですが、チェックボックスで選択していない日付情報を誤って送信してしまいます。

誰かが助けてくれることを願っています

ダン

これはタブに使用しているコードです。JQuery UI を試しましたが、気に入らなかった

$(document).ready(function(){
  $( '.days:not(:first)' ).hide();
  $('#info-nav li').click(function(e) {
  $('.days').hide();
  $('#info-nav .current').removeClass("current");
  $(this).addClass('current');

  var clicked = $(this).find('a:first').attr('href');
  $('#info ' + clicked).fadeIn('fast');
  e.preventDefault();
 }).eq(0).addClass('current');
});

チェックボックスがチェックされているときにタブを非表示および表示するために、以下のようなコードを使用していましたが、それは粗野で機能しませんでした。非表示でフォームの範囲外の div に追加していました。次に、フォーム内の div でこれを切り替えます。

$('#info-nav li').hide();
$('#holdingDiv').hide();

if($(':checkbox[name="Monday"]').is(':checked'))
{
    $('#info-nav li a[href="#Monday"]').parents("li").show();
     $('#Monday').appendTo('#info');
}

if($(':checkbox[name="Tuesday"]').is(':checked'))
{
    $('#info-nav li a[href="#Tuesday"]').parents("li").show();
    $('#Tuesday').appendTo('#info');
}

if($(':checkbox[name="Wednesday"]').is(':checked'))
{
    $('#info-nav li a[href="#Wednesday"]').parents("li").show();
$('#Wednesday').appendTo('#info');
}

if($(':checkbox[name="Thursday"]').is(':checked'))
{
    $('#info-nav li a[href="#Thursday"]').parents("li").show();
$('#Thursday').appendTo('#info');
}

if($(':checkbox[name="Friday"]').is(':checked'))
{
    $('#info-nav li a[href="#Friday"]').parents("li").show();
$('#Friday').appendTo('#info');
}

if($(':checkbox[name="Saturday"]').is(':checked'))
{
    $('#info-nav li a[href="#Saturday"]').parents("li").show();

}

if($(':checkbox[name="Sunday"]').is(':checked'))
{
   $('#info-nav li a[href="#Sunday"]').parents("li").show();
       $('#Sunday').appendTo('#info');}                                                 $(':checkbox').click(function()
{
    if($(':checkbox[name="'+ $(this).attr('name') +'"]').is(':checked'))
    {
       $('#info-nav li a[href="' + $(this).val() + '"]').parents("li").show();
       $($(this).val()).appendTo('#info');
   $('#info-nav li a[href="' + $(this).val() + '"]').parents("li").hide();
   $($(this).val()).appendTo('#holdingDiv');
      }
 })
4

2 に答える 2

1

送信したくないフォームフィールドを無効にし、適切なチェックボックスが選択されているときに有効にすることをお勧めします。

$('#check-monday').toggle(function () {
    $('#tab-monday :input').attr('disabled', 'disabled');
    // hide the tab
}, function () {
    $('#tab-monday :input').removeAttr('disabled');
    // show the tab
});

無効にされたフォーム要素は、フォームが送信されたときにサーバーに渡されません。これには、ユーザーがタブを再度有効にした場合にデータをフォームに保持できるという利点もあります。

于 2010-12-21T17:01:01.230 に答える
0

フォームによって送信されるデータを検証することは、不正なデータが送信されるのを防ぐために探していることだと思います。jQuery を使用してタブ スペースの内容を変更し、必要に応じてフォーム情報を追加/削除します。

于 2010-12-21T16:55:52.423 に答える