JQuery AJAX submit form

Question

JQuery AJAX submit form

I have a form with name orderproductForm and an undefined number of inputs.

I want to do some kind of jQuery.get or ajax or anything like that that would call a page through Ajax, and send along all the inputs of the form orderproductForm.

I suppose one way would be to do something like



jQuery.get("myurl",

          {action : document.orderproductForm.action.value,

           cartproductid : document.orderproductForm.cartproductid.value,

           productid : document.orderproductForm.productid.value,

           ...

However I do not know exactly all the form inputs. Is there a feature, function or something that would just send ALL the form inputs?

ajax jquery javascript

4 years ago by akshay1995

2 Answers

Login / Signup to Answer the Question.

Login Signup

**aashaykumar** · Answer 1 · 2021-05-19T11:26:48

This is a simple reference:



// 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.

           }

         });



    

});

**kshitijrana14** · Answer 2 · 2021-05-20T13:36:13

Another similar solution using attributes defined on the form element:

<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>

C TUTORIAL

C PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

C++ TUTORIAL

C++ PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

PYTHON TUTORIAL

PYTHON HOW TOS

INTERVIEW TESTS

EXECUTE CODE

JAVA TUTORIAL

JAVA CODE EXAMPLES

SPRING TUTORIAL

MORE IN JAVA

COMPUTER ARCHITECTURE

COMPUTER NETWORK

OPERATING SYSTEM

DBMS & SQL

PL/SQL

MongoDB

EXECUTE SQL

ANDROID DEVELOPMENT

GO LANGUAGE

LINUX

DOCKER

HTML TAGS (A to Z)

CSS REFERENCES

SASS/SCSS

KOTLIN

GAME DEVELOPMENT

PHP

GIT GUIDE

JAVASCRIPT

ADVANCED DSA

JQuery AJAX submit form

2 Answers

Login / Signup to Answer the Question.