I have 3 tabs on a page. this tab Switching in Javascript . I have already set first tab is Default Open.. So.. I Click Second Tab is some Text and Submit button..i click the submit button it open the first tab.. i really want to second tab after the submit button.. Please Give me Example for my code. this my code here...
function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click();
body { font-family: Arial; } .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } .tab button:hover { background-color: #ddd; } .tab button.active { background-color: #ccc; } .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; }
<p>Click on the buttons inside the tabbed menu:</p> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> <form method="post"> <input type="submit" value="submit"> </form> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> <form method="post"> <input type="submit" value="submit"> </form> </div>
You can use XMLHttpRequest (Ajax) Request to get data from post form and render data.
window.onload = function() { Array.from(document.querySelectorAll('form')).map(function(form) { form.addEventListener('submit', function(e) { e.preventDefault(); var xhr = new XMLHttpRequest(); var params = "Key1=value1&key2=vakue2"; xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { console.log(xhr.responseText); } else { console.log("Error", xhr.statusText); } } } xhr.open(this.method, this.action, true); xhr.send(params); }); }); };
This is because after submitting form page reloads and tabs back to default first tab.
You can handle/submit the form by ajax to prevent page reload. Something like following.
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
// code for ajax from submission
})
So your full Javascript code should be like following
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
// Prevent Page Loading and Submit From By Ajax
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault(); // prevent default form action
// code for ajax form submission
});
</script>
Because you use buttons of type “submit”, a request will be send when you click on it, by default. I'm not sure what exactly you are trying to achive, but there are two ways:
1: change type “submit” to button of type “button”. (Forms data will not be send).
2: stop submit buttons default behaviour, by adding a eventlistener for form “submit” events and then manually handle the requests and flow of your application. For example:
const form = document.querySelector(“#yourFormID”)
form.addEventListener(“submit”, function(event) {
event.preventDefault(); // this will stop the default behaviour
// your custom functions here
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.