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

问题:

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


回答1:

You can get the value like the following

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

No need for document.getElementById


回答2:

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

回答3:

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

回答4:

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

  • 发表于 2019-01-08 15:24
  • 阅读 ( 337 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除