How do prevent page reload/refresh from submitting ajax called form and get the texts and uploaded file/image?
karauzum
I want to call forms and upload image with some texts. But i dont want submitting refresh the page. How can i do that? Thank you very much...
When i click to Bring Form button a form comes and when i clicked to submit button page refreshing and form disapears. Like this...
Form disapears. I dont want this. How to do that? Here codes...
index.html
<!DOCTYPE html>
<html>
<head>
<title>TEXT & FILE UPS</title>
</head>
<body>
<button onclick="bring_form();" >Bring Form</button>
<span id="form_field"></span>
<script src="assets/js/jquery-3.2.1.min.js"></script>
<script src="assets/js/custom.js"></script>
</body>
</html>
custom.js
$(document).ready(function () {
$("#form_1_0").on('submit',(function(e){
e.preventDefault();
var formData = new FormData(this);
var action = "test";
formData.append('action', action);
$.ajax({
url: "actions.php",
type: 'POST',
data: formData,
async: false,
success: function (data) {
console.log(data);
alert(data);
},
cache: false,
contentType: false,
processData: false
});
return false;
}));
});
function bring_form(){
var action = "bring_form";
$.ajax({
type: "POST",
url: "actions.php",
beforeSend: function () {
},
data: {action: action},
success: function(msg)
{
var msg = msg.trim();
$("#form_field").html(msg);
}
});
}
actions.php
<?php
if(!empty($_POST)){
$action = $_POST["action"];
if($action == "bring_form"){
echo '<form id="form_1_0" method="post" enctype="multipart/form-data">
<input type="text" name="txt_1" value="Bob" />
<input type="text" name="txt_2" value="James" />
<input type="text" name="txt_3" value="Smith" />
<input name="image" type="file" />
<button >Submit</button>
</form>';
}elseif($action == "test"){
print_r($_POST);
print_r($_FILES);
}
}
?>
charlietfl
You need to delegate the submit handler to an element that actually exists at the time you call it since the form doesn't exist
Try changing:
$("#form_1_0").on('submit',(function(e){
To
$(document).on('submit',"#form_1_0",function(e){
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Sort list based on sum of two object properties in Javascript
- Next: How to calculate specific row_number
Related
TOP Ranking
- 1
Failed to listen on localhost:8000 (reason: Cannot assign requested address)
- 2
Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)
- 3
How to import an asset in swift using Bundle.main.path() in a react-native native module
- 4
pump.io port in URL
- 5
Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext
- 6
BigQuery - concatenate ignoring NULL
- 7
ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3
- 8
ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements
- 9
Spring Boot JPA PostgreSQL Web App - Internal Authentication Error
- 10
How to remove the extra space from right in a webview?
- 11
java.lang.NullPointerException: Cannot read the array length because "<local3>" is null
- 12
Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');
- 13
flutter: dropdown item programmatically unselect problem
- 14
How to use merge windows unallocated space into Ubuntu using GParted?
- 15
Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd
- 16
Nuget add packages gives access denied errors
- 17
Svchost high CPU from Microsoft.BingWeather app errors
- 18
Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background
- 19
12.04.3--- Dconf Editor won't show com>canonical>unity option
- 20
Any way to remove trailing whitespace *FOR EDITED* lines in Eclipse [for Java]?
- 21
maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class
Comments