Пользовательское встроенное сообщение Ajax в форме

Question

Я использую ajax для многих форм, проблема в том, что когда я вхожу в одну из форм, возвращаемое сообщение отображается во всех формах, есть способ избежать этого, чтобы в форме отображалось только сообщениеотправлено, а не в других?

Вот адаптация входного html:

 <!-- FORM 1-->
 <form name="name" action="form.php" method="POST" id="contact1">
 <li class="text-info">Name</li>
 <select name="age">
 <option value="Sam">Sam</option>
 <option value="Mike">Mike</option>
 </select>
 <input type="submit" name="submit" value="namevalue">
 </form>

    <div id="result1"></div>

<!-- FORM 2-->
<form name="likes" action="form.php" method="POST" id="contact2">
<ul>
<li class="text-info">Interests</li>

<input type="checkbox" name="interests[]" value="play_soccer">Play Soccer</input>

<input type="checkbox" name="interests[]" value="play_golf">Play Golf</input>

 <input type="submit" name="submit" value="gamevalue">
 </form>

<div id="result2"></div>

И js для ajax:

<script type="text/javascript">
$(document).ready(function() {
  $("form").submit(function() {
    // Getting the form ID
    var formID = $(this).attr('id');
    var formDetails = $('#'+formID);
    $.ajax({
      type: "POST",
      url: 'form.php',
      data: formDetails.serialize(),
      success: function (data) {
        // Inserting html into the result div
        $('#results1').html(data);
        $('#results2').html(data);


      },

    });
    return false;
  });
});
</script>

Так в form.phpкогда форма отправляется отдельно, каждая форма отправляет сообщение с простым эхом, уведомляя, что оно было обновлено.

Любая помощь приветствуется, спасибо

Answer 1

• Если Вы ничего не измените, чем нужно, просто добавьте приведенное ниже условие с успешным ответом

if(formID=='contact1') $('#results1').html(data); else if(formID=='contact2') $('#results2').html(data);

Answer 2

Использовать атрибут данных

$("form").on("submit", function(event) {
  event.preventDefault()
  const form = $(this);
  const outputElem = $(form.data("output"))
  outputElem.text(form.attr("id"))
  console.log(form.serialize())
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="name" action="form.php" method="POST" id="contact1" data-output="#result1">
  <select name="age">
    <option value="Sam">Sam</option>
    <option value="Mike">Mike</option>
  </select>
  <input type="submit" name="submit" value="namevalue">
</form>
<div id="result1"></div>

<form name="name" action="form.php" method="POST" id="contact2" data-output="#result2">
  <select name="age">
    <option value="Sam">Sam</option>
    <option value="Mike">Mike</option>
  </select>
  <input type="submit" name="submit" value="namevalue">
</form>
<div id="result2"></div>