CODEWITHSUNDEEP
javascripthtmljqueryajaxforms
Virginus Alajekwu
Virginus Alajekwu

Reputation: 241

How to submit form without the page reloading

I have this form

<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>

and I have this script

  <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>

I want to submit the form without the page reloading but isn't working for me.

Upvotes: 0

Views: 74

Answers (3)

Bathri Nathan
Bathri Nathan

Reputation: 1267

See this check function to stop page reloding

As you have requested I have given the full code

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>

Upvotes: 0

Ahmed Amir
Ahmed Amir

Reputation: 124

<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 );
       }
      });

    })

Upvotes: 0

DedaDev
DedaDev

Reputation: 5249

Your function takes event property, on which you can invoke 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);
    }
}

Upvotes: 1

Related Questions