Passing a Variable with Ajax and Javascript

Question

I have advanced ASP (classic) skills but am pretty green to JavaScript and Ajax. I'm working on a page that allows users to enter comments in response to a post. I'm wanting the form submission field to submit reader comments to the database, and then show those comments without changing the page. Much like a Facebook comment. Hence Ajax and JavaScript.

I've got the test.asp page (below) working. It's calling the AJAX.asp page, writing to the database, and updating a in the page with the submitted text. My only issue is that I am going to need to update a page with multiple sections, so I need to get a variable into the second JavaScript function to allow me to write to a unique . Currently it's set as id="newcomment" but this will need to change to something like id="newcomment" & var, so that the result is "newcomment1484" (or another unique number) and the right gets updated.

For the life of me I can't figure out how to get a variable in that second function. Any help greatly appreciated. Please keep in mind I'm quite new to JS.

<html>
<head>
<script>

function SendtoAjax(ident)
{
   if(window.XMLHttpRequest)
   {
      oRequest = new XMLHttpRequest();
   }
   else if(window.ActiveXObject)
   {
      oRequest = new ActiveXObject("Microsoft.XMLHTTP");
   }

   oRequest.open("POST", "AJAX.asp", true);
   oRequest.onreadystatechange = UpdateComment;
   val=document.getElementById('commentfield').value.replace(/\n/g, "<br>");
   oRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   oRequest.send("strCmd=availability&commentaid=" + ident + "&commentfield=" + encodeURIComponent(val));
}

function UpdateComment(ident)
{
   if(oRequest.readyState == 4)
   {
      if(oRequest.status == 200)
      {
         document.getElementById("newcomment").innerHTML = oRequest.responseText;
      }
      else
      {
         document.getElementById("newcomment").innerHTML = "Asychronous Error";
      }
   }
}
</script>
</head>
<body>

  <form method="post" action="javascript:void(0);" name="form1">


<textarea name="commentfield" id="commentfield"></textarea>
<input id="commentaid" type="hidden" value="Available1434">
<input id="submitcomment" type="button" value="submit" onClick="SendtoAjax(1434);">
<br><br><div id="newcomment"></div>


</form>

</body>
</html>

I tried all manners of getting a variable in there, but have come to learn (I think?) that there is some issue with the "onreadystatechange" and Ajax. Way beyond me at the moment.

It's really hard to read completely non-indented code, for both of us. — Pointy
– Pointy, Commented Jan 18, 2023 at 17:52
You could probably simplify your code by losing the if...else statement invoking ActiveX. oRequest = new XMLHttpRequest(); should be all you need now, unless you need to support IE8 and below. — John
– John, Commented Jan 19, 2023 at 16:32

zangab · Accepted Answer · 2023-01-18 18:38:38Z

2

you need to pass a formData object, see the docs for examples on how to do that.

let formData = new FormData();

// append some data (key, value)
formData.append("strCmd", "availability");

// send it with the form
oRequest.send(formData);

answered Jan 18, 2023 at 18:38

zangab

4363 silver badges5 bronze badges

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

3 Comments

UnivDevGuy Over a year ago

Thank you. Sorry for my ignorance -- where would I put that? Inside one of the two functions? Between them?

zangab Over a year ago

@UnivDevGuy somewhere in your SendtoAjax method. btw, javascript naming convention is camelCase, so it would be sendToAjax.

UnivDevGuy Over a year ago

Thank you so much! Worked perfectly. I appreciate you taking the time.

Collectives™ on Stack Overflow

Passing a Variable with Ajax and Javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related