CODEWITHSUNDEEP
javascriptjqueryhtml
Bogdan Bibina
Bogdan Bibina

Reputation: 120

Submit a form with a file without refresh

Hello guys i don't know to submit a form without page refresh. This is my code:

My form:

    <form method="POST" id="post123" action="" enctype="multipart/form-data">
    <input class="form-control input-lg" name="book_name" id="inputLarge" type="text">

     <input class="form-control" name="book_price" type="number">

     <textarea class="form-control" id="exampleTextarea2" 
name="book_description" maxlength="100" rows="7"></textarea>

    <textarea class="form-control" name="book_content"  id="exampleTextarea4" maxlength="200" rows="7"></textarea>

    <input type="file" name="file" id="imgInp44" >

   <button type="submit" name='action' id="sendbutton21" value="post1" class="btn btn-primary">
                            Submit
                        </button>


    </form>

Javascript:

$("#sendbutton21").click(function() {

    var url = "http://localhost:5000/magazin_insert"; // the script where you handle the form input.

    $.ajax({
           type: "POST",
           url: url,
           data: $("#post123").serialize(), // serializes the form's elements.
           success: function(data)
           {

               alert(data); // show response from the php script.
           }
         });

    return false; // avoid to execute the actual submit of the form.
});

How i can modify my code to submit along with text a file towards the mysql db?

Upvotes: 1

Views: 4646

Answers (4)

gaetanoM
gaetanoM

Reputation: 42054

Your first issue is in this line:

<button type="submit" name="action" ... />

You have two possibilities:

  • change type="submit" to type="button"
  • use event.preventDefault() in your $("#sendbutton21").click(function() {

After, your ajax call can be changed in order to include the file:

var form = document.getElementById('post123');
var formData = new FormData(form);
$.ajax({
     url: url,
     data: formData,
     type: 'POST',
     processData: false,
     success: function(data) {
         alert(data);
     }
});


$("#sendbutton21").click(function() {
    var url = "http://localhost:5000/magazin_insert"; // the script where you handle the form input.

    // for testing...
    url = 'https://api.github.com/repositories';

    var form = document.getElementById('post123');
    var formData = new FormData(form);
    $.ajax({
        url: url,
        data: formData,
        type: 'GET',
        processData: false,
        success: function (data) {
            console.log(data[0].id);
        }
    });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form method="POST" id="post123" action="" enctype="multipart/form-data">
    <input class="form-control input-lg" name="book_name" id="inputLarge" type="text">

    <input class="form-control" name="book_price" type="number">

     <textarea class="form-control" id="exampleTextarea2"
               name="book_description" maxlength="100" rows="7"></textarea>

    <textarea class="form-control" name="book_content"  id="exampleTextarea4" maxlength="200" rows="7"></textarea>

    <input type="file" name="file" id="imgInp44" >

    <button type="button" name='action' id="sendbutton21" value="post1" class="btn btn-primary">
        Submit
    </button>
</form>

Upvotes: 1

musa
musa

Reputation: 1465

Instead of

$("#sendbutton21").click(function() {

use

$("#post123").submit(function() {

Upvotes: 0

Damien
Damien

Reputation: 1620

To submit a form without refresh, use event.preventDefault().

$("#sendbutton21").click(function(event) {
event.preventDefault();
    var url = "http://localhost:5000/magazin_insert"; // the script where you handle the form input.

    $.ajax({
           type: "POST",
           url: url,
           data: $("#post123").serialize(), // serializes the form's elements.
           success: function(data)
           {

               alert(data); // show response from the php script.
           }
         });

    return false; // avoid to execute the actual submit of the form.
});

Upvotes: 0

Madhav Chaturvedi
Madhav Chaturvedi

Reputation: 621

Try https://jquery-form.github.io/form/ plugin to easily send form via ajax sample code:

$('#post123').ajaxForm(function() {
       // SUCCESS CALLBACK
});

Upvotes: 0

Related Questions