CODEWITHSUNDEEP
jquerybootstrap-modal
al56
al56

Reputation: 37

How to get the value of a textarea field in a modal using jquery?

I have multiple forms that are accessed through modals. Each form has a text area field and a send button. I need to get the value of the current text area field when the send button is clicked. I've tried looping through each form to get the text area value when I alert the value it displays as undefined. Any help with this will be much appreciated.

$(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>

Upvotes: 0

Views: 2430

Answers (3)

Yacin
Yacin

Reputation: 108

This works for me. Get the parent then get the value of the closest textarea. 

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>

Upvotes: 1

jreed
jreed

Reputation: 314

You should have different id's for the textareas and their corresponding buttons:

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

etc...

And then you could find the value of the textarea when its button is clicked using:

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

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42304

The modal is not available at page load. As such, you need to attach the click event to an element that exists on page load (such as .msg_form), and then make use of 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>

Upvotes: 0

Related Questions