Topic: Display form data

Neil Jobbins pro asked 5 years ago


Hi,I would like to display form data in the same style as when it is input i.e. like a basic md-form input.  Small label being shown above the data.Is there an easy/established way to do this with mdbootstrap or do I need to create the styling myself?Thanks in advance,Neil

Piotr Glejzer staff answered 5 years ago


Hi,
can you check this?
<body> <div class="md-form"> <input type="text" id="firstName" class="form-control"> <label for="firstName" class="form-control-label"> Name </label> </div> <div class="md-form"> <div id="first-name-label" class="form-control">Name </div> </div> <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.min.js"></script> <script> //Add active class to label (can be add in HTML) $('#first-name-label').addClass('active'); //Add disabled to input (also can be add in HTML) $('#first-name-display').prop('disabled', true); // If put name in first input it will be display in another $('#firstName').change(function () { $('#first-name-label').html($(this).val()); }); </script> </body>

Neil Jobbins pro answered 5 years ago


Thanks Piotr, I don't need any inputs on the page.  I want to display data that has already been entered / saved in the app but using the same MDB styling. Thanks, Neil

Piotr Glejzer staff commented 5 years ago

Name

Piotr Glejzer staff answered 5 years ago


Hi Neil, I think it is possible to do with Javascript. I created something for you. You can check it!
  
<body>

 <div class="md-form">
 <input type="text" id="firstName" class="form-control">
 <label for="firstName" class="form-control-label"> Name </label>
 </div>

 <div class="md-form">
 <input type="text" id="first-name-display" class="form-control">
 <label id="first-name-label" for="first-name-display" class="form-control-label">Name </label>
 </div>
 <!-- SCRIPTS -->
 <!-- JQuery -->
 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
 <!-- Bootstrap tooltips -->
 <script type="text/javascript" src="js/popper.min.js"></script>
 <!-- Bootstrap core JavaScript -->
 <script type="text/javascript" src="js/bootstrap.min.js"></script>
 <!-- MDB core JavaScript -->
 <script type="text/javascript" src="js/mdb.min.js"></script>
 <script>
 //Add active class to label (can be add in HTML)
 $('#first-name-label').addClass('active');

 //Add disabled to input (also can be add in HTML)
 $('#first-name-display').prop('disabled', true);

 // If put name in first input it will be display in another
 $('#firstName').change(function () {
 $('#first-name-display').val($(this).val());
 });

 </script>
</body>
 
Best, Piotr

Neil Jobbins pro answered 5 years ago


Hi Piotr, Unfortunately I don't see what I am looking for in that documentation. I have a form with the basic Material Input field for example:
<!-- Material input -->
<div class="md-form">
  <input type="text" id="firstName" class="form-control">
  <label for="firstName" class="form-control-label">First name</label>
</div>
Now I would like to display this data using similar styling. Perhaps something like:
<div class="md-output-form">
  <div class="md-output-textfield">John Doe
  <div class="md-output-label'>First Name
</div>
Is there a way to do this easily?  Should I create this as a custom style? Am I breaking material design guidelines? Thanks in advance

Piotr Glejzer staff answered 5 years ago


Hi,
did you use our label documentation? Here is a link:
Click me
I wish it will help you. If you have any question or It not resolve your problem don't hesitate to ask again. I will try to help you!
Best,
Piotr



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags