ajax form submit без ошибки обновления

Question

У меня есть форма в AJAX, но когда у меня есть несколько форм на одной странице, появляется ошибка.

<script> 
    var fmx = jQuery.noConflict(); 
    fmx(document).ready(function(){ 
    fmx('form').on('submit', function (e) { 
     e.preventDefault(); 
     fmx.ajax({ 
     type: 'post', 
     url: 'https://www.webshop.com/post.php', 
     data: fmx('form').serialize(), 
     success: function() { 
      document.getElementById('#form_post').style.display = 'none'; 
      document.getElementById('#form_result').style.display = ''; 
     } 
     }); 
    }); 
    }); 
</script> 
<div id="#form_post" style="display:inherit"> 
<form class="form_post"> 
    <label for="post_email">FORM</label> 
    <input id="post_email" class="post_email" type="email" name="post_email" placeholder="your@email.com" required> 
    <input id="post_data" class="post_data" type="text" name="post_data" placeholder="MSG" required> 
    <input name="submit" type="submit" value="POST" > 
</form> 
</div> 
<div id="#form_result" style="display:none"><br>Success.</div> 

Я попытался переключиться на #id, но он перестал работать.

<script> 
    var fmx = jQuery.noConflict(); 
    fmx(document).ready(function(){ 
    fmx('#form').on('submit', function (e) { 
     e.preventDefault(); 
     fmx.ajax({ 
     type: 'post', 
     url: 'https://www.webshop.com/post.php', 
     data: fmx('#form').serialize(), 
     success: function() { 
      document.getElementById('#form_post').style.display = 'none'; 
      document.getElementById('#form_result').style.display = ''; 
     } 
     }); 
    }); 
    }); 
</script> 
<form class="form_post" id="form"> 

Как делать положить ID в этой форме?

Answer 1

Первый метод будет реализовывать слушатель во всех формах, найденных на странице.

$('form').on('submit',function(){ 

    // All forms targeted 

}) 

Второй способ, вероятно, не работает, потому что на странице существует конфликт ID.

ID уникальны и могут использоваться только один раз в HTML. Второй блок кода правильно нацеливается на требуемый HTML-код, и код ищет форму с идентификатором «#form».

Эта форма существует, и идентификатор действительно #form, так что, как утверждается, должен быть конфликт.

Answer 2

var fmx = jQuery.noConflict(); 
fmx(document).ready(function() { 
    fmx('form').on('submit', function(e) { 
    e.preventDefault(); 
    var form = this; 
    fmx.ajax({ 
     type: 'post', 
     url: 'https://www.webshop.com/post.php', 
     data: fmx(form).serialize(), 
     success: function() { 
     form.style.display = 'none'; 
     form.style.display = ''; 
     } 
    }); 
    }); 
}); 

Это может быть в состоянии работать с несколькими формами на странице, манипулируя форму, которая была представлена ​​с использованием this, что мы устанавливаем в form.

Как все заявили, вы не можете использовать идентификатор более одного раза в HTML, иначе он не однозначно идентифицирует элемент, который он имеет. Поэтому, если вы хотите нацелиться на два или более появления чего-то, вам нужно использовать класс вместо этого.

Если вы можете обернуть голову тем фактом, что у вас есть доступ к объекту DOM (через this), который вызвал событие (в этом случае вы отправили одну из ваших форм), вы можете использовать его в сценарий.

Помните, что при изменении областей действия (например, в функции обратного вызова success) this будет ссылкой на что-то еще. Поэтому вам нужно назначить его, как мы это сделали, с var form = this; в момент отправки формы.