Pass Form Data with Query String Parameters

Question

I'm using $.ajax to post two form select values and trigger a reinstall event, but I cannot pass the Form Data values.

This is my click.function

$('button.submitForm').click(function (event) {
     event.preventDefault()
     var form = $(this.form)
     var formCont = new mgFormControler(form.attr('id'))
     var formData = formCont.getFieldsData()

     $.ajax({
          url: form.attr('action') +
               '&loadData='+ form.attr('index') + 
               '&namespace='+ form.attr('namespace') +
               '&index='+ form.attr('index') +
               '&ajax=1' +
               '&mgformtype=' + form.attr('mgformtype'),
               type: form.attr('method'),
               processData: false,
               contentType: false,
               data: formData
          }).done(function (data) {
               console.log(form.attr('id'))
               console.log(form.attr('namespace'))
               data = data.data
               if (data.status === 'success') {
                    console.log(data.status + ': ' + data.message)
               } else {
                    console.log(data.status + ': ' + data.message)
               }
          });
     });
});

The header in dev.tools (first image) shows that formData passes as object in Query String Parameters, but I want to pass it as a separated element (second image)

I tried new FormData() but I always get the same result with object (first image).

Geovani Santos · Accepted Answer · 2020-07-21 11:02:40Z

2

try use in your code:

    type: 'POST',
    data: jQuery.param({ field1: "hello", field2 : "hello2"}) ,
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',

answered Jul 21, 2020 at 11:02

Geovani Santos

3911 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Priestakos Over a year ago

I passed data: jQuery.param({ "formData[osTemplate]": "archlinux-installer_64", "formData[language]": "en"}) without contentType and it worked. Thank you @geovani-santos

user13966865 · Accepted Answer · 2020-07-21 11:01:39Z

0

Try JSON.stringify()

$('button.submitForm').click(function (event) {
 event.preventDefault()
 var form = $(this.form)
 var formCont = new mgFormControler(form.attr('id'))
 var formData = formCont.getFieldsData()

 $.ajax({
      url: form.attr('action') +
           '&loadData='+ form.attr('index') + 
           '&namespace='+ form.attr('namespace') +
           '&index='+ form.attr('index') +
           '&ajax=1' +
           '&mgformtype=' + form.attr('mgformtype'),
           type: form.attr('method'),
           processData: false,
           contentType: false,
           data: JSON.stringify(formData) //add this
      }).done(function (data) {
           console.log(form.attr('id'))
           console.log(form.attr('namespace'))
           data = data.data
           if (data.status === 'success') {
                console.log(data.status + ': ' + data.message)
           } else {
                console.log(data.status + ': ' + data.message)
           }
      });
 });
});

answered Jul 21, 2020 at 11:01

user13966865

4685 silver badges14 bronze badges

3 Comments

John Priestakos Over a year ago

It passes {}.

user13966865 Over a year ago

it means formdata object is empty you can test by adding hardcoded value to formdata by using formdata[key]=value;

John Priestakos Over a year ago

I just did data: jQuery.param({ "formData[osTemplate]": "archlinux-installer_64", "formData[language]": "en"}) and it worked

Collectives™ on Stack Overflow

Pass Form Data with Query String Parameters

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related