Display form data

Topic: Display form data

Neil Jobbins pro asked 6 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

Add comment

Piotr Glejzer staff answered 6 years ago

0 0 Best answer

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

Add comment

Neil Jobbins pro answered 6 years ago

0 0 Best answer

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

Add comment

Piotr Glejzer staff answered 6 years ago

0 0 Best answer

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

Add comment

Neil Jobbins pro answered 6 years ago

0 0 Best answer

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 6 years ago

Name

Add comment

Piotr Glejzer staff answered 6 years ago

0 0 Best answer

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>   <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>  <script type="text/javascript" src="js/popper.min.js"></script>  <script type="text/javascript" src="js/bootstrap.min.js"></script>  <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>

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

About author

Neil Jobbins

Pro User

75Support score
4Questions 6Answers

1Snippets likes 2Snippets