CODEWITHSUNDEEP
javascriptjquerybootstrap-modal
DevGe
DevGe

Reputation: 1449

Why I can't get the value of input in modal (Using Jquery & Javascript)

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);
});

Captured

Upvotes: 3

Views: 11735

Answers (5)

ChimeObioha
ChimeObioha

Reputation: 61

For any one that might still need this, I found one correct answer at https://www.youtube.com/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();

Upvotes: 6

Masih Ansari
Masih Ansari

Reputation: 487

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 ...

Upvotes: 0

Ozan Gunceler
Ozan Gunceler

Reputation: 1067

You can get the value like the following

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

No need for document.getElementById

Upvotes: 4

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48357

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);
});

Upvotes: 1

Karan
Karan

Reputation: 12619

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());
});

Upvotes: 2

Related Questions