I am trying to submit a form by Ajax but I am unable to . I have multiple forms and I am using (this) to submit the data. I am getting the error From error:0 error.The alert messages are showing me that I have the value.
<script type="text/javascript">
$(document).ready(function() {
$(".submitform").click(function (){
alert ($(this).parent().serialize());
$.ajax({
type: "POST",
url: "reply_business.php",
timeout:5000,
data: $(this).parent().serialize(),
beforeSend: function(xhr){
$('#load').show();
},
success: function(response){
$(this).parent().find('.sentreply').append(response);
$('.sentreply div:last').fadeOut(10).fadeIn(2000);
//uncomment for debugging purposes
//alert(response);
},
error: function(jqXHR) {
alert ('From error:' + jqXHR.status + ' ' +jqXHR.statusText);
},
complete: function(jqXHR, textStatus){
//uncomment for debugging purposes
//alert ('From complete:' + jqXHR.status + ' ' +jqXHR.statusText + ' ' + textStatus);
$('#load').hide();
}
});
});
});
</script>
I am creating the form below by the PHP code
foreach ($array['business_ids'] as $business)
{
?>
<form >
<input type="hidden" name="b_id" value="<?php echo $business ; ?>" />
<input type="hidden" name="c_id" value="<?php echo $sqlr['conversation_id']; ?>" />
<input type="hidden" name="q_id" value="<?php echo $sqlr['query_id']; ?>" />
<input type="hidden" name="u_id" value="<?php echo $sqlr['u_id']; ?>" />
<textarea name="reply">Type the reply here.</textarea>
<input type="submit" class="submitform" value="Submit">
</form>
<?php
}
I do not understand why Ajax isn't able to send the data.
Without seeing the markup or the network traffic, we can only guess. Perhaps $(this).parent() isn't the form?
It's typically safer to attach $(form).submit() than $(button).click() for this reason and because $(button).click() doesn't capture form submit by hitting the enter key.
Edit Here's an example:
<form id="theform">
<input type="text" id="thetext" name="thetext" />
<input type="submit" value="send" />
</form>
<form id="anotherform">
<input type="text" id="anothertext" name="anothertext" />
<input type="submit" value="save 2" />
</form>
<script>
$(document).ready(function () {
$("#theform").submit(function (e) {
var data = {
thetext: $("#thetext").val()
};
$.ajax("/the/server/url", {
type: "POST",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data),
success: function (r) {
alert("done");
}
});
// Technically you need only one or the other
e.preventDefault();
return false;
});
});
</script>
You seem to have submitted the form after starting the Ajax request - and when the page is unloaded, the request is cancelled. Since your form has no action, the submit will just reload the current page so you might not notice it.
To prevent this, you will need to preventDefault() the catched event. Also, you should not handle just click events on submit-buttons, but rather the submit-event of the <form> itself.
Related
This question already has answers here:
insert query with ajax without reloading whole page
(2 answers)
Closed 4 years ago.
Inserting the data through AJAX it's working but pages refreshing, why is that give a feedback to fix this issues.
This is my ajax code
<script>
$(document).ready(function(){
$("#button").click(function(){
var postId=$("#postId").val();
var userId=$("#userId").val();
var postComm=$("#postComments").val();
$.ajax({
url:'../validate/inserPostComm.php',
method:'POST',
data:{
poId:postId,
usId:userId,
poco:postComm
},
success:function(data){
//alert(data);
}
});
});
});
</script>
Here I'm using HTML
<form>
<input type="hidden" id="postId" name="postId" value="<?php echo $_GET["postId"]; ?>">
<input type="hidden" id="userId" name="userId" value="<?php echo $_SESSION["u_id"]; ?>">
<textarea placeholder="Post your comment" id="postComments"></textarea>
<button type="submit" id="button"><i class="fa fa-paper-plane"></i></button>
</form>
You are facing it due to the button having input type “Submit”
<button type="submit" id="button"><i class="fa fa-paper-plane"></i></button>
Just change it to normal “button”
<button type="button " id="button"><i class="fa fa-paper-plane"></i></button>
Easy fix: Add a preventDefault(). Notice the 'e' I added to your click function.
<script>
$(document).ready(function(){
$("#button").click(function(e){
e.preventDefault();
var postId=$("#postId").val();
var userId=$("#userId").val();
var postComm=$("#postComments").val();
$.ajax({
url:'../validate/inserPostComm.php',
method:'POST',
data:{
poId:postId,
usId:userId,
poco:postComm
},
success:function(data){
//alert(data);
}
});
});
});
</script>
You can prevent the default submit button behavior - submitting the form - with event.preventDefault();
<script>
$(document).ready(function(){
$("#button").click(function(event){
// prevent the default submit button behaviour
event.preventDefault();
var postId=$("#postId").val();
var userId=$("#userId").val();
var postComm=$("#postComments").val();
$.ajax({
url:'../validate/inserPostComm.php',
method:'POST',
data:{
poId:postId,
usId:userId,
poco:postComm
},
success:function(data){
//alert(data);
}
});
});
});
</script>
another ajax i'm using but some issue is coming page is refreshing.
<script>
function inspire(x){
var insPer =$("#insPer"+x).val();
var insPos =$("#insPos"+x).val();
$.ajax({
url:'../validate/inspire.php',
method:'POST',
data:{
u_id:insPer,
p_id:insPos
},
success:function(data){
//alert(data);
}
});
}
</script>
this is html code
<input type="hidden" id="insPer<?php echo $p_id; ?>" name="insPer" value="<?php echo $_SESSION["u_id"]; ?>">
<input type="hidden" id="insPos<?php echo $p_id; ?>" name="insPos" value="<?php echo $p_id; ?>">
<a href="#" onclick="inspire(<?php echo $p_id; ?>);">
Better do this
$(document).ready(function(){
$("form#comment").submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
// console.log(formData);
$.ajax({
url: '../validate/inserPostComm.php',
type: 'POST',
data: formData, //The Form data contain array (postId,userId,postComments)
success: function (data) {
// do something if success
},
error: function(xhr, ajaxOptions, thrownError) {
//If error thrown here
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="comment" method="post" enctype="multipart/form-data">
<input type="hidden" id="postId" name="postId" value="...">
<input type="hidden" id="userId" name="userId" value="...">
<textarea placeholder="Post your comment" id="postComments" name="postComments"></textarea>
<button type="submit" id="button"><i class="fa fa-paper-plane"></i></button>
</form>
let me first explain what I aim to do, then display my code.
What I want to do is make a page which basically updates a user's details in the database, I did this part first and everything works perfectly here, through AJAX. Next I wanted to update the profile picture of the user as well through AJAX, so I made a normal file upload PHP page to make sure that my PHP code was working correctly and it was. Now I just needed to perform the upload via AJAX, and this is where I get stuck. I keep getting an error message from the PHP page which states undefined index: file.
Please feel free to ask any questions, and thank you for the responses.
Here is my HTML form:
<form action="upload.php?upload&type=profile" method="post" enctype="multipart/form-data">
<label for="profile">Profile Picture</label><br />
<img id="preview" width="200" height="200" src="<?php echo $user->getProfile(); ?>" alt="Profile Picture Preview" /><br />
<br />
<input type="file" name="file" id="file" onchange="loadImage(this);" /><br />
<label for="username">Username</label><br />
<input type="text" name="username" id="username" value="<?php echo $user->getUsername(); ?>" /><br />
<label for="email">Email Adress</label><br />
<input type="text" name="email" id="email" value="<?php echo $user->getEmail(); ?>" /><br />
<label for="bio">Biography</label><br />
<textarea name="bio" id="bio" cols="40" rows="5"><?php echo $user->getBio(); ?></textarea><br />
<label for="password">New Password</label><br />
<input type="password" name="password" id="password" /><br />
<label for="oldPass">Current Password</label><br />
<input type="password" name="oldPass" id="oldPass" /><br />
<label for="first">First Name</label><br />
<input type="text" name="first" id="first" value="<?php echo $user->getFirstName(); ?>" /><br />
<label for="last">Last Name</label><br />
<input type="text" name="last" id="last" value="<?php echo $user->getLastName(); ?>" /><br />
<br />
<input type="submit" name="update" value="Save" id="update" /> <input type="button" name="reset" value="Reset Fields" onclick="resetFields()" />
</form>
Here is my js file containing the AJAX:
$(document).ready(function() {
$("#update").click(function() {
profile = "pictures/default.jpg";
username = $("#username").val();
email = $("#email").val();
bio = $("#bio").val();
newPass = $("#password").val();
oldPass = $("#oldPass").val();
first = $("#first").val();
last = $("#last").val();
// First an ajax request to upload the image as it requires separate request
$.ajax({
type: "POST",
url: "upload.php?upload&type=profile",
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function(resp) {
alert(resp);
},
error: function (resp) {
alert(resp);
}
});
// Now the updates in the profile
$.ajax({
type: "POST",
url: "update.php",
data: "mode=details&profile="+profile+"+&username="+username+"&email="+email+"&bio="+bio+"&password="+newPass+"&oldPass="+oldPass+"&first="+first+"&last="+last,
success: function(resp) {
// resp contains what is echoed on update.php
alert(resp);
}
});
return false;
});
});
Finally, here is my PHP Code:
include "base.php";
// Kick user off this page if they are not logged in
if (!isset($user)) {
echo "<meta http-equiv='refresh' content='0.1;url=index.php'>";
exit();
}
if (isset($_GET['upload'])) {
switch ($_GET['type']) {
case "profile": {
$dir = "pictures/";
$maxFileSize = 2000000; // 2mb
$extensions = array("jpg", "jpeg", "png", "gif");
$currentPath = pathinfo($_FILES['file']['name']);
$fileType = $currentPath['extension'];
$targetFile = $dir.$user->getUsername()."Profile.".$fileType;
}
break;
default: {
echo "<meta http-equiv='refresh' content='0.1;url=index.php'>";
exit();
}
break;
}
$upload = true;
// Check the file size
if ($_FILES['file']['size'] > $maxFileSize) {
echo "The file is too large.";
$upload = false;
}
// Limit file types
if (!in_array($fileType, $extensions)) {
echo "This file type is not allowed.";
$upload = false;
}
// Check if file upload is allowed and upload if it is
if ($upload) {
if (move_uploaded_file($_FILES['file']['tmp_name'], $targetFile)) {
echo basename($_FILES['file']['name']);
} else {
echo "There was an error during file upload.";
}
}
}
Your code has a few issues. For one since your button was located within a Form and you were only associating a click on that button then the form was submitting itself as normal and pretty much confusing jquery. In order to capture the form properly in jquery you need to run it as a submit instead and add the e.preventDefault(); so that your code in ajax runs instead of the actual form submitting on the page.
You need to add e.preventDefault(); so that your form does not submit itself since you have form tags. Also change from click to submit
$("form").submit(function(e) {
e.preventDefault();
profile = "pictures/default.jpg";
username = $("#username").val();
email = $("#email").val();
bio = $("#bio").val();
newPass = $("#password").val();
oldPass = $("#oldPass").val();
first = $("#first").val();
last = $("#last").val();
// First an ajax request to upload the image as it requires separate request
$.ajax({
type: "POST",
url: "upload.php?upload&type=profile",
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function(resp) {
alert(resp);
},
error: function (resp) {
alert(resp);
}
});
// Now the updates in the profile
$.ajax({
type: "POST",
url: "update.php",
data: "mode=details&profile="+profile+"+&username="+username+"&email="+email+"&bio="+bio+"&password="+newPass+"&oldPass="+oldPass+"&first="+first+"&last="+last,
success: function(resp) {
// resp contains what is echoed on update.php
alert(resp);
}
});
return false;
});
If you are dealing with multiple forms on a page, or dynamically created forms then you will want to use
$(document).on('submit', 'form', function(e) {
...
});
Even better give your form a class for dynamic data
$(document).on('submit', '.myform', function(e) {
...
});
I submit my form using jQuery $.post method and need to validation form using jQuery validation plugin like this :
HTML :
<form name="myform" id="myform" action="send.php">User:
<input type="text" value="" name="user" />
<br/>Password:
<input type="password" name="password" value="" />
<input type="hidden" name="xyz" value="123" />
<input type="hidden" name="submit" value="true" />
<?php $token=N oCSRF::generate( 'csrf_token' );?>
<input type="hidden" name="csrf_token" value="<?php echo $token; ?>">
</form>
<button class="btn btn-info" id="ajax-form-1">Run Code</button>
<div id="ajax-form-msg1"></div>
JS:
$('#myform').validate({
rules: {
user: {
required: true
},
password: {
required: true
}
},
submitHandler: function (form) {
$("#ajax-form-1").click(function () {
$("#ajax-form-msg1").html("<img src='loading.gif'/>");
// var formData = $("#myform").serialize(); //or
var formData = $("#myform").serializeArray();
var URL = $("#myform").attr('action');
$.post(URL,
formData,
function (data, textStatus, jqXHR) {
$("#ajax-form-msg1").html('<pre><code class="prettyprint">' + data + '</code></pre>');
}).fail(function (jqXHR, textStatus, errorThrown) {
$("#ajax-form-msg1").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus=' + textStatus + ', errorThrown=' + errorThrown + '</code></pre>');
});
});
}
});
In action, jQuery validation not work with my form. how do fix this ?
DEMO : http://jsfiddle.net/fcuswvf1/2/
You are binding the click handler on the button inside the submitHandler. This way, when a user clicks the button, the click event doesn't fire. You can simply remove the click handling lines from the 'submitHandler, so that the code inside is called directly wheneversubmitHandler` is triggered.
I want to post 2 forms using javscript, but I can't seem to figure it out. Can someone help me?
It seems like I need to submit the first form Async according to this but I don't follow their code: Submit two forms with one button
HTML
<form name="form1" action="https://test.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" target = "me1">
<input type="hidden" name="oid" value="00Df00000000001" />
</form>
<form name="form2" action="https://test.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" >
<input type="hidden" name="oid" value="00Df00000000001" />
</form>
<input name="submit" value="Submit Form" onclick="submitForms ()" type="button">
JS
function submitForms(){
document.forms["form1"].submit(); /* should be Async?*/
document.forms["form2"].submit();
}
var str1 = $( "form1" ).serialize();
var str2 = $( "form2" ).serialize();
ajaxReq(url,str1);
ajaxReq(url,str2);
function ajaxReq(url,data){
var request = $.ajax({
url: url,
type: "POST",
data: data,
dataType: "html"
});
request.done(function(html) {
console.log('SUCCESS')
});
request.fail(function( jqXHR, textStatus ) {
console.log("AJAX REQUEST FAILED" + textStatus);
});
}
As always thanks in advance if you can help with this one.
I'm trying to use Ajax to call a script and post the form data at the same time. Everything works as expected except the $POST data which comes back blank when I try to echo or print it. Can anyone shine a light on what I have missed here please?
<form id="guestlist" name="guestlist">
<?php // Collect CLUBS data to pass to guestlist script ?>
<input type="hidden" name="gl_clubname" value="<?php echo $ptitle; ?>" />
<input type="hidden" name="gl_clubnumber" value="<?php echo $phoneno_meta_value; ?>" />
<input type="hidden" name="gl_clubemail" value="<?php echo $email_meta_value; ?>" />
<?php // Collect USERS data to pass to guestlist script ?>
<input type="hidden" name="gl_name" value="<?php echo $fullname;?>" />
<input type="hidden" name="gl_email" value="<?php echo $email;?>" />
<input type="hidden" name="gl_dob" value="<?php echo $birthday;?>" />
<input type="hidden" name="gl_propic" value="<?php echo $profile_url;?>" />
<div id="clubcontactleft">
<textarea id="clubmessage" name="gl_message" placeholder="Your message" rows="4" style="background-image:url('http://www.xxxxx.com/wp-content/themes/xxxxx/images/userreview.jpg');
background-repeat:no-repeat; padding-left:40px; background-size:40px 94px; width:250px; margin-bottom:15px;"></textarea>
<input type="text" name="gl_when" placeholder="Enquiry Date" style="background-image:url('http://www.xxxxx.com/wp-content/themes/xxxxx/images/calendaricon.jpg');
background-repeat:no-repeat; padding-left:40px; background-size:40px 38px; width:250px;">
<input type="text" name="gl_phonenumber" placeholder="Phone Number" style="background-image:url('http://www.xxxxx.com/wp-content/themes/xxxxx/images/phonecall.jpg');
background-repeat:no-repeat; padding-left:40px; background-size:40px 38px; width:250px;">
</div>
<div class="guestlistbutton">Send Message</div>
</form>
<script type="text/javascript">
$(document).ready(function($){
$(".guestlistbutton").on('click',function(event) {
event.preventDefault();
$("#clubcontactform").empty();
var url = "http://www.xxxxxx.com/wp-content/themes/xxxxxx/guestlist.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#guestlist").serialize(), // serializes the form's elements.
success: function(data)
{
$('#clubcontactform').append(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});
});
</script>
Here is the php file that it pulls in
<?php
echo 'Pulling in guestlist.php<br/>';
$gl_message = $_POST['gl_message'];
print_r($gl_message);
echo $gl_message;
?>
Thanks!
Every thing seems to be correct only you forget to include the jquery file. please include and try once. If still persist the issue will create the Jsfiddle
I checked your code in my local machine and I got the following error "Caution provisional headers are shown". If you have the same message in your browser console, this information can help you: "CAUTION: provisional headers are shown" in Chrome debugger
Also, I see that js work perfectly. Problem in your url address. Try send your form to itself, just write html part and php part of code in one file.
<div>
<form id="Get_FRm_Data">
/*
Some field using.....
/*
</form>
<button type="button" name="submit" class="submit_act">Submit</button>
</div>
<script>
var file_pathname = window.location.protocol + "//" + location.host + "/foldername/";
$(document).on("click", ".submit_act", function ()
{
var $this_val=$(this);
$this_val.html("Loading...").prop("disabled",true);
var $data_ref = new FormData($("#Get_FRm_Data")[0]);
$data_ref.append("action", "fileaction_name");
$pathname = file_pathname + "filename.php";
$.ajax({
url: $pathname,
type: 'POST',
data: $data_ref,
cache: false,
contentType: false,
processData: false,
dataType: 'json',
success: function (result, status)
{
console.log(result);
if (status == "success")
{
$this_val.html("Submit").prop("disabled",false);
}
}
});
});
</script>
<?php
if (isset($_POST['action']))
{
$action = $_POST['action'];
if($action=="fileaction_name")
{
print_r($_POST);
}
}
?>