i have a problem with submitting a form and also change tab like
<ul class="nav nav-tabs">
<li><a href="#tab1" data-toggle="tab">Enter Your Personal Details </a></li>
<li><a href="#tab2" data-toggle="tab">Enter Your company Details </a></li>
</ul>
<div class="tab-content">
<div class="tab pane" id="tab1">
<form method="post" action="self.php">
<input type="text">
<input type= "submit" value="save">
</div>
<div class="tab pane" id="tab2">
<h3>Thank you for submitting your form check your email</h3>
<h2>Now input your company info</h2>
</div>
</div>
if click submit button then appear tab2
The thing is, to submit a form the regular way, a page load is needed. To get around this, I think you have two options:
Make all the tabs one single form by simply wrapping the tab divs with the form. If you do this, you will have to wait until all of the fields in all tabs are filled out, and then handle the form submission.
Use AJAX to send the form data through JavaScript/jQuery. This might be a little hard if you have no experience with AJAX, but look here to get yourself started.
Either way, note that <input type="submit">
by standard sends the form when clicked. If you just want the button look and want to get around this behaviour, use <button id="tab1-button">Save</button>
instead. For the purpose of the example below, let's say you switch to the <button>
element and give it the above id, you should proceed with the JavaScript/jQuery part of this.
$('#tab1-button').click(function (e) {
e.preventDefault(); //This prevents the default behaviour or #tab1-button, in case you still use a input type="submit"
/* In case you want to use ajax, it should go here */
$('#tab2').tab('show'); //Switching tab
});