1

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?

Improve this question
0

4 Answers 4

Reset to default
1

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

processData option of $.ajax() should be set to false
@guest271314 right. Thanks. I'm testing and creating a snippet
0

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

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

Comments

0

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. });
Improve this answer

Comments

0

Instead of

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

use

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

Improve this answer

1 Comment

The .submit(function () {}) syntax is a shorthand for .on('submit', handler). See api.jquery.com/submit for details.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.