如何使用jquery获取模态中textarea字段的值？

时间：2018-02-21 01:44:30

标签： jquery bootstrap-modal

我有多个通过模态访问的表单。每个表单都有一个文本区域字段和一个发送按钮。单击发送按钮时，我需要获取当前文本区域的值。我已经尝试循环遍历每个表单以获取文本区域值，当我提醒它显示为未定义的值。任何帮助都将非常感激。

$(document).ready(function() {
  $('.msg_form').each(function() {
    $(this).find('.sendmsg').click(function() {
      var msg = $(this).find('.msg_home').val();
      alert(msg);
    });
  });
});
.user_badge {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  width: 400px;
}

.modal_message {
  float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="user_badge">
  <h4 class="modal-title">user 1</h4>
  <a href="#" data-toggle="modal" class="modal_message" data-target="#modal_1">Message</a>
</div>

<div id="modal_1" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close home_close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">user 1</h4>
      </div>
      <div class="modal-body">
        <p>
          <form class="msg_form" onsubmit="return false;" role="form">
            <textarea class="msg_home" id="msg_home_1" placeholder="write something nice to user 1"></textarea>
            <button type="button" class="sendmsg" id="sendmsg_1">Send</button>
          </form>
        </p>
      </div>
    </div>
  </div>
</div>

<div class="user_badge">
  <h4 class="modal-title">user 2</h4>
  <a href="#" data-toggle="modal" class="modal_message" data-target="#modal_2">Message</a>
</div>

<div id="modal_2" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close home_close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">user 2</h4>
      </div>
      <div class="modal-body">
        <p>
          <form class="msg_form" onsubmit="return false;" role="form">
            <textarea class="msg_home" id="msg_home_1" placeholder="write something nice to user 2"></textarea>
            <button type="button" class="sendmsg" id="sendmsg_1">Send</button>
          </form>
        </p>
      </div>
    </div>
  </div>
</div>


<div class="user_badge">
  <h4 class="modal-title">user 3</h4>
  <a href="#" data-toggle="modal" class="modal_message" data-target="#modal_3">Message</a>
</div>

<div id="modal_3" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close home_close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">user 3</h4>
      </div>
      <div class="modal-body">
        <p>
          <form class="msg_form" onsubmit="return false;" role="form">
            <textarea class="msg_home" id="msg_home_1" placeholder="write something nice to user 3"></textarea>
            <button type="button" class="sendmsg" id="sendmsg_1">Send</button>
          </form>
        </p>
      </div>
    </div>
  </div>
</div>

3 个答案:

答案 0 :(得分：1)

这对我有用。获取父级然后获取最接近的textarea的值。

＆＃13;
＆＃13; 
This works for me. Get the parent then get the value of the closest textarea.

    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <style>
        .user_badge {
          min-height: 20px;
          padding: 19px;
          margin-bottom: 20px;
          background-color: #f5f5f5;
          border: 1px solid #e3e3e3;
          border-radius: 4px;
          -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
          width: 400px;
        }
    
        .modal_message {
          float: right;
        }
      </style>
    
    </head>
    
    <body>
    
      <div class="user_badge">
        <h4 class="modal-title">user 1</h4>
        <a href="#" data-toggle="modal" class="modal_message" data-target="#modal_1">Message</a>
      </div>
    
      <div id="modal_1" class="modal fade" role="dialog">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close home_close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">user 1</h4>
            </div>
            <div class="modal-body">
              <p>
                <form class="msg_form" onsubmit="return false;" role="form">
                  <textarea class="msg_home" id="msg_home_1" placeholder="write something nice to user 1"></textarea>
                  <button type="button" class="sendmsg" id="sendmsg_1">Send</button>
                </form>
              </p>
            </div>
          </div>
        </div>
      </div>
    
      <div class="user_badge">
        <h4 class="modal-title">user 2</h4>
        <a href="#" data-toggle="modal" class="modal_message" data-target="#modal_2">Message</a>
      </div>
    
      <div id="modal_2" class="modal fade" role="dialog">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close home_close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">user 2</h4>
            </div>
            <div class="modal-body">
              <p>
                <form class="msg_form" onsubmit="return false;" role="form">
                  <textarea class="msg_home" id="msg_home_1" placeholder="write something nice to user 2"></textarea>
                  <button type="button" class="sendmsg" id="sendmsg_1">Send</button>
                </form>
              </p>
            </div>
          </div>
        </div>
      </div>
    
    
      <div class="user_badge">
        <h4 class="modal-title">user 3</h4>
        <a href="#" data-toggle="modal" class="modal_message" data-target="#modal_3">Message</a>
      </div>
    
      <div id="modal_3" class="modal fade" role="dialog">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close home_close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">user 3</h4>
            </div>
            <div class="modal-body">
              <p>
                <form class="msg_form" onsubmit="return false;" role="form">
                  <textarea class="msg_home" id="msg_home_1" placeholder="write something nice to user 3"></textarea>
                  <button type="button" class="sendmsg" id="sendmsg_1">Send</button>
                </form>
              </p>
            </div>
          </div>
        </div>
      </div>
    
      <script>
        $(document).ready(function () {
          jQuery("button#sendmsg_1").click(function () {
            var msg = $(this).parent().children().closest('textarea').val();
            alert(msg);
          });
        });
      </script>
    </body>
    
    </html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

页面加载时无法使用模态。因此，您需要将click事件附加到页面加载时存在的元素（例如.msg_form），然后使用 event delegation ：

$(document).ready(function() {
  $('.msg_form').on('click', $('.sendmsg'), function() {
    var msg = $(this).find('.msg_home').val();
    alert(msg);
  });
});
.user_badge {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  width: 400px;
}

.modal_message {
  float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="user_badge">
  <a href="#" data-toggle="modal" class="modal_message" data-target="#modal_1">Message</a>
</div>

<div id="modal_1" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close home_close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">user 1</h4>
      </div>
      <div class="modal-body">
        <p>
          <form class="msg_form" onsubmit="return false;" role="form">
            <textarea class="msg_home" id="msg_home_1" placeholder="write something nice to user 1"></textarea>
            <button type="button" class="sendmsg" id="sendmsg_1">Send</button>
          </form>
        </p>
      </div>
    </div>
  </div>
</div>

<div class="user_badge">
  <a href="#" data-toggle="modal" class="modal_message" data-target="#modal_2">Message</a>
</div>

<div id="modal_2" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close home_close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">user 2</h4>
      </div>
      <div class="modal-body">
        <p>
          <form class="msg_form" onsubmit="return false;" role="form">
            <textarea class="msg_home" id="msg_home_1" placeholder="write something nice to user 2"></textarea>
            <button type="button" class="sendmsg" id="sendmsg_1">Send</button>
          </form>
        </p>
      </div>
    </div>
  </div>
</div>


<div class="user_badge">
  <a href="#" data-toggle="modal" class="modal_message" data-target="#modal_3">Message</a>
</div>

<div id="modal_3" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close home_close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">user 3</h4>
      </div>
      <div class="modal-body">
        <p>
          <form class="msg_form" onsubmit="return false;" role="form">
            <textarea class="msg_home" id="msg_home_1" placeholder="write something nice to user 3"></textarea>
            <button type="button" class="sendmsg" id="sendmsg_1">Send</button>
          </form>
        </p>
      </div>
    </div>
  </div>
</div>

答案 2 :(得分：0)

你应该为textareas及其相应的按钮设置不同的id：

<textarea class="msg_home" id="msg_home_1" placeholder="write something nice to user 3"></textarea>
<button type="button" class="sendmsg" id="sendmsg_1">Send</button>

<textarea class="msg_home" id="msg_home_2" placeholder="write something nice to user 3"></textarea>
<button type="button" class="sendmsg" id="sendmsg_2">Send</button>

等...

然后你可以在点击按钮时找到textarea的值：

$('.sendmsg').on('click', function() {
    // get number at the end of button id
    var n = substr($(this).attr('id'), -1);
    // use that number to find textarea id
    var msg = $('#msg_home_'+n).val();
    alert(msg);
});
相关问题
最新问题