Jquery получить проблемы с формой

Question

Я застрял в следующем коде: он в основном берет данные из списка форм и сохраняет сообщение в моей базе данных. Это работает только с первой формой, и это потому, что я установил

var text = $("#msg1").val();
var resultid = $("#resultid1").val();

Чтобы прочитать только одно поле идентификатора, это я понимаю. У меня вопрос, как я могу изменить этот код, чтобы правильно читать все три формы, а не только первую?

$(document).ready(function() {
  $("[id^=submit]").click(function() {
    var text = $("#msg1").val();
    var resultid = $("#resultid1").val();
    if (text == '') {
      alert("The message field is empty");
    } else
      alert('posted: ' + text);
  });
});

Form 1
<form id='replyform1'>
  <textarea id='msg1'></textarea>
  <input type='hidden' name='resultid1' id='resultid1' value='1234' />
  <input type="button" id="submit1" value="Post" class='MenuButton' />
</form>

Form 2
<form id='replyform2'>
  <textarea id='msg2'></textarea>
  <input type='hidden' name='resultid2' id='resultid2' value='12345' />
  <input type="button" id="submit2" value="Post" class='MenuButton' />
</form>

Form 3
<form id='replyform3'>
  <textarea id='msg3'></textarea>
  <input type='hidden' name='resultid3' id='resultid3' value='123456' />
  <input type="button" id="submit3" value="Post" class='MenuButton' />
</form>

Answer 1

Вы можете использовать $ (this) для ссылки на элемент кнопки, по которому щелкнули, затем использовать братьев и сестер, чтобы найти нужный элемент относительно этой кнопки.

$("[id^=submit]").click(function() {
  var text = $(this).siblings('textarea').first().val();
  var resultid = $(this).siblings('.result').first().val();
  if (text == '') {
    alert("The message field is empty");
  } else {
    alert('posted: ' + text + ", resid: " + resultid);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Form 1
<form id='replyform1'>
  <textarea id='msg1'></textarea>
  <input type='hidden' name='resultid1' id='resultid1' value='1234' class="result" />
  <input type="button" id="submit1" value="Post" class='MenuButton' />
</form>

Form 2
<form id='replyform2'>
  <textarea id='msg2'></textarea>
  <input type='hidden' name='resultid2' id='resultid2' value='12345' class="result"/>
  <input type="button" id="submit2" value="Post" class='MenuButton' />
</form>

Form 3
<form id='replyform3'>
  <textarea id='msg3'></textarea>
  <input type='hidden' name='resultid3' id='resultid3' value='123456' class="result"/>
  <input type="button" id="submit3" value="Post" class='MenuButton' />
</form>