AJAX - Classic ASP - Post a Form

Question

I have a TEST.ASP with this code:

<HTML>
<HEAD>
    <SCRIPT src="ajaxScript.js" type="text/javascript"></SCRIPT>
</HEAD>
<BODY>
    <FORM action="action_page.asp" method="post">
        First Name:<BR>
        <INPUT type="text" name="FName"><BR>
        Last Name:<BR>
        <INPUT type="text" name="LName"><BR>
        <INPUT type="submit" value="Submit">
        <BUTTON type="button" onClick="loadXMLDoc('action_page.asp',this.form);">GoGoGo!</BUTTON>
    </FORM>
    <DIV id="msgBoxDiv">TEST!!</DIV>
</BODY>
</HTML>

The Javascript file that is called (ajaxScript.js) has this code:

var req; // global variable to hold request object

function processReqChange()
{
    if (req.readyState == 4 && req.status == 200){document.getElementById("msgBoxDiv").innerHTML = req.responseText;}
}

function loadXMLDoc(url, params)
{
    if(window.XMLHttpRequest)
    {
        try
        {
            req = new XMLHttpRequest();
        } catch(e)
            {
                req = false;
            }
    }
    else
    {
        req = false;
    }

    if(req)
    {
        var formData = new FormData(params);

        req.onreadystatechange = processReqChange;
        req.open("POST", url, true);
        req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        req.send(formData);
        return true;
    }
    return false;
}

And my "action_page.asp" to receive the parameters is like so:

<%
    vRF1 = request.Form("FName")
    vRF2 = request.Form("LName")
%>

<HTML>
    <HEAD>

    </HEAD>
    <BODY>
        First:<%=vRF1%><BR>
        Last:<%=vRF2%>
    </BODY>
</HTML>

If I make the normal submit (submit button), everything goes as expected: it shows a new page with the values of the form.

BUT... if I try to read the target ASP with AJAX (gogogo button), I can't send the form to the target page. I do receive the target page, but without the supposed values. I get this:
Result page

If I change "req.send(formData);" for " req.send("FName="+1+"&LName=QWER");", everything works well.

I've read that to send the entire form (like the "usual" post do), I just need to make "var formData = new FormData(params);" where params would be the form object, and then send the FormData(params).

What may I be doing wrong here?

var formData = new FormData(params); try > console.log(formData); check value to post — jupeter, Apr 08 '16 at 02:18
Might find this article useful - [Easier Ajax With the HTML5 FormData Interface](http://www.sitepoint.com/easier-ajax-html5-formdata-interface/) - Has a "vanilla" approach to using `FormData` to pass the data correctly using `application/x-www-form-urlencoded`. — user692942, Apr 08 '16 at 15:55
@Lankymart Don't you want to write that as an answer? That way I could give you credit for it! — Fernando, Apr 11 '16 at 01:27

score 3 · Accepted Answer · answered Apr 20 '16 at 01:40

I didn't want to leave this without an answer.

Lankymart gave the path to the right answer... the truth is, when I submitted the "new FormData(formID)" I was sending in multipart/form-data and not application/x-www-form-urlencoded as I was declaring.

SO... We can make the hypothesis Lankymart indicated (application/x-www-form-urlencoded). In other words, you just take my initial question, and in req.send(); you have to form the string of the parameters to pass (just like in a GET request). "name1="+param1+"&name2="+param2. I opted by this one, because, for what I needed, this was more than enough.

OR... If we do need/wish to send the form - req.send(formData)... that will produce a multipart/form-data (check an example of the format of a multipart/form-data here: http://www.codeproject.com/Articles/1125/Advanced-ASP-Uploader) In this case... you have to build a parser for the info. Here is what I've coded (just to try a thing or two):

Function StoreNameAndValues(tempVarArray)
    Dim tempVar

    for i = 1 to ubound(tempVarArray)-1
        if tempVarArray(i)<>"" then
            tempVar=Split(tempVarArray(i), """")

            if ubound(tempVar)>1 then
                postNamesArray(i-1)=tempVar(1)
                postValuesArray(i-1)=StripString(tempVar(2),CHR(13)&CHR(10))
            End if
        End if
    next
End Function


tempVar=Request.TotalBytes
tempVar1=Request.BinaryRead(tempVar)

tempVar1=SimpleBinaryToString(tempVar1)

separator=Split(tempVar1, CHR(13)&CHR(10))(0)
tempVar2=Split(tempVar1,separator)

postArgumentsSize=ubound(tempVar2)-1
Dim postNamesArray()
Dim postValuesArray()
ReDim Preserve postNamesArray(postArgumentsSize)
ReDim Preserve postValuesArray(postArgumentsSize)

StoreNameAndValues(tempVar2)

In this example, I've build a very rudimentary parser... it's not prepared for things like file upload, but this is just an example of what to do.

Hope I didn't make any big mistake... and it will help someone.

I wanted to give credit here - your answer helped me fix an issue I was having. While I could not get your code to work, it helped solve the problem. thanks! https://stackoverflow.com/questions/65158652/classic-asp-cannot-get-request-form-values-from-ajax-post-request/65160022#65160022 — Dennis, Dec 05 '20 at 18:07

score 0 · Answer 2 · answered Aug 14 '20 at 02:11

After searching everywhere and trying various things this post finally got me on the right track. My classic asp page simply wouldn't read the ajax form post that I was sending to it.

What finally made it work is the contentType: 'application/x-www-form-urlencoded; charset=UTF-8', in the ajax function. So this is how I finally got to send the form and the classic asp page reads all the values like it should.

    $('#subdel').click(function () {
      // get values outside of the form
      var tDate = $('#datepicker').val();
      var tCID = $('#Client').val();
      var vFD = $('#dataentry').serialize();
      // add those values to the form
      vFD = vFD + '&C=' + tCID;
      vFD = vFD + '&D=' + tDate;
      $(function() {
         var request = $.ajax({
            url: 'api/saveDLR.asp',
            type: 'POST',
            data: vFD,
            processData: false,
            contentType: false,
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
            cache: false,
            success: function (response) {
               // hide some parts of the page, and then show the result from saving the form
               $('#cldel').hide("slow");
               $('#endel').hide("slow");
               $("#encon").html( response );
               $('#encon').show("slow");
               // refresh a table after the form was processed
               $(function() {
                   var request = $.ajax({
                   url: "/api/getDelClient.asp?C=" + tCID + "&D=" + tDate,
                   type: "GET",
                   dataType: "html",
                   success: function (response) {
                      $("#cldel").html( response );
                      $('#cldel').show("slow");
                   },
                   error: function (response) {
                      alert(response.responseText);
                   }
                   });
               });
            },
            error: function (response) {
                  alert(response.responseText);
            }
         });
      });
   });

Maybe it (still) can help somebody else.

The asp page simply reads the form data with Request.Form

<%  For Each item In Request.Form
      Response.Write item & " - " & Request.Form(item) & "<br/>"
    Next
%>

AJAX - Classic ASP - Post a Form

2 Answers2

Linked

Related