How to Open New Content/Code in the Same Tab and Page

Question

I have a single page with multipul tabs.
I want that if user clicks on the "Home" tab it will give him a password form, and after he write the password (1234) it will take him to another page (Located in another location) or to another code (it can be hidden in the same single page) but in the Same TAB.

I try to use that following code:

The Form is:

            <div class="">
<h4 class="form-title my-5 pb-1">C</h4>
<form class="mb-3" method="post" data-request="accountLogin::onSignIn" name="login">
    <div class="js-error-message alert alert-danger d-none" aria-live="polite"></div>
    <input type="hidden" name="redirect" value="/account">


    <div class="form-group">
        <input type="password" class="form-control" name="pswrd" id="login-password" placeholder="Password" autocomplete="current-password" required="">
        <label for="login-password" class="">Password</label>
        <span role="button" class="password-visibility js-toggle-password-visible" title="Show password" aria-label="Show password" data-hidden-icon="mdi mdi-eye-off" data-shown-icon="mdi mdi-eye" data-hidden-text="Show password" data-shown-text="Hide password">
            <i class="icon mdi" aria-hidden="true"></i>
        </span>

        <div class="alert alert-warning mt-3 js-password-space-warning d-none">You have entered backspace in password</div>
    </div>

    <div class="form-group mt-5 d-flex align-items-center justify-content-between">

        <button type="submit" onclick="check(this.form)" value="Login" class="js-submit-button btn btn-primary">
            Login
        </button>
    </div>
</form>

Here's the Whole code:

* {box-sizing: border-box}

/* Set height of body and the document to 100% */
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}

/* Style tab links */
.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}

.tablink:hover {
  background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
}

#Home {background-color: red;}
#News {background-color: green;}
#Contact {background-color: blue;}
#About {background-color: orange;}

<button class="tablink" onclick="openPage('Home', this, 'red')" id="defaultOpen">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">About</button>

<div id="Home" class="tabcontent">
  <h3>Home</h3>
  <p>Home is where the heart is..</p>
  
                <div class="">
    <h4 class="form-title my-5 pb-1">C</h4>
    <form class="mb-3" method="post" data-request="accountLogin::onSignIn" name="login">
        <div class="js-error-message alert alert-danger d-none" aria-live="polite"></div>
        <input type="hidden" name="redirect" value="/account">

 
        <div class="form-group">
            <input type="password" class="form-control" name="pswrd" id="login-password" placeholder="Password" autocomplete="current-password" required="">
            <label for="login-password" class="">Password</label>
            <span role="button" class="password-visibility js-toggle-password-visible" title="Show password" aria-label="Show password" data-hidden-icon="mdi mdi-eye-off" data-shown-icon="mdi mdi-eye" data-hidden-text="Show password" data-shown-text="Hide password">
                <i class="icon mdi" aria-hidden="true"></i>
            </span>

            <div class="alert alert-warning mt-3 js-password-space-warning d-none">You have entered backspace in password</div>
        </div>

        <div class="form-group mt-5 d-flex align-items-center justify-content-between">
   
            <button type="submit" onclick="check(this.form)" value="Login" class="js-submit-button btn btn-primary">
                Login
            </button>
        </div>
    </form>
 
 <script language="javascript">
function check(form)/*function to check userid & password*/
{
 /*the following code checkes whether the entered userid and password are matching*/
 if(form.pswrd.value == "1234")
  {
 
 document.write("sales/index.html");
  }
 else
 {
   alert("Wrong password. Try again")/*displays error message*/
  }
}
</script>
</div>

</div>

<div id="News" class="tabcontent">
  <h3>News</h3>
  <p>Some news this fine day!</p> 
</div>

<div id="Contact" class="tabcontent">
  <h3>Contact</h3>
  <p>Get in touch, or swing by for a cup of coffee.</p>
</div>

<div id="About" class="tabcontent">
  <h3>About</h3>
  <p>Who we are and what we do.</p>
</div>

