I have a modal and inside my modal is an input[type]. And I want to set default value and that default value is from a data-attribute of a button..

Here is my code:

 <input type="text" class="form-control" name="ID" id="ID" placeholder="Enter ID number"/>
                <button id="confirmation" type="button" class="btn btn-primary" data-toggle="modal" data-target="#confirm">Submit</button>

and this:

document.getElementById("ID").onmouseover = function() {
    var id=document.getElementById("ID").value;

    $('#confirmation').attr('data-id' , id); 

    return false;
};

$('#confirm').on('show.bs.modal', function (event)  {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var id = button.data('id') // Extract info from data-* attributes
    var modal = $(this)
    modal.find('.modal-body #IDN').val(id);
});

I can set the data-attribute of the button but the problem is if I change the value in the input textfield. The data-attribute doesn't change. How am I going to fix?

I have a modal and inside my modal is an input[type]. And I want to set default value and that default value is from a data-attribute of a button..

Here is my code:

 <input type="text" class="form-control" name="ID" id="ID" placeholder="Enter ID number"/>
                <button id="confirmation" type="button" class="btn btn-primary" data-toggle="modal" data-target="#confirm">Submit</button>

and this:

document.getElementById("ID").onmouseover = function() {
    var id=document.getElementById("ID").value;

    $('#confirmation').attr('data-id' , id); 

    return false;
};

$('#confirm').on('show.bs.modal', function (event)  {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var id = button.data('id') // Extract info from data-* attributes
    var modal = $(this)
    modal.find('.modal-body #IDN').val(id);
});

I can set the data-attribute of the button but the problem is if I change the value in the input textfield. The data-attribute doesn't change. How am I going to fix?

• javascript
• jquery
• html
• bootstrap-modal
• custom-data-attribute

2 Answers 2

Use jQuery change() event handler

$('#ID').change(function() {
  $('#confirmation').data('id', this.value);
  console.log($('#confirmation').data('id'));
}).change();

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="form-control" name="ID" id="ID" placeholder="Enter ID number" />
<button id="confirmation" type="button" class="btn btn-primary" data-toggle="modal" data-target="#confirm">Submit</button>

or use keypress() event

$('#ID').keypress(function() {
  $('#confirmation').data('id', this.value);
  console.log($('#confirmation').data('id'));
}).change();

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="form-control" name="ID" id="ID" placeholder="Enter ID number" />
<button id="confirmation" type="button" class="btn btn-primary" data-toggle="modal" data-target="#confirm">Submit</button>

How about using blur

$('#ID').blur(function() {
  $('#confirmation').data('id', this.value);

});