Using AJAX to submit a dynamically filled form to two locations

Question

I am submitting a form that will need to go to 2 different locations. The form is hidden and auto filled with the jquery .val method. How would I write the ajax to submit this in 2 different locations? Am I able to do this if I don't have access to my server side settings?

Here is the Form I am submitting

<form action="x" method="post" class="form-inline">
      <input type="hidden" name="players_name" class="form-control" id="playersFullName_submit">
      <input type="hidden" name="players_email"class="form-control" id="playersEmail_submit">
      <input type="hidden" name="players_score" class="form-control" id="playersScore_submit">
      <input type="hidden" name="redirect_url" class="form-control" id="redirectURL_submit" value="x">
      <input id="submit endGame" type="submit" class="btn btn-default" value="Submit Your Score">
    </form>

Here is my jquery filling it out

 $(function () {      // fill form fields
   $('#playersFullName_submit').val(playersFullName);
   $('#p_name').append(playersFullName);
   $('#playersEmail_submit').val(playersEmail);
   $('#dateSubmitted').val(submitDate);
 });

Here is how I think I need to set it up

$.ajax({
           type: "POST",
           url : "url1.com",
           data: {},
           success: function(msg){
                 // get response here  
               }
           });

$.ajax({
           type: "POST",
           url : "url2.com",
           data: {},
           success: function(msg){
                 // get response here  
               }
           });

Would I need to enter anything into data, or will it pull it from my <form>?

In a way similar to how you filled the form on load. Rather than populating the form values for variables, you extract the data into an object and submit that object as your `data` parameter. — Ouroborus, Dec 06 '16 at 20:42
Possible duplicate of [jQuery AJAX submit form](http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form) — Heretic Monkey, Dec 06 '16 at 21:13

Scott Marcus · Accepted Answer · 2016-12-06T20:58:43.813

1

You need to get the form data and inject it into the AJAX calls in the data property. You can do this with JQuery's serialize() method:

// Get your reference to the form:
var theForm = document.getElementsByTagName("form")[0];

$.ajax({
           type: "POST",
           url : "url1.com",
           data: $(theForm).serialize(), // <-- Inject serialized form data
           success: function(msg){
                 // get response here  
               }
           });

$.ajax({
           type: "POST",
           url : "url2.com",
           data: $(theForm).serialize(), // <-- Inject serialized form data
           success: function(msg){
                 // get response here  
               }
           });

edited Dec 06 '16 at 20:58

answered Dec 06 '16 at 20:45

Scott Marcus

57,085
6
34
54

So the `.serialize()` will create it as a url? for example: `playersfullname&PlayersFullName` ? – knocked loose Dec 06 '16 at 20:50
@ether Well, that format isn't a URL - it's just an HTTP friendly concatenation of the name/value pairs. Because you have indicated you are making POST requests, the data will travel as name/value pairs, but the won't be added to the URL. However, if you made a GET request, then the form data would be appended to the URL as a querystring like you've shown. However, you can't just choose POST or GET - the server must be expecting the data to be sent that way. – Scott Marcus Dec 06 '16 at 20:53
@ether If you want to see what the data looks like, you can simply add a temporary `console.log($(theForm).serialize())`. Again, with a POST request, this string won't be appended to the URL, it will be sent as a separate stream. – Scott Marcus Dec 06 '16 at 20:55
Alright, this seems like my best choice. I can name my form using jquery, correct? Or does it have to be done in vanilla javascript? Also, if I wanted to redirect to a page when completed, that would be in my `success:` field, correct? – knocked loose Dec 06 '16 at 20:57
You name your form in the HTML with the `id` attribute. Yes, you can redirect in the success callback. – Scott Marcus Dec 06 '16 at 21:00
Awesome, thank you so much! Also, I mean name it as in, get it by doing `var form = $('#theForm');` – knocked loose Dec 06 '16 at 21:01
1

You can get a reference to your form using many different techniques (by `id`, by `class`, by element type (form), etc.. Yes, you can use JQuery (same choices as without), but that's not necessary at all. – Scott Marcus Dec 06 '16 at 21:32

score 0 · Answer 2 · answered Dec 06 '16 at 20:46

b/c you are submitting ajax not form, you need to prevent form form action submitting, declare you server side route in ajax instead.

$('#submit_btn').on('click', function(e) {

    e.preventDefault(); // you need this so the form don't submit

    $.ajax({
       type: "POST",
       url : "url1.com",
       data: {},
       success: function(msg1){
             var msg1; 
           }
       });

    $.ajax({
       type: "POST",
       url : "url2.com",
       data: {},
       success: function(msg2){
             var msg2; 
           }
       });
});

score 0 · Answer 3 · answered Dec 06 '16 at 20:46

$.ajax({
           type: "POST",
           url : "url1.com",
           data: $('.form-inline').serialize(),
           success: function(msg){
                 // get response here  
               }
           });

$.ajax({
           type: "POST",
           url : "url2.com",
           data: $('.form-inline').serialize(),
           success: function(msg){
                 // get response here  
               }
           });

score 0 · Answer 4 · answered Dec 06 '16 at 21:05

In case you have to find yourself having to send to many urls...

var theForm = document.getElementsByTagName("form")[0],
    urls = ['url1.com','url2.com', ....];

$.each(urls, function(index,value){ 
   $.ajax({
      type: "POST",
      url : value,
      data: $(theForm).serialize(),
      success: function(msg){
           // get response here  
      }
   });
});

Using AJAX to submit a dynamically filled form to two locations

4 Answers4