Sign in Get Started

Submit AJAX Forms with JQuery to database

Joseph Shuffield 
$(function() {
  $('form.my_form').submit(function(event) {
    event.preventDefault(); // Prevent the form from submitting via the browser
    var form = $(this);
    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: form.serialize()
    }).done(function(data) {
      // Optionally alert the user of success here...
    }).fail(function(data) {
      // Optionally alert the user of an error here...
    });
  });
});
View another examples Add Own solution
Log in, to leave a comment

4.2
10
Midnight srar 70 points 

                                    <form id="contactForm1" action="/your_url" method="post">
    <!-- Form input fields here (do not forget your name attributes). -->
</form>

<script type="text/javascript">
    var frm = $('#contactForm1');

    frm.submit(function (e) {

        e.preventDefault();

        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
        });
    });
</script>

4.2 (10 Votes)
0
3.33
3
Lee TY 90 points 

                                    // Database Structure 
CREATE TABLE `contacts` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` text NOT NULL,
 `email` text NOT NULL,
 `reason` text NOT NULL,
 `message` text NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1

<?php
if(isset($_POST['submit_contact']))
{
 $name=$_POST['name'];
 $email=$_POST['email'];
 $reason=$_POST['reason'];
 $message=$_POST['message'];
	
 $host="localhost";
 $username="root";
 $password="";
 $databasename="sample";
 $connect=mysql_connect($host,$username,$password);
 $db=mysql_select_db($databasename);
 
 mysql_query("insert into contacts values('','$name','$email','$reason','$message')");
 echo "submitted";
 exit();
}
?>

3.33 (3 Votes)
0
Are there any code examples left?
Find Add Code snippet
New code examples in category Javascript
SHOW MORE
Create a Free Account
Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.
Sign up
Develop soft skills on BrainApps
Complete the IQ Test
Relative searches
submit form hay ajax ajax call on submit form send form data through ajax how to submit form data in ajax send data form with ajax form submit from ajax ajaxform submit from submit from ajax best way to send form by ajax ajax send formData post data in ajax call form sending form data through ajax submit form with jquery ajax how to send html form data to ajax submit data from javascript ajax ajax form submit post how to perform a form submit in ajax submit from data ajax ajax data from form form data to ajax data get ajax data from form send the form data using ajax jquery how to send form data in ajax submitting a form using ajax send form data via ajax jquery pass form data in ajax jquery using formdata ajax get data of submit form ajax to submit form usisng ajax form tag in html is necessary? ajax send form data in jqury jquery ajax form submit example php database form to ajax send data form ajax sending formdata with ajax form data pass by ajax ajax to send form data send form data with ajax jquery jquery ajax form with data ajax submit a form how to send form data using ajax in jquery ajax rtequest form data button click ajax form submit on submit request with ajax how to submit form within a form using ajax submit a form using ajax post form-data ajax post form data using ajax ajax formdata post submit submit form with ajax ajax for form submission submit form submission ajax how to send form data using ajax javascript how to add form data in ajax post jquery ajax form submit post formdata send ajax jquery javascript ajax request form data how to form submit using ajax post a form with ajax button press form submit ajax ajax code for form submission form data with ajax request form only post through ajax how to submit form in jquery ajax on form submit jquery ajax form data in jquery ajax submit submit ajax form from js get data from form and submit by ajax jquery post form data in jquery ajax php ajax send form data submit form data using ajax jquery formdata and ajax send complete form data in ajax submit type with value send in ajax new form data ajax post form values using ajax javascript ajax post with form data mvc ajax form submit form submission using ajax form on submit js ajax submit forms.form with ajax ajax call with form data how to connect ajax form with database ajax for submit form send form in ajax how to use ajax to submit form html ajax form submit send form data using ajax jqyery jquery ajax form on submit ajax call form data post formdata using ajax ajax data form form from ajax how to show form data send through ajax ajax submit form to database pure javascript -jquery ajax submit form to database ajax form submit with action sending form data using ajax send data using formdata ajax submit html form with ajax ajax form send Submit form thru ajax ajax jquery form submit post a form via ajax formData in jquery ajax submit how to make ajax form submit jquery ajax submit form data sending form in ajax sending form in ajax data jquery how to send form data via ajax send form via ajax ajax pass form in data how to post form data in javascript in ajax how to submite forms using ajax form submit ajax jquery $.ajax form data submit form ajax jquery example ajax button submit send form ajax my ajax form submit shows me all html code in response ajax post form data example use ajax form submit query ajax mysql in form data $(form).data in ajax ajaxForm on submit jquery form ajax submit pass ajax data to form field how to put ajax data to form js send form data via ajax js ajax formdata submit send ajax form send data along with form data using ajax ajax form on submit send form data using ajax post method submit form via ajax jquery get post formdata ajax ajax send form data js send form data ajax ajax form submit jquery example ajax send form inputs ajax call for form ajax submit form and get response why form is submitting when calling one ajax from form fields ajax.send(formdata) pass form data in ajax ajax get request on form submit send action along with formdata on ajax submit jquery submit form via ajax ajax post data from form form data objec ajax how to pass form data with ajax post data using formdata in ajax form data post request in ajax form submit using ajax jquery jquery submit form ajax on button click form submit with ajax why ajax is submitting my form? form ajax submit jquery input type submit ajax how to submit form with ajax how to take data from form in ajax send form data in ajax jquery how to form submit in ajax submit html form using ajax how to submit form through ajax send form with js ajax how to pass form data in jquery ajax send form ajax formdata and data ajax post request exposes form data submit button in ajax form data con ajax form submit ajax call form submit result as ajax ajax form data post sample form data ina ajax js ajax submit form data with vanilla js js ajax submit form data with vanilla submit form javascript ajax ajax code for submitting form data with an alert form on submit with ajax to submit a form with Get using ajax form submit with jquery ajax form data in ajax request ajax post form data request form submit through ajax ajax submit the form data ajax form submission form with response ajax request get form values and submit ajax jquery How to send a form-data in jquery ajax post form data ajax jquery ajax submit handler form ajax send data as form send form data via ajax javascript ajax submit ajax get form data and submit send form data in ajax request send form data in ajax ajax instead of form submit submit all form data using ajax using formData on ajax request submit form jquery ajax send form data via ajax form data in ajax post submit inputs with ajax jquery ajax send form data form submit ajax form submit ajax form submit example sending ajax action from a form submission submit form ajax ajax form submit in html pshr submit formdata with ajax ajax to post form data ajax form data post jquery submition of form using ajax ajax send form data jquery use ajax to submit form js submit form ajax formData Ajax jquery submit form data using ajax w3school submit data using ajax submit a form with ajax ajax submit post request.form ajax using ajax to get form data jquery send form data ajax submitting for ajax jquery post form data ajax ajax post request using form data ajax use form data post submit ajax form submit using ajax form data in ajax ajax jquery to send form data form data ajax how to submit form data using ajax jquery ajax formdata post data ajax submit form js form submit ajax and api ajax.submit js ajax submit form to database jquery ajax form submit example js ajax submit form ajax submit form data formData in ajax jquery ajax form submit submitting forms with ajax take form data in ajax call ajax post form data form with ajax response pass form data through ajax how to submit ajax form using jquery form ajax submit in form data action in ajax ajax form submit jquery jQuery form submit ajax\ ajax on submit send a form with ajax how to send ajax form data jquery submit form by ajax formdata ajax post form submit fire ajax ajax form inside form formdata with ajax jQuery submit form ajax send formdata using ajax send form using ajax submit form using ajax jquery Submit AJAX Forms with JQuery to database display how to send form data using jquery ajax Submit AJAX Forms with JQuery to database ajax form data send form data using ajax jquery ajax formdata example receive post data in ajax on submit form call ajax while submit form send data with form data ajax submit a post via ajax how to use form data in an ajax call form submit via ajax pass form data ajax how to submit the formdata using ajax how to submit the form data using ajax how send form data in ajax send a form data ajax which method uses ajax submit ajax javascript post form data ajax formdata ajax send form ajax formdata request how to use ajax form submit submit form using ajax javascript to database ajax post formdata jquery ajax submit post data from form how to submit a form using ajax how to submit using ajax post form jquery ajax jquery ajax form data ajax form data send how to submit form to database using ajax send form with ajax submit form ajax jquery ajax send data from form form submit ajax submit ajax form javascript mvc submit form to database using ajax jquery form submit using ajax how to ajax submit how to send form data using ajax form submit by ajax submit form using ajax ajax request jquery for form submit how to send form data in ajax ajax success submit form submit form using ajax post submit form data to url ajax ajax jquery submit form ajax submit form ajax submitted form data submit form withou ajax which is better submitting data using form or ajax? form submit ajax call in jquery submit form through ajax send a form in ajax request form submit jquery ajax jquery ajax request form data how to submit data using ajax ajax request jquery form data ajax post but submit form data ajax form submitting jquery ajax submit form submit ajax form on button click ajax request form data how o send form data in ajax make form submit ajax ajax used in form submit form submit and display data using ajax javascript ajax post form data submit form via ajax submit data using jquery ajax formdata and ajax post ajax form data post ajax form submit how to send form data with ajax ajaxform submit program ajax create form and submit jquery form submit ajax js send form data in AJAX ajax send complete form data ajax post request form data ajax from submit dataType form form data send in ajax ajax call on submit form submit jquery ajax example how to pass the form data in ajax on form submit ajax how to post form data using ajax form data submit using ajax post form data using ajax jquery submit form using jquery ajax js ajax form submit SEND form data over ajax send form data ajax jquery send form data ajax send formdata with ajax ajax post form submit full form submit with ajax submit form data using ajax form data jquery ajax ajax submit pass data submit the form using javascript ajax submit form using ajax javascript form data pass in ajax use ajax to submit form to an api how to pass form data in ajax how to submit form in ajax post form data ajax send form data with ajax how to submit form in ajax response form data ajax post form-data ajax $ form-data ajax submit input on ajax send formdata via ajax jquery form handling with php send form from js to php submit form ajax php get the post data in php ajax form submit get the data in ajax form submit php php form submit ajax ajax post data get in php from ajax form submit how to submit form only ajax php ajax form submit send form data through ajax jquery ajax form submit php ajax form submission data type ajax data without form submit submit data using ajax jquery submit ajax form jquery form data ajax how to retrieve and send form value with ajax how to submit form using ajax send form data using ajax jquery ajax call for submit button jquery ajax form submit example php ajax send form data to php send data with file of form on submit jquery ajax with FormData send data on form submit jquery ajax submit form with file using ajax how to get form data in php using ajax get data from form ajax php form submit using ajax
Made with love
This website uses cookies to make IQCode work for you. By using this site, you agree to our cookie policy

Welcome Back!

Sign up to unlock all of IQCode features:
  • Test your skills and track progress
  • Engage in comprehensive interactive courses
  • Commit to daily skill-enhancing challenges
  • Solve practical, real-world issues
  • Share your insights and learnings
Create an account
Sign in
Recover lost password
Or log in with
Not registered?
Sign up takes less than a minute

Create a Free Account

Sign up to unlock all of IQCode features:
  • Test your skills and track progress
  • Engage in comprehensive interactive courses
  • Commit to daily skill-enhancing challenges
  • Solve practical, real-world issues
  • Share your insights and learnings
Create an account
Sign up
Or sign up with
By signing up, you agree to the Terms and Conditions and Privacy Policy. You also agree to receive product-related marketing emails from IQCode, which you can unsubscribe from at any time.
Creating a new code example
Code snippet title
Source