• Home
  • Jobs
  • Courses
  • Questions
  • Teachers
  • For business
  • ES/EN

0

42
Views
Unable to edit input text inside a modal when using introjs

I have a bootstrap modal that includes input text. I've added the input text to introJs steps to highlight it and for the user to be able to input their name etc. But once the input text was highlighted, I'm not able to change its values. Maybe because they are the same modal? Its working if the input text is not on a popup modal.

Here are some sample script.

<div class="modal fade" tabindex="-1" role="dialog" id="addModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal Title</h4>
      </div>

      <form role="form" action="#" method="post" id="createForm">
        <div class="modal-body">
          <div class="form-group">
            <label for="brand_name">Name</label>
            <input type="text" class="form-control" data-step='add_name' id="name" placeholder="Enter Name">
          </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>





const intro = introJs();

intro.setOptions({
  doneLabel: 'Next',
  exitOnOverlayClick: false,
  steps: [
    {
      intro: 'Enter you name',
      element: '#name',
    }
  ]
})
if (RegExp('multipage', 'gi').test(window.location.search)) {

  intro.start().onchange(function(targetElement) {
    if ($(targetElement).attr("data-step") == 'add_name') {
      $("#addModal").modal('show');
    }
  }));
}
about 1 month ago ·

Juan Pablo Isaza

Answer question
Find remote jobs
Loading

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2022 PeakU Inc. All Rights Reserved.