Welcome to the Small Business Ideas Forum! We are a community of over 100,000 small business folks with over 163,000 posts for you to browse. We pride ourselves on being the friendliest forum you will find and we'd love to have you as a member of our community. Please take a moment and register for a free account. If you need any help, please contact Chris Logan.

Small Business Ideas Forum

Small Business Ideas Forum

A friendly place to share small business ideas and knowledge, ask questions, find help and encourage others that are involved in the small business industry. Topics include small business marketing, generating revenue and small business computing.

Go Back   Small Business Ideas Forum > Small Business Computing > Website Development
Register Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
Old 22nd June 2013, 02:38 PM   #1
binarynpixel
Banned
 

Join Date: Apr 2013
Location: Sydney
Posts: 36
Default Submit A Form Without The Page Reload

Hi everybody,
Please help me to make form submission without reload the page using ajax. please share your suggestion.
Thanks.

binarynpixel is offline   Reply With Quote
Register or log in to remove this ad.
Old 23rd June 2013, 08:47 AM   #2
wed123
Member
 

Join Date: Apr 2013
Posts: 16
Default Ajax form submission

Hi,
You probably want something like this:

$.ajax({
type: "POST",
url: "scripts/contact.php",
data: "username=dave&[email protected]", // replace with form variables
success: function() {
$('#myForm').html("<div id='message'></div>");
$('#message').html("<h1>Form Submitted</h1>")
});
}
});
return false;

__________________
Wedding Invitations | Wedding Candles
wed123 is offline   Reply With Quote
Old 24th July 2013, 01:50 AM   #3
josephlimma
Member
 
josephlimma's Avatar
 

Join Date: Jun 2013
Posts: 11

Default

Create a Forum
<form action="submit.php" method="post">
Name: <input name="name" id="name" type="text" /><br />
Email: <input name="email" id="email" type="text" /><br />
Phone Number: <input name="phone" id="phone" type="text" /><br />
<input type="button" id="searchForm" onclick="SubmitForm();" value="Send" />
</form>


JavaScript Library Include
<script src="http://code.jquery.com/jquery-latest.js"></script>



JavaScript Code
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
function SubmitForm() {
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
$.post("submit.php", { name: name, email: email, phone: phone },
function(data) {
alert("Data Loaded: " + data);
});
}
</script>


<?php
echo $_POST['name']."<br />";
echo $_POST['email']."<br />";
echo $_POST['phone']."<br />";
echo "All Data Submitted Sucessfully!"
?>

josephlimma is offline   Reply With Quote
Old 4th November 2013, 08:05 AM   #4
astralgirl
Member
 

Join Date: Nov 2013
Posts: 13
Default

Please use contact form 7. Once you hit submit button it sends the message without reloading a page.

If you want to send user to a payment page (paypal) there is a simple code that you need to add in the contact form 7 settings page.

Code:
on_sent_ok:”location.replace(‘https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=YourBuyNowButtonID’);”
You can also find video tutorials on youtube.

astralgirl is offline   Reply With Quote
Old 4th December 2013, 11:02 PM   #5
StupidScript
Administrator
 
StupidScript's Avatar
 

Join Date: Jul 2004
Location: Los Angeles
Posts: 604
Default If I could upvote ya ... I would

josephlimma has provided the best answer. wed123 is a pretty good one, too.

jQuery is well-tested in this area and works perfectly.

A couple of notes ... you'd want a different notification method than the one joseph used, probably a Javascript modal window or an alert or populating a div like wed123 did, to notify the user that their request was successful using the "success" jQuery response in the ajax call, as wed123 notes. The PHP solution joseph provided isn't quite what you need, because in order to render the PHP variables, the page would need to be re-compiled at the server ... and reloaded in the browser. Gotta keep it client-side!

Since there is no "submit" button, joesph's form would not actually be submitted in normal use. But it could be accidentally submitted by using the Enter key, which would mess the page experience up.

Since the jQuery he used does not rely on the form (it uses the id's), it can be done away with, in a technical sense:

Code:
Name: <input id="name" type="text" /><br />
Email: <input id="email" type="text" /><br />
Phone Number: <input id="phone" type="text" /><br />
<input type="button" id="searchForm" onclick="SubmitForm();" value="Send" />
or even

Code:
Name: <div id="name" class="textField"></div><br />
Email: <div id="email" class="textField"></div><br />
Phone Number: <div id="phone" class="textField"></div><br />
<input type="button" id="searchForm" onclick="SubmitForm();" value="Send" />
That last bit requires some effort to get the div's to seem to accept input, and the script would need to be modified to grab the innerHTML, instead of the value ... but you can see the possibilities.

THAT BEING SAID ... I would still use joseph's solution with elements of wed123's ajax call and browser detection to display either the BUTTON or SUBMIT button, as appropriate for older browsers that can't handle the jQuery for some reason, to handle the accidental Enter keys. Sure, the page will reload ... but you got the form data you needed, and no harm done.

__________________
James Butler - "Do no weevils"
JamesButler.net
MusicForHumans.com
StupidScript is offline   Reply With Quote
Old 1st March 2014, 02:48 PM   #6
sb1 design
Member
 
sb1 design's Avatar
 

Join Date: Apr 2013
Location: London
Posts: 86
Send a message via Skype™ to sb1 design
Default

For anyone reading that has a Wordpress based website, I would also recommend Contact Form 7. As Astralgirl states, the plugin works in a way that does not require the page to reload to send the message.

It is a very simple to use, yet versatile contact form plugin.

sb1 design is offline   Reply With Quote
Old 1st July 2014, 04:23 PM   #7
lawebdesign
Member
 

Join Date: Jun 2014
Posts: 43
Default

+1 for Contact Form 7 as a free option on wordpress sites.

But I would strongly recommend checking out Gravity Forms which is a paid option.

lawebdesign is offline   Reply With Quote
Reply   

Bookmarks


Similar Threads
Thread Thread Starter Forum Replies Last Post
Foolproof & Sure-Fire Way To Rank First Page In Google Jaime M. Search Engine Optimization 9 26th January 2016 05:43 PM
The Success Of Your E-commerce Web Design Depends On The Product Page acwebguru Website Development 2 13th May 2013 10:30 AM
Facebook Profile Or Page For Business? KirkEisele Social Media 30 15th November 2012 10:58 AM
How To Increase Page Rank Of Website! seowebtech Search Engine Optimization 40 26th February 2010 12:47 AM
No ranking... anywhere... lfranzman Search Engine Optimization 4 3rd January 2006 09:16 AM



Thread Tools

Get Updates
RSS Feeds:
RSS Feed for Website Development RSS for this Category Only: Website Development

RSS Feed for Small Business Ideas Forum RSS for Entire Forum
Forum Rules


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


Small Business Ideas Forum


 
At Your Business - Small Business Directory
Free Business Forms - Prewritten Documents
 
Search Engine Guide
Small business guide to search marketing

 
Small Business Brief
Fetching the Best Small Business Info


Free Links - Free Advertising
Free Guide - Online Directory



Advertise your business here
Contact us for more details!


Semantic Juice
Register now to access free Quick SEO service!


Rocket Lawyer
Sign up for free 7 day trial. Boost your biz!


Buy UPC Codes
Get your products listed online!




All times are GMT -5. The time now is 10:18 PM.


Powered by vBulletin® Version 3.7.3
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
Copyright 2004 - 2018 - Privacy