0

I have an ASP.NET project that is currently making use of JQuery and Bootstrap to create a front-end. One part of this front-end involves the user filling out a form made up on 30+ input elements, which then needs to be submitted to a back-end API.

Usually if I needed to communicate with an API I would use JQuery's built in post() and post() methods, and constructing a query string to use within these methods.

However since there is a large amount of input elements associated with this form, I am hesitant to make use of this particular approach as it seems like a very messy and roundabout way to submit the data to the API.

Unfortunately the usual <input action="action.xx"> approach is not available to me in this particular situation, so submitting the form as a whole is not a possibility.

However I really don't want to do something like this below:

queryString = 
"?input1=" + $("#input1").val() + 
"&input2=" + $("#input2").val() ... //repeat for 30+ input elements

$.post(url + queryString, funtion(data){ ... });

Surely there must be a better way to go about solving this particular issue that doesn't involve creating an abhorrently large string and passing it through JQuery's post method?

Jake12342134
  • 1,539
  • 1
  • 18
  • 45
  • 1
    My first question would be why you're sending a POST request with a blank body but tons of GET params? Anyway, what are the names of these inputs? Are they following the convention of `inputX`? Do they have a common class? –  Mar 06 '19 at 11:15
  • @ChrisG Not sure I understand what you mean exactly by the first question. They have a relatively common ID naming convention, no common class but I could put one in relatively easily. – Jake12342134 Mar 06 '19 at 11:16
  • 1
    A POST request has its query string in the body. You are putting them in the URL, which means they're GET params. You basically need `$.post(url, queryString, ...)` where `queryString` doesn't have the `?` at the start. –  Mar 06 '19 at 11:17
  • You can either send the whole form or populate an object yourself. *Surely there must be a better way to go about solving this particular issue* no, not really. If you want to do something not standard then you have to write it yourself! – Liam Mar 06 '19 at 11:19
  • @ChrisG Ah, apologies. No you're correct they'd be sent through the body, wasn't thinking as I was writing up the question – Jake12342134 Mar 06 '19 at 11:19
  • I believe there is a limit in the URL length of about 2k characters so you might be having issues specifying all the relevant data in the querystring to begin with. You could look into posting the data using ajax. – Nope Mar 06 '19 at 11:21
  • [Querystring length question here](https://stackoverflow.com/questions/812925/what-is-the-maximum-possible-length-of-a-query-string). Make of that what you will – Liam Mar 06 '19 at 11:24
  • @Nope OP is already using AJAX; data is supposed to go into POST body anyway –  Mar 06 '19 at 11:26
  • Here's a manual way: https://jsfiddle.net/khrismuc/85wkcbn0/ (if `$form.serialize()` is unsuitable) –  Mar 06 '19 at 11:27
  • @ChrisG Yeah, I was trying to refer to using the data property in the ajax call instead of the querystring. I could have worded it better, sorry :) – Nope Mar 06 '19 at 12:29

1 Answers1

0

Give every input a name attribute instead (the same name you want to use for the query string), and then call .serialize() on the form to generate the query string:

$('form').on('submit', function(e) {
  e.preventDefault();
  console.log($(this).serialize());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input name="inp1">
<input name="inp2">
<input name="inp3">
<button>submit</button>
</form>

Or, if you can't do that, and you want a shorter, less error-prone way of generating the string than what you're using now, iterate over an array of selectors and grab each's .val(), then join by &s:

const ids = ['input1', 'input2', 'input3'];
const queryString = ids.map(id => $('#' + id).val()).join('&');
CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
  • 1
    I wanted to post this but OP said `so submitting the form as a whole is not a possibility` (if he meant "I must use AJAX" then this is obviously the solution indeed) –  Mar 06 '19 at 11:18
  • No AJAX is definitely an option, I just meant using the normal `action` attribute to submit the form isn't an option. – Jake12342134 Mar 06 '19 at 11:21
  • 1
    @Jake12342134 You can serialize the form and submit it to whatever URL you want using Javascript (like with your `$.post`) - you aren't constrained by an `action` attribute (or lack thereof) on the form element. – CertainPerformance Mar 06 '19 at 11:23