Как отправить форму при нажатии вкладки

Я хотел бы отправить форму, когда нажимается табуляция. Это то, что у меня есть до сих пор:Как отправить форму при нажатии вкладки

<!DOCTYPE html> 
    <html> 
     <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
      <title>Submit a Form on Tab Click</title> 

      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
      <style type="text/css"> 
      </style> 

      <script> 
       $(function() { 
        $("#Main").tabs(); 
       }); 
      </script> 

      <script> 
      $(document).ready(function(){ 
      $('#Tab1').click(function(){ 
      $('#Form_1').submit(); 
      }); 

</script> 

     </head> 
    <body> 
     <div id="Main"> 
      <ul> 
       <li><a href="#Tab1">Tab1</a></li> 
       <li><a href="#Tab2">Tab2</a></li> 
       <li><a href="#Tab3">Tab3</a></li> 
       <li><a href="#Tab4">Tab4</a></li> 
       <li><a href="#Tab5">Tab5</a></li> 
       <li><a href="#Tab6">Tab6</a></li> 
      </ul> 

      <form id="Form_1" action="Tab_Click_v00.html" method="post"> 
      <input type="hidden" name="Nb_var99" value="1"> 
      </form> 

      <div id="Tab1"> 
       <p>Tab1</p> 
      </div> 
      <div id="Tab2"> 
       <p>Tab2</p> 
      </div> 
      <div id="Tab3"> 
       <p>Tab3</p> 
      </div> 
      <div id="Tab4"> 
       <p>Tab4</p> 
      </div> 
      <div id="Tab5"> 
       <p>Tab5</p> 
      </div> 
      <div id="Tab6"> 
       <p>Tab6</p> 
      </div> 
     </div> 
    </body> 
</html>

Каждая вкладка представит другую форму. Надеюсь, это поможет определить, что я пытаюсь достичь. достичь. Я новичок во всем этом, поэтому, пожалуйста, будьте конкретны.

спасибо.

источник

2013-09-23 Neil Porven

где форма в разметке? –

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

. Это та же форма для каждого щелчка на вкладке или в другой форме в зависимости от щелчка на вкладке? – Vlad

Вы можете использовать этот jQuery:

jsFiddle here

$(document).ready(function() { 
    $("#Main").tabs(); 

    $('[id^=ui-id-]').click(function() { 
     var tabId = $(this).attr('id'); 
     alert('Tab clicked: ' + tabId); 

     if (tabId == 'ui-id-1') { 
      $('#LoginForm').submit(); 
     }else if (tabId == 'ui-id-2') { 
      $('#form2').submit(); 
     }else if (tabId == 'ui-id-3') { 
      $('#form3').submit(); 
     } 
    }); 
});

jQueryUI вкладки все имеют идентификаторы, начинающиеся с ui-id-#, где # вкладка номер (например, ui-id-3.

Селектор $('[id^=ui-id-]') средства: Для любого элемента с идентификатором атрибута начинается с ui-id-, ловушкой событие щелчка и сделать это ...

Обратите внимание, что <form> тег должен иметь атрибут ID, как указано в выше кода.Например, для формы на вкладке 3:

<form id="form3" action="whatever.php" method="POST">

Предположим, что каждая вкладка имеет форму на нем и, например, формы все имеют идентификаторы, которые последовательно пронумерованы в соответствии с вкладке они находятся на, таких как форма-1, форма-2, форма-5 и т.д. затем вы можете использовать линию var tabId = $(this).attr('id'), чтобы сделать это:

$(document).ready(function() { 
    $("#Main").tabs(); 

    $('[id^=ui-id-]').click(function() { 
     var tabId = $(this).attr('id'); //ui-id-4 
     var tabNum = tabId.split('-')[2]; //4 
     $('#Form-' + tabNum).submit(); 
    }); 
});

Например, предположим, что для табов идентификатор ui-id-4, то вы хотели бы дать <form> для вкладки 4 и ID: <form id="Form-4">. Приведенный выше код затем отправит эту форму при нажатии на вкладку.

Обратите внимание, что приведенный выше код ожидает, что ваши теги формы будут иметь идентификатор, например:

<form id="myFormId" action="somepage.php" method="POST" >

источник

2013-09-23 16:37:36 gibberish

Хорошо, может быть, я что-то делаю неправильно, но, похоже, это не работает. Вот что я сделал: –

Вы попробовали код, который я предложил в своем ответе? Это не требовало внесения каких-либо изменений в ваш HTML. Тем не менее, способ, которым вы его закодировали, требует добавления идентификатора для каждого якоря '' и * будьте осторожны с капитализацией! * Tag! = Tag – gibberish

@NeilPorven Я изменил свой пример, чтобы ответить на ваш комментарий выше. См. Пересмотренный код в первом примере. Внимательно прочитайте мои комментарии (в сообщении). Вы должны быть в порядке с этим - вы * понимаете, что устанавливаете атрибут ID в тегах формы и сопоставляете это с тем, на какую вкладку было нажато, да? – gibberish

Предполагая, что ваша форма будет иметь идентификатор «myform», вы можете поместить прослушиватель событий щелчка на вкладках.

Добавьте класс вкладок class='tab'

$('.tab').on('click', function(){ 
    $('#myform').submit(); 
});

источник

2013-09-23 16:28:25 Vlad

Лапки виджет имеет некоторые события, которые вы можете использовать. Например, когда вкладка активирована, вы можете иметь обработчик для the activate event. Вы можете использовать стандартную обработку событий jQuery и указать событие tabsactivate. Что-то вроде этого:

$('#Main').on('tabsactivate', function (event, ui) { 
    // your logic here 
    $('#someForm').submit(); 
});

Вы можете проверить ui аргумент, передаваемый в этот обработчик событий для получения информации о вкладке. Например, конкретная вкладка перемещается из/в. Нравится:

if (ui.oldPanel.selector == '#Tab1') { 
    // The user just left Tab1 
}

Итак, в этом обработчике вы выполняете любую задачу, которую вам нужно выполнить при изменении вкладки.

источник

2013-09-23 16:28:44 David

На каждой вкладке может быть ссылка на каждую форму, которая должна быть отправлена на вкладке.

<ul> 
    <li><a href="#Tab1" data-form="#f1">Tab1</a></li> 
    <li><a href="#Tab2" data-form="#f2">Tab2</a></li> 
    <li><a href="#Tab3" data-form="#f3">Tab3</a></li> 
    <li><a href="#Tab4" data-form="#f4">Tab4</a></li> 
    <li><a href="#Tab5" data-form="#f5">Tab5</a></li> 
    <li><a href="#Tab6" data-form="#f6">Tab6</a></li> 
</ul>

Затем связать событие щелчка на каждой вкладке:

$("#Main").on("click", "a", function() { 
    var formId = $(this).data("form"); 
    $(formId).submit(); 
});

источник

2013-09-23 16:29:44 letiagoalves

простой способ, Asign атрибут ID для каждого <a> и <form>, а затем сделать это:

<script type="text/javascript"> 

$(document).ready(function(){ 
    $('#tab1').click(function(){ 
     $('#form1').submit(); 
    }); 
    $('#tab2').click(function(){ 
     $('#form2').submit(); 
    }); 
    $('#tab3').click(function(){ 
     $('#form3').submit(); 
    }); 
}); 

</script>

скрипку пример here

источник

2013-09-23 16:32:21 CoderRoller

Как отправить форму при нажатии вкладки

ответ

Смежные вопросы