<script>
function openPage(pageName,elmnt,color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(pageName).style.display = "block";
  elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

Which Supposed to put data insidethe same tab and page.

But all i got is a new page opened with the words "sales/index.html"

I'v checked numerous SOF topics but didnt got final answer.

Again, i want to open new content in the same tab, after entering a password.

Answer 1

document.write("sales/index.html"); just writes to the browser what it sees.

To get the data from sales/index.html, you have to use fetch (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)

Then take the data returned and write that to the page. It is not recommended to use document.write. Instead add a placeholder <div id="some_id">...</div> and then write the content to that div

** NOTE ** your submit button also has to return false or it will cause the page to refresh on submit of the form. So like <button type="submit" onclick="check(this.form); return false;" value="Login" class="js-submit-button btn btn-primary">

Fetch is a little tricky to use if you're new to it. (Optionally you can use jQuery get https://api.jquery.com/jquery.get/) However, fetch is worth learning.

Something like:

fetch('sales/index.html').then(function(response) {
    return response.text();
}).then(function(content) {
    console.log(content);
}).catch(function(err) {
   console.log('Fetch Error', err);
});

Full Code

* {box-sizing: border-box}

/* Set height of body and the document to 100% */
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}

/* Style tab links */
.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}

.tablink:hover {
  background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
}

#Home {background-color: red;}
#News {background-color: green;}
#Contact {background-color: blue;}
#About {background-color: orange;}

<button class="tablink" onclick="openPage('Home', this, 'red')" id="defaultOpen">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">About</button>

<div id="Home" class="tabcontent">
  <h3>Home</h3>
  <p>Home is where the heart is..</p>
  
                <div class="">
    <h4 class="form-title my-5 pb-1">C</h4>
    <form class="mb-3" method="post" data-request="accountLogin::onSignIn" name="login">
        <div class="js-error-message alert alert-danger d-none" aria-live="polite"></div>
        <input type="hidden" name="redirect" value="/account">

 
        <div class="form-group">
            <input type="password" class="form-control" name="pswrd" id="login-password" placeholder="Password" autocomplete="current-password" required="">
            <label for="login-password" class="">Password</label>
            <span role="button" class="password-visibility js-toggle-password-visible" title="Show password" aria-label="Show password" data-hidden-icon="mdi mdi-eye-off" data-shown-icon="mdi mdi-eye" data-hidden-text="Show password" data-shown-text="Hide password">
                <i class="icon mdi" aria-hidden="true"></i>
            </span>

            <div class="alert alert-warning mt-3 js-password-space-warning d-none">You have entered backspace in password</div>
        </div>

        <div class="form-group mt-5 d-flex align-items-center justify-content-between">
   
            <button type="submit" onclick="check(this.form); return false;" value="Login" class="js-submit-button btn btn-primary">
                Login
            </button>
        </div>
    </form>
 
 <script language="javascript">
function check(form)/*function to check userid & password*/
{
 /*the following code checkes whether the entered userid and password are matching*/
 if(form.pswrd.value == "1234")
  {

    var frmselector = document.querySelector('form.mb-3');
    
    fetch('sales/index.html').then(function(response) {
        return response.text();
    }).then(function(content) {
        console.log(content);
        frmselector.innerHTML = content;
    }).catch(function(err) {
       console.log('Fetch Error', err);
        frmselector.innerHTML = 'There was an error: ' + err;
    });

  }
 else
 {
   alert("Wrong password. Try again")/*displays error message*/
  }
}
</script>
</div>

</div>

<div id="News" class="tabcontent">
  <h3>News</h3>
  <p>Some news this fine day!</p> 
</div>

<div id="Contact" class="tabcontent">
  <h3>Contact</h3>
  <p>Get in touch, or swing by for a cup of coffee.</p>
</div>

<div id="About" class="tabcontent">
  <h3>About</h3>
  <p>Who we are and what we do.</p>
</div>

<script>
function openPage(pageName,elmnt,color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(pageName).style.display = "block";
  elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>