Question

我尝试触发表单提交并同时阻止提交。我的意思是：当您选择一个文件时，JS会尝试提交，但也会运行一个阻止该操作的函数（onsubmit）。

这就是我的代码（没有jQuery，只是想让它看起来像php）：

var $form, $file, $files;

$form  = document.querySelector('form#form-1'),
$file  = $form.querySelector('input[type="file"]'),
$files = null;

$file.onchange = function($e){
    $files = $e.target.files;
    $form.submit();
};

$form.onsubmit = function($e){
    $e.preventDefault();
    console.log('Default Prevented');

    // Xhr will go here, if the browser will prevent
    // it from being submitted
};

我知道问题可能是因为我混淆了浏览器并告诉曾经提交然后阻止，但我怎样才能让它按预期工作？我打算在$form.onsubmit函数中插入xhr，该函数应该适用于所需的作业，但它不会，至少只要浏览器提交函数而不阻止它被提交。

Answer 1

不是手动调用onsubmit处理程序，而是将AJAX调用移动到单独的函数中并从两个处理程序中调用它：

$file.onchange = function($e){
    $files = $e.target.files;
    sendForm($form)
};

$form.onsubmit = function($e) {
    $e.preventDefault();
    sendForm($form)
};

function sendForm(form) {
    // Xhr will go here, if the browser will prevent
    // it from being submitted
    console.log('send form with AJAX');
}

UPD。如果你真的真的想要触发事件，你应该使用dispatchEvent方法，因为（感谢@NathanP。指出它）只是调用$form.submit()不会触发它：

$file.onchange = function($e){
    $files = $e.target.files;
    var event = new Event('submit', {
        bubbles: true,
        cancelable: true 
    });
    $form.dispatchEvent(event);
  };

  $form.onsubmit = function() {
      console.log('send form with AJAX');
      return false; // use return false; to prevent event in case of onsubmit handler, and e.preventDefault for addEventListener event handlers
  }

但我会避免触发像这样的原生事件，因为帮助功能的方式来做你需要的是更简单的推理，测试和更可靠的跨浏览器。

JavaScript：提交和预防

1 个答案: