0

I'm creating a leave system and I've linked the database with Asp.net. Inside the mvc project there's an HTML page that I use as my landing page, it has 2 buttons. One button for 'Admin' and other for 'Staff'. I want to hide some of the text-boxes if the 'Staff' button is clicked. How do I go about achieving this?

Sakhile
  • 1

2 Answers2

1

I have created sample html, you can use jquery to show and hide your textbox based on click if you are using mvc then your textbox is @Html.TextBox or with asp.net set ClientIDMode="Static" - check here

<html>
<head>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<input type="text" id="AdminTxt" />
<button id="showAdmin">Show Admin</button>
<button id="showStaff">Show Staff</button>

<script>
$( "#showAdmin" ).click(function() {
 $("#AdminTxt").show();
});
$( "#showStaff" ).click(function() {
 $("#AdminTxt").hide();
});

</script>

</body>
</html>
Mustufa
  • 116
  • 4
  • the textboxes I want to hide are in a view, tried the code but didn't work – Sakhile Apr 12 '19 at 07:01
  • My code had @Html.EditorFor(model => model.Admin_Remark) I removed the .EditorFor part and its working – Sakhile Apr 12 '19 at 07:28
  • @Html.TextBoxFor(model => model.Admin_Remark, new { hidden = "hidden" }) this is my new code – Sakhile Apr 12 '19 at 07:28
  • if you want to hide dynamically then use $("#Admin_Remark").hide(); OR you can use @Html.EditorFor(model => model.Admin_Remark, new { id = ''idthis" }) $("#idthis").hide(); – Mustufa Apr 12 '19 at 11:32
  • if you are using model => model.propertyname than propertyname become id of your text box – Mustufa Apr 12 '19 at 11:33
0

You can use the attach en detach functions with JQuery. So if you have a button called Admin

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>detach demo</title>
  <style>
  p {
    background: yellow;
    margin: 6px 0;
  }
  p.off {
    background: black;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>Hello</p>
how are
<p>you?</p>
<button>Attach/detach paragraphs</button>

<script>
$( "p" ).click(function() {
  $( this ).toggleClass( "off" );
});
var p;
$( "button" ).click(function() {
  if ( p ) {
    p.appendTo( "body" );
    p = null;
  } else {
    p = $( "p" ).detach();
  }
});
</script>

</body>
</html>
Dimitri
  • 1,185
  • 2
  • 15
  • 37
  • the textboxes I want to hide are in a view, tried the code but didn't work – Sakhile Apr 12 '19 at 07:10
  • What did you try, show us please. This code is valid and working, if you use razor tags (@Html...) you can use the ID property to have the same behavior. – Dimitri Apr 12 '19 at 07:12