Digger Digger - 18 days ago 6
ASP.NET (C#) Question

Javascript could show hidden div

What needed to achieve is by clicking the preview button (asp button, which calls another function), the hidden preview section shows. But it didn't work by the below codes... not sure what I missed. I looked through many answers here, but very strangely, none of them worked. It would be much appreciated if you can provide some thoughts / solution on this.

in the .aspx

<style>
#PreviewSection {display:none;}

</style>


in the script, (edited to point to btPreview, but still not working... )

<script type="text/javascript">

var previewbt = document.getElementById('btPreview');
previewbt.addEventListener('click',function(){
PreviewSection.style.display = "block";
})

</script>


the html:

<div class ="container" id="InputSection">
<table class="table">
<tbody>
<tr>
<td style="width:60%">
<p>The Question</p>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
<asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
</td>
</tr>
</tbody>
</table>

<asp:Button ID="btPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click"/>

</div>

<hr />

<div class="container" id="PreviewSection">
<h3> The preview of the content.</h3>
<table class="table">
<tbody>
<tr>
<td>

Question: <asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label><br />

</td>
</tr>
</tbody>
</table>
<asp:Button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="BtSubmit_Click" />
</div>

</asp:Content>

Answer

Probably this is what you want:

Edited to add your modification after my first post.

var BtPreview = document.getElementById('BtPreview');
BtPreview.addEventListener('click', function() {
  PreviewSection.style.display = "block";
})

var BtSubmit = document.getElementById('BtSubmit');
BtSubmit.addEventListener('click', function() {
  PreviewSection.style.display = "none";
  InputSection.style.display = "none";
})

var btPreview_Click = function() {
  console.log('Do something else for Preview.');
};

var btSubmit_Click = function() {
  console.log('Do something else for Submit.');
};
#PreviewSection {
   display: none;
 }
<div class="container" id="InputSection">
  <table class="table">
    <tbody>
      <tr>
        <td style="width:60%">
          <p>The Question</p>
          <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
          <asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
        </td>
      </tr>
    </tbody>
  </table>

  <button ID="BtPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click()">Button Preview</button>

</div>

<hr />

<div class="container" id="PreviewSection">
  <h3> The preview of the content.</h3>
  <table class="table">
    <tbody>
      <tr>
        <td>
          Question:
          <asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label>
          <br />

        </td>
      </tr>
    </tbody>
  </table>
  <button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="btSubmit_Click()">Button Submit</button>
</div>

This will be the solution for ASP:

<div class="container" id="InputSection">
  <table class="table">
    <tbody>
      <tr>
        <td style="width:60%">
          <p>The Question</p>
          <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
          <asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
        </td>
      </tr>
    </tbody>
  </table>

  <asp:Button ID="BtPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click()"/>
</div>

<hr />

<div class="container" id="PreviewSection">
  <h3> The preview of the content.</h3>
  <table class="table">
    <tbody>
      <tr>
        <td>
          Question:
          <asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label>
          <br />

        </td>
      </tr>
    </tbody>
  </table>
  <asp:Button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="btSubmit_Click()" />
</div>
Comments