Добавить / удалить данные с вкладками из формы с помощью JQuery - PullRequest
Новая
       23

Добавить / удалить данные с вкладками из формы с помощью JQuery

2 голосов
/ 21 декабря 2010

В данный момент я работаю над клиентским порталом, и с помощью людей на этом форуме и многих часов кровавого пота и слез я дошел до этой точки, изображенной ниже.

alt text

Теперь мне нужно завершить последний шаг этой формы, но я не совсем уверен, как это сделать.Внизу есть интерфейс с вкладками, а над ним есть флажки.Мне нужна система, в которой пользователь может устанавливать и снимать флажки, а вкладки появляются и исчезают, чтобы они могли выбирать дни недели, в которые они открыты.Этот код также должен добавить / удалить детали на вкладке из области формы, и это та часть, над которой я изо всех сил стараюсь работать.Остальная часть формы построена с использованием JQuery, поэтому я стараюсь, чтобы код был непротиворечивым.

То, что я не хочу, чтобы человек отправлял форму внизу, и она случайно отправляет информацию о днях, которую они имели.не отмечены флажками.

Надеюсь, что кто-то может помочь

Dan

Это код, который я использую для табуляции, я пробовал JQuery UI, но не сделал 't like it 

$(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');
      }
 })

Ответы [ 2 ]

1 голос
/ 21 декабря 2010

Я бы рекомендовал отключить поля формы, которые вы не хотите отправлять, и включить их, когда установлен соответствующий флажок: 

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

Отключенные элементы формы не передаются на сервер, когда формапредставленЭто также имеет то преимущество, что данные сохраняются в форме, если пользователь повторно включает вкладку.

0 голосов
/ 21 декабря 2010

Я думаю, что проверка данных, передаваемых с помощью формы, - это то, что вы ищете, чтобы предотвратить отправку неверных данных. Используйте jQuery, чтобы изменить содержимое пространства вкладок, чтобы добавлять / удалять информацию формы по мере необходимости.

...