Question

我有这张表格

<form action="" method="post" enctype="multipart/form-data" onsubmit="submit()">
<input id="name" class="btn" type="file" name="pic" multiple>
<br/><br/>
<button class="btn btn-primary" type="submit" id="submit" name="submit">UPLOAD</button>
</form>
<br/><br/>

Uploaded file: <a target="blank" href="<?php echo $fileurl;?>"><?php echo $fileurl;?></a>

我有这个脚本

  <script>
function submit(event) {
    event.preventDefault()
    var http = new XMLHttpRequest();
    http.open("POST", "", true);
    http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    var params = "search=" + <<get search value>>; // probably use document.getElementById(...).value
    http.send(params);
    http.onload = function() {
        alert(http.responseText);
    }
}
</script>

我想提交表单而不重新加载页面，但对我不起作用。

Answer 1

您的函数具有event属性，可以在其上调用preventDefault()

function submit(event) {
    event.preventDefault()
    var http = new XMLHttpRequest();
    http.open("POST", "", true);
    http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    var params = "search=" + <<get search value>>; // probably use document.getElementById(...).value
    http.send(params);
    http.onload = function() {
        alert(http.responseText);
    }
}

Answer 2

查看此检查功能以停止页面切换

根据您的要求，我提供了完整的代码

function check(event) {
    event.preventDefault();
    console.log("stopped form submit");
}

<form onSubmit="check(event)">
<input id="name" class="btn" type="file" name="pic" multiple>
<br/><br/>
<button class="btn btn-primary" type="submit" id="submit" name="submit">UPLOAD</button>
</form>
<br/><br/>
</form>

Answer 3

<script>
      $('#yourFormData').submit(function(e){
        e.preventDefault();

      var formData = new FormData($('#yourFormData')[0]);
      url ="your route" ;
      $.ajax({
      url : url,
      type : "post",
      data : formData,
      contentType:false,
      processData:false,

      success : function(data)
      {
          // success 


      },
      error :  function(y)
      {

        console.log(error );
       }
      });

    })

如何在不重新加载页面的情况下提交表单

3 个答案: