Upload PDF using ajax and form keeps failing - javascript

I have this code that keeps failing do do its job. I'm trying to pass file data ass well as ID to the php side, but it keeps failing. I don't know what I'm doing wrong. Please help.
$(document).ready(function() {
$('#form_upload').submit(function(event) {
event.preventDefault();
$.ajax({
url: 'updateFile.php',
type: 'post',
contentType:false,
cache: false,
processData:false,
data: {docID: document.getElementById('txt_docID').value, formUpload: new FormData($('#form_upload'))},
success: function(data){
alert(data);
}
});
return false;
});
});
<div id="divItemSelector" >
<form id = 'form_upload' class 'uploadform' action="updateFile.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileUpload" id="fileUpload" >
<input id='txt_docID' type="text" name="txt_docID" style="visibility:hidden">
<input type="button" value="Close" name="btn_close" onclick = "hideDiv()" style="float: right;">
<input type="submit" value="Upload PDF" name="submit" style="float: right;">
</form>
and on php side im trying to use
$_POST['docID']
and
$_FILES["fileUpload"]["name"]
to get to my data.

in your code type: 'post' should be method: 'post'

Related

How to autosubmit form with ajax

i m trying to submit my form without any user interaction,i don't know how to do that, do you have a lead for?
Thanks by advance
Below my code
Html form
<form id="myform" method="post">
<div>
<input type="hidden" name="print_names" id="print_names" value="print_names" />
<input type="submit" name="loginBtn" id="loginBtn" value="test" />
</div>
</form>
Ajax part for submit
$(document).ready(function(){
$('#myform').submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: 'form.php',
data: $(this).serialize(),
success: function(response)
{
Your form has no target action, in that caase you could use just:
document.forms.myform.submit();

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?
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>
Try https://jquery-form.github.io/form/ plugin to easily send form via ajax sample code:
$('#post123').ajaxForm(function() {
// SUCCESS CALLBACK
});
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.
});
Instead of
$("#sendbutton21").click(function() {
use
$("#post123").submit(function() {

How To submit form with ajax that was already loaded with ajax, without reload the current page?

I'm struggling with this problem for about week, What I need to do, Is submit form with ajax, That was already loaded with ajax, I have tried many solutions but nothing work, So if someone know, the right approach, I will be appreciated,
And Thank advanced.
This is my code :
<form class="w3-container" method="POST" action="forms-submitting" id="SignIN">
<p>
<label><b> إسم المستخذم </b></label>
<input class="w3-input w3-border" type="text" name="user_name">
</p>
<p>
<label><b> كلمة المرور <b></label>
<input class="w3-input w3-border" type="password" name="pass_word">
</p>
<p>
<button type="submit" class="w3-button w3-text-blue"> تسجيل الدخول </button>
</p>
</form>
And this is my ajax code:
$("#SignIN").submit(function(e) {
var url = "forms-handle.php";
$.ajax({
type: "POST",
url: url,
data: $("#SignIN").serialize(),
success: function(data)
{
alert(data);
}
});
e.preventDefault();
});
Since you're not using the regular submit you could change your button to button type and attach click event to this button like :
<button type="button" id="login" class="w3-button w3-text-blue"> تسجيل الدخول </button>
$('body').on('click', '#login', function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "forms-handle.php",
data: $("#SignIN").serialize(),
success: function(data)
{
alert(data);
}
});
});
NOTE : Since the form is loaded dynamically you should use event delegation .on().
Hope this helps.

How to sent uploaded image details(name,size, temp_name,error) for upload using JavaScript

I am submiting form using JavaScript. Now I want to store/move image into folder using javaScript.
HTML Code -
<form id="exampleForm" method="post" action="" enctype="multipart/form-data" >
<input type="file" name="imagename" id="imagename" />
<input type="button" name="save_exit" id="save_exit" onclick="submitForm('add_question_sql.php')" value="Save & Exit" />
</form>
JavaSript Code-
function submitForm(action)
{
document.getElementById('exampleForm').action = action;
document.getElementById('exampleForm').submit();// submiting form
}
So how to sent image details (name, size, temp_name,error) to action page for move uploading process.
Try this
<form id="exampleForm" method="post" enctype="multipart/form-data" >
<input type="file" name="imagename" id="imagename" />
<button>Submit</button>
</form>
Ajax:
$("form#exampleForm").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url:'add_question_sql.php',
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});

Repopulating div with new form/content using jQuery/AJAX

Are there any jQuery/AJAX functions that when a form (or anything for that matter) is displayed, upon pressing a button the div containing the original form is replaced by a new form? Essentially, a multi-part form without having to reload the page.
Can I use something like this?
$('form#myForm').submit(function(event) {
event.preventDefault();
$.ajax({
type: '',
url: '',
data: $(this).serialize(),
success: function(response) {
$('#divName').html(response);
//somehow repopulate div with a second form?
}
})
return false;
});
I've used this before for adding items to a list, but I've never used it to totally repopulate it with different content. How can I direct it to the second form?
edit - I got it to work, but only when I write '#form2' for the replacement. I alerted the response and I get {"formToShow":"show2"}. I tried doing response.formToShow but it's undefined.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
</head>
<div id="divName">
<form method="POST" action = "#" id="form1">
<input type="textbox" name="textbox1" value="1"/>
<input type="submit" name="submit1"/>
</form>
<form method="POST" action = "#" id="form2" style="display: none">
<input type="textbox" name="textbox2" value="2"/>
<input type="submit" name="submit2"/>
</form>
</div>
<script>
$('form#form1').submit(function(event) {
event.preventDefault();
$.ajax({
type: 'JSON',
url: 'receiving.php',
data: $(this).serialize(),
success: function(response) {
$('#form1').hide(); //hides
//$('#form2').show(); //this will show
$(response.formToShow).show(); //this does not display form 2
}
})
return false;
});
</script>
Here is receiving.php. When I view this page {"formToShow":"show2"} is displayed
<?php
echo json_encode(array("formToShow" => "#form2"));
?>
Check the JQuery Load Function
This is personal preference, but I'd never send HTML through the response and display it like that, what I'd do is:
Send a JSON array back from the server, such as { formToShow: "#form1" }
Then you can simply do this:
success: function(response) {
$('form').hide();
$(response.formToShow).show();
}
Obviously, using this method, you'd also have to have the second form in your markup like this:
<form method="POST" action = "#" id="form2" style="display: none">
<input type="textbox" name="textbox2"/>
<input type="submit" name="submit2"/>
</form>
You'd also have to change (to pickup the array):
$.ajax({
type: 'JSON'
try this
$('form#myForm').submit(function(event) {
event.preventDefault();
$.ajax({
type: '',
url: '',
data: $(this).serialize(),
success: function(response) {
$('#divName').html(response);
$('#form1').hide();
$('#form2').show();
}
})
return false;
});
<form method="POST" action = "#" id="form1">
<input type="textbox" name="textbox1"/>
<input type="submit" name="submit1"/>
</form>
<form method="POST" action = "#" id="form2" style="dispay:none;">
<input type="textbox" name="textbox2"/>
<input type="submit" name="submit2"/>
</form>

Categories