Блог

У меня есть небольшая форма, которую я хочу отправить с помощью XMLHttpRequest.

Я попробовал с onsubmit, все в порядке, и сработало (прокомментировано в коде ниже):

 <div class='form-box'>
    <form id="send_frm" method="post" action="" >
        <div class='msg-box'>
            <textarea name="ssmsg" maxlength="500"></textarea>
        </div>
        <div class='btn-box'>
            <input class="sub-btn" name="save" type="submit" value="Mentés"/>
        </div>
    </form>
</div>
<script type="text/javascript">
    var ajaxObj = new XMLHttpRequest();
    var form = document.forms[0];
    form.addEventListener(
            "submit",
            ajaxer
        );

//    form.onsubmit = function()  /* works fine! :) */
//            {
//                return ajaxer();
//            };

    function ajaxer()
    {
        ajaxObj.onreadystatechange = 
            function()
            {
                if( this.readyState == 4 amp;amp; this.status == 200 )
                {
                    console.log(ajaxObj);
                }
            }
        ajaxObj.open("POST", "<?php echo BASE_URL; ?>app/controls/msg_handler.php", true);
        ajaxObj.send('data=whatever');
        return false;
    }
</script>
  

Но с addEventListener это не сработало, как с onsubmit.

Пожалуйста, объясните почему. Действительно спасибо за помощь.

оператор возврата не принимается слушателем, поэтому сделайте с event.preventDefault() методом, чтобы предотвратить перезагрузку формы

Вот почему этот метод работает

  form.onsubmit = function() 
            {
                return ajaxer(); // function return false so code break the execution
            };
  

Проблема

 var ajaxObj = new XMLHttpRequest();
var form = document.forms[0];
form.addEventListener(
  "submit",
   ajaxer
);


function ajaxer(e) {
  console.log('sss');
  return false;
}  

 <div class='form-box'>
  <form id="send_frm" method="post" action="">
    <div class='msg-box'>
      <textarea name="ssmsg" maxlength="500"></textarea>
    </div>
    <div class='btn-box'>
      <input class="sub-btn" name="save" type="submit" value="Mentés" />
    </div>
  </form>
</div>  

Решение

 var ajaxObj = new XMLHttpRequest();
var form = document.forms[0];
form.addEventListener(
  "submit",
   ajaxer
);


function ajaxer(e) {
  console.log('sss');
  e.preventDefault();
}  

 <div class='form-box'>
  <form id="send_frm" method="post" action="">
    <div class='msg-box'>
      <textarea name="ssmsg" maxlength="500"></textarea>
    </div>
    <div class='btn-box'>
      <input class="sub-btn" name="save" type="submit" value="Mentés" />
    </div>
  </form>
</div>