I am using the plugin formtomail to send emails. The problem that I am experiencing is that I do not want the page to refresh after submitting the form from the template which is called in the action of the form on the primary page. Does someone know how to do this that has worked with this plugin?
I think this might help a little:
first you need to edit the html page that has the form.
then add this script to it and adjust it properly.
// this is the id of the form
$("#idForm").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
});
Related
I am protecting my forms with a captcha code to prevent using bots submitting loads and loads of forms.
This form works with AJAX and won't refresh the page like it usually does.
I have everything set now and it is working. but..
So this is the form im talking about to help understand.
When you click on request a new password, i need the code to change on the input field.
I do change the code after requesting a password like this in newpass.php
$_SESSION['capcode3'] = $capcode3;
This is my javascript code:
<script>
$("#formoid").submit(function(event) {
event.preventDefault();
var form_data = $(this).serialize(); //Encode form elements for submission
$.ajax({
type: "POST",
url : "data/newpass.php/",
data : form_data
});
document.getElementById("captcha").value = "<?php echo $_SESSION['capcode3']; ?>";
});
</script>
So by using document.getElementById it would change the input value but, instead of setting the new value, it sets the old value.
So if the code is ABC123 and the new code is DEF456 it wont change to DEF456
Is there a better way to send the new code back to the input field?
Note: I have tested if $_SESSION['capcode3'] will change it's value with a positive result.
You did not specify a success handler in your ajax. Ajax is handled async, thus needs a callback to where the data will be passed when the request is succesfuly handled
$.ajax({
type: "POST",
url : "data/newpass.php/",
success: function(data) {
//change UI here
document.getElementById("captcha").value = data;
},
});
Please add code in success of ajax because may be session value will be changed on ajax success.
$.ajax({
type: "POST",
url : "data/newpass.php/",
data : form_data,
success :function(data){
document.getElementById("captcha").value = data;
}
});
Please try with this.
I am trying to submit a form using ajax.
Without the ajax, the form action 'send.php' works fine, it sends an email with data from the form (including files etc...)
But I want it to do so without redirecting to the php page,
so I try to use ajax but the php is not executed (I think), it should send an email and the email is not sent (reminder - without ajax it works fine).
The ajax alert "Form submitted" (success) but the mail is not sent and non of the echo/alert in the php file shows up...
HTML form:
<form method="post" action="send.php" enctype="multipart/form-data"id="myForm" target="_blank">
ajax:
$(document).on('submit', '#myForm', function(e) {
e.preventDefault();
$.ajax({
url: $('#myForm').prop('action'),
type: $(this).attr('method'),
data: $('#myForm').serialize(),
beforeSend: function() {
$('#gif').css('visibility', 'visible');
},
success: function(data) {
$('#gif').css('visibility', 'hidden');
alert('Form submitted');
},
error: function() {
// The request failed - So something here
alert('Form NOT submitted'); //display an alert whether the form is
}
});
});
Edit:
Found the source of the problem, my ajax is not complete I need to make use of FormData!
I can't find how to make use of it for all the files in my form can someone please show an example for the right ajax?
create a variable in your JavaScript like
var myData = $('#form_ID').serialize();
and then when making ajax call use
$.ajax({
url: URL_HERE,
method: "POST",
data: myData,
success: function (results) {
it will submit the form data, simple is that.
I wonder tho, how can I embed an http request url like myurl.php in an html form and then push the values onto the server using buttons
So I want to put (url.php), but I don't want the page to redirect to the url
Each time I press submit. I just want the data to get to the specified server.
And no I do not own the website in question.
You can do this by ajax use this sample code
$("formId").submit(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: 'url.php',
data: $("#formId").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
})
});
or you can use Ajax Form plugin
I have a question. I'm using a Fancybox instance to show categories of tags. In this fancybox, users can edit the categories, delete them or create new ones.
The script that is executed in the fancybox is called with AJAX. That means that a PHP-file (called categories.php) is being executed while the browser doesn't redirect (it stays on tags.php). And here's where the problem kicks in:
I have a form on categories.php. If the user presses submit, then jQuery cancels the default event and send an AJAX request. This AJAX request should be send to this code (e.g. the code in categories.php).
How can I do that?
$(document).ready(function() {
$('form').on('submit', function(event) {
// cancel the default event (i.e. POST the form)
event.preventDefault();
var postData = $(this).serialize();
var postUrl = this.href;
var createCategory = $.ajax({
url: postUrl,
type: 'POST',
data: postData
});
createCategory.done(function(result) {
// code to reload the page
// .replaceWith()?
$('.testdiv').append(result);
console.log('done');
})
});
});
Should the postUrl be $(this).href ? or Should I change that to point to the categories.php?
I think you should try to point at categories.php.
I am trying to get a div to reload once a checkbox has been selected or unselected and the form has been submitted. I have used AJAX and can get the form to submit on change, which works no problem. However the page has to reload to display new data.
I have built the php in such a way that it doesn't need to refresh the page or fetch a new page. If the div and it's content refreshes that should be sufficient to display the new filtered data.
Below is what I have written so far
$(document).ready(function() {
$("input:checkbox").change( function() {
$.ajax({
type: "POST",
url: "index.php?action=resortFilter",
data: $("#locationFilter").serialize(),
success: function(data) {
$('.resorts').html(data);
}
});
})
});
What do I need to do to get the div to reload after the request has been made?
I use class methods to handle the processing which return only the array of data. The requests are made to the class from a php function.
What I'm trying to do isn't actually possible to because PHP is a server side language. The best bet is to create a new intermediate file that can handle the display of the data so that it can be brought in through a normal AJAX request and get the new display from it
Where is the Ajax request? You are submitting your form through HTML/Browser. You need to use the following code:
$(document).ready(function() {
$("input:checkbox").change( function() {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#locationFilter").serialize(), // serializes the form's elements.
success: function(data)
{
$('.resorts').html(data);
}
});
})
});
Source: jQuery AJAX submit form
this sample loading code maybe help you
<div id="loadhere"></div>
$('div#loadhere').load('ajaxdata.php',{datatosend:whatyouwantforexamplehelloworld});