I have a page where is 3-4 form in divs, and I want to submit it with only one script and I want to refresh the actual div content (where is the form). But I don't know how to specify the actual div or form for the ajax post.
$(document).ready(function(){
$(".ajaxform").submit(function() {
var id = $(this).attr('id');
var dataString = $(this).serialize();
$.ajax({
url:'../tools/tools.php',
data: dataString + '&form=' + id,
type: 'POST',
success: function(html)
{
$('#actualdiv').load(document.URL + ' #actualdiv');
}
});
});
});
The forms or divs have unique id for the tools.php where I can run the actual form's mysql.
Since you are posting data and then receiving new forms back as a response, I would make the function more dynamic.
function loadNextForm(form, id){
var dataString = form.serialize();
$.ajax({
url:'../tools/tools.php',
data: dataString + '&form=' + id,
type: 'POST',
success: function(newForm) {
$('#actualdiv').html(newForm);
}
});
}
$(document).ready(function(){
$(".ajaxform").on("submit", function(){
loadNextForm($(this), $(this).attr('id'));
});
});
This should allow you to POST the data, get the new form, place it into the DIV, and allow it to be a functional form that can process the next form.
Related
I am submitting a form via an ajax post request but there is a possibility that there is also one get parameter and if the get parameter is set it must be included in the post request.
I currently have this:
jQuery(document).ready(function($) {
$("#plugin_check").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var actionUrl = form.attr('action');
$.ajax({
type: "POST",
cache: false,
url: actionUrl,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
$("#result").html(data); // show response from the php script.
}
});
});
});
I need to figure out how to put $_GET['datesort'] into the post data.
you can try this, create variable to save datesort and add this to ajax data
jQuery(document).ready(function($) {
$("#plugin_check").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var actionUrl = form.attr('action');
var queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);
var datesort = urlParams.get('datesort')
$.ajax({
type: "POST",
cache: false,
url: actionUrl,
data: form.serialize() + `&datesort=${datesort}`, // serializes the form's elements.
success: function(data) {
$("#result").html(data); // show response from the php script.
}
});
});
});
Sorry I am a beginner with jQuery and Javascript. I want to be able to get the results into my modal from any form on the page that has class ajax. My code is below but not working correctly. Currently it opens the post result in a new page and not in the modal. Can anyone shed any light on my code?
Many thanks
$(document).ready(function() {
$('.ajax').click(function() {
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {};
that.find('name').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
console.log(value);
// AJAX request
$.ajax({
url: url,
type: type,
data: data,
success: function(response){
// Add response in Modal body
$('.modal-body').html(response);
// Display Modal
$('#aaModal').modal('show');
}
});
});
});
This probably happens because your browser submits the form by default. It doesnt know youre doing AJAX stuff. To prevent this, use preventDefault().
In addition to that, jQuery has a built in function for serializing (1 and 2) form data.
$(document).ready(function() {
$('form.ajax').click(function(event) {
event.preventDefault(); // prevents opening the form action url
var $form = $(this),
url = $form.attr('action'),
type = $form.attr('method'),
data = $form.serialize();
// console.log(value); // value doesnt exist outside of your loop btw
// AJAX request
$.ajax({
url: url,
type: type,
data: data,
success: function(response){
// Add response in Modal body
$('.modal-body').html(response);
// Display Modal
$('#aaModal').modal('show');
}
});
});
});
Also, its not quite clear if you bind the click event handler to a form or a button, I guess the first one. You should change the handler to the following:
$(document).ready(function() {
$('form.ajax').on('submit', function(event) {
I'm having an issue with AJAX as for some reason it either isn't being called or isn't working
$(document).ready(function() {
$("#my_form").submit(function(event) {
alert("submited");
event.preventDefault("#my_form");
var post_url = $(this).attr("action"); //get form action url
var request_method = $(this).attr("method"); //get form GET/POST method
var form_data = $(this).serialize(); //Encode form elements for submission
alert(post_url + "" + request_method + " " + form_data);
$.ajax({
type: post_url,
url: request_method,
data: form_data,
success: function(data) {
alert(data);
$("server-results").html(data);
}
});
$('#loadingDiv').hide().ajaxStart(function() {
$(this).show();
});
//.ajaxStop(function() {
// $(this).hide();
//});
});
});
I've debugged as much as I could and there is no issue with the form function being activated in JavaScript or the 3 variables being transported into the JS code block. However ajaxStart doesn't activate which makes me believe that the problem is with just ajax.
I also checked the link to ajax and it seems to be working however I'm not sure if its the right link or if it's not valid for whatever reason.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
FYI the ajax link is at the top of the page above both HTML and JS.
You have passed wrong parameters:
type: post_url,
url: request_method,
You need to pass post_url in url and request_method in type. Just change it to:
type: request_method,
url: post_url,
$("server-results").html(data); here you have not specified if server-results is a class or id and therefore the output of the server will never be printed on the page
jQuery .ajaxStart()
As reported in jQuery's official documentation, the ajaxStart event can not be activated by the #loadingDiv element, but you must use the document.
$( document ).ajaxStart(function() {
$( ".log" ).text( "Triggered ajaxStart handler." );
});
Summing up the code should be something like this.
$(document).ready(function() {
$("#my_form").submit(function(event) {
alert("submited");
event.preventDefault("#my_form");
var post_url = $(this).attr("action"); //get form action url
var request_method = $(this).attr("method"); //get form GET/POST method
var form_data = $(this).serialize(); //Encode form elements for submission
alert(post_url + "" + request_method + " " + form_data);
$.ajax({
type: post_url,
url: request_method,
data: form_data,
success: function(data) {
alert(data);
$(".server-results").html(data);
}
});
$(document).ajaxStart(function() {
$('#loadingDiv').show();
});
.ajaxStop(function() {
$('#loadingDiv').hide();
});
});
});
I have the following code which is supposed submit a form via Ajax without having to reload the page:
$( document ).on('submit', '.login_form', function( event ){
event.preventDefault();
var $this = $(this);
$.ajax({
data: "action=login_submit&" + $this.serialize(),
type: "POST",
url: _ajax_login_settings.ajaxurl,
success: function( msg ){
ajax_login_register_show_message( $this, msg );
}
});
});
However for some reason, despite the event.preventDefault(); function which is supposed to prevent the form from actually firing, it actually does fire.
My question is, how do I prevent the above form from reloading the page?
Thanks
don't attach a listener on document instead use a on click handler on the submit button and change the type to button.
<button id="form1SubmitBtn">Submit</button>
$('#form1SubmitBtn').click(function(){
//do ajax here
});
Happy Coding !!!
for instance you can write like this
$(".login_form").on('submit', function( event ){
var $this = $(this);
$.ajax({
data: "action=login_submit&" + $this.serialize(),
type: "POST",
url: _ajax_login_settings.ajaxurl,
success: function( msg ){
ajax_login_register_show_message( $this, msg );
}
});
event.preventDefault();
});
You can use jquery and ajax to do that. Here is a nice piece code below that doesn't refresh the page but instead on submit the form gets hidden and gets replaced by a thank you message. The form data is sent to an email address using sendmail.php script.
Assuming your form has 3 input fields - name, email and message.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery("#button").click(function() {
var name=jQuery('#name').val();
var email=jQuery('#email').val();
var message=jQuery('#message').val();
var dataString = 'name='+ name + '&email=' + email + '&message=' + message;
jQuery.ajax({
type: "POST",
url: "sendmail.php",
data: dataString,
success: function() {
jQuery('#contact_form').html("<div id='message'></div>");
jQuery('#contactForm').hide();
jQuery('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>Thank you for your submission. We will be in touch shortly.</p>").hide()
.fadeIn(1500, function() {
});
}
});
return false;
});
});
</script>
On top of your form tag just add this to display the thank you message.
<div id='message'></div>
Enjoy coding!!!!!!!
I have a few forms on my single page and I'm submitting them by this method:
$(function() {
$(".button").click(function() {
var upform = $(this).closest('.upform');
var txt = $(this).prev(".tekst").val();
var dataString = 'tekst='+ txtr;
$.ajax({
type: "POST",
url: "http://url-to-submit.com/upload/baza",
data: dataString,
success: function() {
upform.html("<div class='message'></div>");
$('.message').html("<h2>FORM SUBMITTED</h2>")
.append("<p>THANKS!!</p>")
.hide()
.fadeIn(1500, function() {
$('.message').append("<img src='http://my-images.com/i/check.png' />");
});
}
});
return false;
});
});
As you can see, after submit a form, message div appears instead of submitted form.
It works perfectly, when I submit only one form - then it changes to my message div, but when I submit second, and next and next - every time ALL of my already submitted form's messages refreshing.
It looks bad. I want to operate only on actually submitting form. How to fix it?
Well you're setting the message of every .message div by using $('.message').html(). Try this:
upform.find('.message').html(...)
Hard to tell without seeing how your HTML looks but i'm guessing it's this bit,
$('.message')
Should be something like,
$('.message', upForm).
First you have to find out the message div (upform.find('.message')) and than add any html to it. i think your code should be
$(function() {
$(".button").click(function() {
var upform = $(this).closest('.upform');
var txt = $(this).prev(".tekst").val();
var dataString = 'tekst='+ txtr;
$.ajax({
type: "POST",
url: "http://url-to-submit.com/upload/baza",
data: dataString,
success: function() {
upform.html("<div class='message'></div>");
upform.find('.message').html("<h2>FORM SUBMITTED</h2>")
.append("<p>THANKS!!</p>")
.hide()
.fadeIn(1500, function() {
upform.find('.message').append("<img src='http://my-images.com/i/check.png' />");
});
}
});
return false;
});
});
Another way without editing more in your current code just add few lines.
var msgbox = $("<div class='message'></div>");
upform.html(msgbox);
msgbox.html("<h2>FORM SUBMITTED</h2>")
.append("<p>THANKS!!</p>")
.hide()
.fadeIn(1500, function() {
$(this).append("<img src='http://my-images.com/i/check.png' />");
});