Achieving a single form across multiple Twitter Bootstrap tabs

Is it possible to use one form across multiple Twitter Bootstrap tabs?

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#1" data-toggle="tab">Tab1</a>
    </li>
    <li>
      <a href="#2" data-toggle="tab">Tab2</a>
    </li>            
  </ul>
  <div class="tab-content">
    <div class="tab-pane" id="1">
      <form id="personal-data" class="form-horizontal">
      ...
    </div>
    <div class="tab-pane" id="2">
      <!-- form controls continue here -->
      <p>Hello, I'm in Section 2.</p>
    </div>            
  </div>
</div>
htmlcsstwitter-bootstrap

Answer №1

Is it a problem to have a single <form> that wraps around everything?

<form id="personal-data" class="form-horizontal" method="POST" action="#">

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#1" data-toggle="tab">Tab1</a>
    </li>
    <li>
      <a href="#2" data-toggle="tab">Tab2</a>
    </li>            
  </ul>
  <div class="tab-content">
    <div class="tab-pane" id="1">      
      ...
    </div>
    <div class="tab-pane" id="2">
      <!-- form controls to be continued here -->
      <p>Hi there, I'm in Section 2.</p>
    </div>            
  </div>
</div>

</form>

Are you planning to submit each tab individually or all at once on the last tab?

If you're going one-by-one (e.g., for validation), you can use $.post to send data back and forth seamlessly (in other words, make ajax calls).

Answer №2

Facing a similar issue, I recently encountered a solution by incorporating a button to smoothly transition between tabs. Typically, clicking on these buttons initiates a POST request automatically. To avoid this, simply include the following line in your button click function:

event.stopPropagation();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Make sure that when a user clicks on the back button in their web browser, it

Designing a file selection menu where users can choose a file and view it in a text area on a new page, allowing for text editing and saving with a click of a button. Users should be able to return to the file selection menu by simply clicking the browser ...

javascripthtmlasp.net

Is there a method to implement lazy loading for the images within the CardMedia component in Material UI?

How can I implement lazy loading for the image within the CardMedia component? Is there a specific attribute I should use or any other method to achieve this? <CardMedia key={cardIndex} component="img" style={{objectFit: 'cont ...

cssreactjsimagematerial-uilazy-loading

substituting symbols with colorful divs

I'm looking to add some color to my text using specific symbols. (), ||, and ++ are the symbols I'm using. If a text is enclosed in | symbols, it will appear in blue, and so on... Here is the code in action: const text = "|Working on the| i ...

javascripthtmlcss

Tips for Altering Information within a Text Box

Below is a snippet of HTML code that needs to be modified: <td class="targetTD"> <a href="http://foo.com"> <span>content</span> </a> **Text I want to modify** <span>more content</span> </td> The ...

javascriptjquerycsssharepoint-2013

JavaScript, webpage constantly reloading

Every time I try to interact with the form on this page, it automatically refreshes without any input from me. <html> <head> </head> <body> <form id="someForm"> <input id="someInput" /><button>Send&l ...

javascripthtml

Changing the border color of an HTML input is easy with these simple steps:

As part of an educational project, I am developing a login-registration system using HTML, CSS, and PHP. The system will include various HTML text boxes and elements. My goal is to change the border color of a textbox to green when I input something into ...

javascriptphphtmlcss

Styling Radio Buttons based on "Checked" Status

Is there a way to apply a CSS style to the image within this Radio button when the checked attribute is present? <div id="edit-attributes-24-42-wrapper" class="form-item"> <label for="edit-attributes-24-42" class="option"> <input type ...

cssradio-button

What should I do to resolve the issue of the function if ($(window).width() < 768) {} not functioning properly upon resizing the browser?

I am working on a functionality where the navigation bar items will toggle hidden or shown only when the browser width is less than 768px and an element with the class "navlogo" is clicked. I have included my code below for reference. if ($(window).width( ...

javascriptjqueryhtmlcssangularjs

What is the best way to connect users for chatting?

I am currently developing a cutting-edge chat application with a real-time communication server that allows me to send and receive messages seamlessly. The next step in my project involves mapping users for private real-time communication. I'm faced w ...

javascriptjqueryhtml

Arrange the divs in numerical order based on the number of downloads

I wrote a basic code to organize parent divs based on their titles. However, when I attempted to do the same for download counts, nothing happened - no errors or actions from the code. There are two functions in total, both of which are triggered by butto ...

javascripthtml

tag assistance for incorporating an attribute without a value

Trying to create: <div data-dropdown-content class="f-dropdown content"> using the tag helper. It seems there is no specific syntax for attributes without values <%= tag(:div, :class => "f-dropdown content", data: {dropdown-content: ""}, :& ...

htmlruby-on-rails-4.2

Experiencing the Pause: A Fresh Take on

I'm currently using this slideshow for a project, and I need to understand if it's possible to resume its interval. The current issue is that when you hover over the slideshow, the progress bar stops. But once you remove the mouse, it continues f ...

javascriptjqueryhtmlcssslideshow

Is there a way for me to modify the color of the font?

I have written a code to display a tree structure and I want the text to be in Black color. However, it is appearing in White color, even though I did not mention white anywhere. In the body section, I clearly specified black color but it is still showing ...

htmlcss

Concealed checkbox value in jQuery

I have a problem with setting the hidden checkbox "marketingPhone" to TRUE when the "marketingAAA" checkbox is checked as true. This part works fine. However, if any other checkbox on the page is set to TRUE, then it also sets "marketingPhone" to TRUE. I ...

javascriptjqueryhtmlcheckbox

Interactive Navigation Bar in JavaScript

Is there a way to create a horizontal menu with an arrow that follows the mouse cursor? I saw this effect on a website (http://cartubank.ge) and I'm curious if anyone has the source code for it? Your help would be greatly appreciated. ...

javascripthtmlcssdhtml

Using Javascript to extract information from the div element

Within my HTML code, I have a total of 4 <div> tags and a corresponding <a> tag for each of these <div> tags. Inside each div tag, there are 2 span tags and an additional a tag. Upon clicking the a tag, I aim to extract the product name ...

javascriptjqueryhtml

Adjust the Dimensions of the Facebook Login Popup Box

Is there a way to alter the width and height of the Login with Facebook popup window? Currently, it shows up as 450x260 px by default, which obscures the login form (see screenshots attached). How can I resize this popup window? The default size of the Po ...

phphtmlcssfacebook

Display interactive content according to radio button selection

I have 4 boxes, labeled a,b,c,d. When the user selects box a, specific content should be loaded: If image a is picked, load content 1 If image b is picked, load content 2 If image c is picked, load content 3 If image d is picked, load content 4 I want ...

javascriptjqueryhtmlcss

Still Facing the 'appendChild' Error Even After Defining it

Looking for assistance in creating new elements to display information on a Discord bot list I'm currently developing. var btn = document.createElement("BUTTON"); btn.innerHTML = "Try It"; document.body.appendChild(btn); ...

javascripthtmljsonnullappendchild

Why should we bother with adding additional div elements?

Can you identify the distinctions between these two pieces of code? How does it impact the structure if we add another nested div within the first one? <div class="blah"> <div class="blahInner> <img src="pony.jpg"> < ...

htmlcss