I have problem regarding getting the value in input textbox, this textbox was in modal form. I'm confuse when i put static value in input textbox the value is not empty, however when i use the element id value i can't get any value and the alert shows empty.

Modal:

<form action=""  method="post" enctype="multipart/form-data">
  <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">New Menu Section</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row">
          <div class="col-md-6">
            <label>Menu Name</label>
            <input placeholder="For sharing..." name="menu_name_category" value="" class="form-control" id="menu_value" type="text" class="validate">
          </div>
        </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="save_menu_button">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</form>

Javascript & Jquery:

var textFieldVal = document.getElementById("menu_value").value;

$('#save_menu_button').click(function() {
   alert(textFieldVal);
});

I have problem regarding getting the value in input textbox, this textbox was in modal form. I'm confuse when i put static value in input textbox the value is not empty, however when i use the element id value i can't get any value and the alert shows empty.

Modal:

<form action=""  method="post" enctype="multipart/form-data">
  <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">New Menu Section</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row">
          <div class="col-md-6">
            <label>Menu Name</label>
            <input placeholder="For sharing..." name="menu_name_category" value="" class="form-control" id="menu_value" type="text" class="validate">
          </div>
        </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="save_menu_button">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</form>

Javascript & Jquery:

var textFieldVal = document.getElementById("menu_value").value;

$('#save_menu_button').click(function() {
   alert(textFieldVal);
});

• javascript
• jquery
• bootstrap-modal

• You can see what the problem is by doing a debugging "dry-run". 1) open page 2) get value 3) open dialog 4) enter value in input 5) click button and show value from 2. Clearly you're getting the value before the input is even being shown and not updating it when clicking the button. – fdomn-m Commented Jan 7, 2019 at 9:11
• variable out of scope – Atal Shrivastava Commented Jan 7, 2019 at 9:16

5 Answers 5

For any one that might still need this, I found one correct answer at https://www.youtube./watch?v=8zTL1LMxBqc

Using JQuery, you just need to add the Modal ID to to the selector as below:

var textFieldVal = $("#exampleModalLongTitle #menu_value").val();

You can get the value like the following

$('#save_menu_button').click(function(){
   alert($('#menu_value').val());
});

No need for document.getElementById

What happen here is you're getting value of your text field while loading and using that value in your click function.

Update your code as below. Only get element in object and use textFieldVal.value. It will solve your issue.

var textFieldVal = document.getElementById("menu_value");
$('#save_menu_button').click(function(){
   alert(textFieldVal.value);
   // With jQuery try like below.
   // alert($('#menu_value').val());
});

The issue is that you're getting the input DOM value when the document is ready.

You should get the text input value when the click event handler is triggered.

$('#save_menu_button').click(function(){
   var textFieldVal = $("#menu_value").val();
   alert(textFieldVal);
});

change your script

$('#save_menu_button').click(function(){
var textFieldVal = document.getElementById("menu_value").value;
   alert(textFieldVal);
});

the data was set when your html was set .. that why it alert empty ... if you put it inside the click function ... it get data when you click ...