How to use AJAX for my form

Question

I am trying to understand how to send two arrays to my php script using AJAX, initially i was simply allowing the page to reload.

I have started implementing the AJAX call however i am just confused on how to send the two arrays. Also how i would use the data in my php file. This is what i have so far :

<head>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>

<form method="post" action="submit.php" >

<input id="name" type="text" name="name[]" class=""/>
<input id="amount" type="text" name="amount[]" class=""/>

<button type="submit"  class="btn btn-primary btn-lg btn-block sendTheForm" name="sending" >Submit</button>

</form>

<script>

$(document).on('click', '.sendTheForm', function(){  

    $.ajax({  
       url:"submit.php",  
       method:"POST",  
       data:{},  
       success:function(data){

            swal({
               title: "Submitted",
               text: "sucessfully sent",
               icon: "success",
            });

        }  
     });  
  }

});
</script>

Any help on this would be greatly appreciated and hopefully i will learn a thing or two!

Muhammad Usman · Answer 1 · 2017-11-19T01:32:57.697

var nameArrays = [];
function getArray(){
var inputs = document.querySelectorAll("#form input[name='name[]']");
for(var i=0; i<inputs.length; i++)
nameArrays.push(inputs[i].value)
console.log(nameArrays)
}

<form id="form">
<input type="text" name="name[]" value="Name1" /> 
<input type="text" name="name[]" value="Name2" /> 
<input type="button" onclick="getArray()" />
</form>

var array1 = ['a','b', 'c'],
array2 = ['d', 'e', 'e'];

$(document).on('click', '.sendTheForm', function(){  

        $.ajax({  
             url:"submit.php",  
             method:"POST",  
             data:{ array1 : array1, array2: array2},  
             success:function(data){

                swal({
                    title: "Submitted",
                    text: "sucessfully sent",
                    icon: "success",
                });

             }  
        });  
   }

 });

Ps. If you want to send the form data as JSON you can use Jquery serialize like

 $.ajax({  
             url:"submit.php",  
             method:"POST",  
             data: $("#formId").serialize(),  
             success:function(data){}
})

Thanks for your answer, how would i grab the two arrays in my form name[] and amount[] and send it off? I would like to avoid sending by JSON if possible — GrandeurH, Nov 19 '17 at 01:24
I've added a `snippet` to show how you can grab that array. Now you can do anything with it. send it as json and if you don't want that, just change the `contentType`. You can read more about datatype and contentType [here](https://stackoverflow.com/questions/18701282/what-is-content-type-and-datatype-in-an-ajax-request) — Muhammad Usman, Nov 19 '17 at 01:37

score 0 · Answer 2 · answered Nov 19 '17 at 01:15

0

With jquery, On your $.ajax call try like this using serialize(). See more about serialize and serializeArray

       $.ajax({  
             url:"submit.php",  
             method:"POST",  
             data: $("form").serialize(),
             contentType: "application/json; charset=utf-8",
             dataType: 'json',
             success:function(data){
             // do what you want to do after ajax success
             }  
        });

answered Nov 19 '17 at 01:15

A l w a y s S u n n y

36,497
8
60
103

Thanks for your answer, is there a way in which i can just send it off without using JSON? – GrandeurH Nov 19 '17 at 01:26
just remove that `contentType` – A l w a y s S u n n y Nov 19 '17 at 01:32

How to use AJAX for my form

2 Answers2