1

I am trying to send an XMLHttpRequest to an external form which contains a textarea and a checkbox. I would like to substitute the text inside the textarea (“Put your text in this box”) for another string and to uncheck the checkbox, then sending the form and getting the results. The form is more or less like this:

<form name="aspnetForm" method="post" action="Tagger.aspx" id="aspnetForm" enctype="multipart/form-data">

      <input id="checkBoxOptions_0" type="checkbox" name="checkBoxOptions$0" checked="checked" />

      <textarea name="$txtbxInput" id="_txtbxInput">Put your text in this box.</textarea>

      <textarea name="$txtbxOutput" readonly="readonly" id="_txtbxOutput" class="output">Output box</textarea>

      <input type="submit" name="$btnTagIt" value="Tag It" id="_btnTagIt" class="sizeTopMargin" />
</form>

And I have tried the XMLHttpRequest with two different options: the first one gets back the textarea with the original string and the checkbox checked as default, the second one gives the error explained in one of its lines.

Option 1:

var data = "checkBoxOptions$0.checked=false"+"&$txtbxInput=New String Inserted";
var xhr = new XMLHttpRequest();
xhr.open('POST', "http://nlpdotnet.com/services/Tagger.aspx", true);
xhr.setRequestHeader("Content-type", "multipart/form-data");
xhr.onload = function () {
    var results = xhr.response;
}
xhr.send(data);

Option 2:

var formElement = document.getElementById("aspnetForm");
var formData = new FormData(formElement);//TypeError: Argument 1 of FormData.constructor is not an object
formData.append("$txtbxInput", "New String Inserted");

var xhr = new XMLHttpRequest();
xhr.open('POST', "http://nlpdotnet.com/services/Tagger.aspx", true);
xhr.setRequestHeader("Content-type", "multipart/form-data");
xhr.onload = function () {
    var results = xhr.response;
}
xhr.send(formData);

As the form is external, I cannot redesign any part of it. Any ideas? Thanks!

Pau
  • 11
  • 4
  • Your `data` string is not in the correct format for `multipart/form-data`. You should probably use `application/x-www-form-urlencoded` format if you're going to construct the data string by hand. – Barmar Mar 05 '17 at 20:49
  • This is the format specified in the original form, nothing changes if I change it. – Pau Mar 05 '17 at 22:55
  • Well, your data isn't in URL-encoded form, either. URL encoding looks like `param1=value1&param2=value2`. You don't have `&` between them. – Barmar Mar 05 '17 at 23:06
  • And for checkboxes you don't send a `.checked` parameter. You just send `checkboxname=value` if it's checked, and leave it out if it's not checked. – Barmar Mar 05 '17 at 23:07
  • Yes, it is URL-encoded (typo error, now corrected), I do have & between parameters. – Pau Mar 05 '17 at 23:41
  • About the checkbox, it is checked by default. I have also tried checkBoxOptions$0=false, without the .checked, and nothing changes – Pau Mar 05 '17 at 23:43
  • Sending =false doesn't make it unchecked. Clients only send checked checkboxes to the server. To make it not checked, you don't send it at all. – Barmar Mar 05 '17 at 23:44
  • `$0` is an ASP.net thing, right? I don't know anything about ASP, so I'm assuming you're doing that part right. – Barmar Mar 05 '17 at 23:46
  • I think it's just a name, I have made XMLHttpRequests to forms with different technologies and it has never been a problem. – Pau Mar 05 '17 at 23:57
  • Checkbox: if I don't send it, it remains checked – Pau Mar 05 '17 at 23:58
  • I'm not talking about whether it's checked in the browser, we're just changing what gets sent to the server in the AJAX request. – Barmar Mar 05 '17 at 23:59
  • I mean the form has `name="checkBoxOptions_0"`, but you have `checkBoxOptions$0` in the Javascript. I assume that's some kind of ASP.net placeholder that gets replaced with `_0`, `_1`, etc. as part of a loop. – Barmar Mar 06 '17 at 00:00
  • It is checked by default, and I cannot change this value wheter I send it or not. – Pau Mar 06 '17 at 01:41
  • You are mixing id and name. Name is checkBoxOptions$0. – Pau Mar 06 '17 at 01:41
  • Sorry about that. Anyway, when you do `formData.delete("checkBoxOptions$0");` it will send that the checkbox isn't checked, even though the checkbox is actually checked on the web page. – Barmar Mar 06 '17 at 22:34
  • That's fine, but I cannot reach the checkbox if I get this error retrieving the form, so... – Pau Mar 07 '17 at 00:36
  • If you put your code at the end of the HTML or run it in `window.onload`, you won't get an error retrieving the form. – Barmar Mar 07 '17 at 02:36
  • I cannot modify the HTML, as it is in an external resource. – Pau Mar 08 '17 at 22:09
  • Don't modify the HTML, run your script in `window.onload` or `document.addEventListener("DOMContentLoaded")` – Barmar Mar 08 '17 at 22:11
  • How are you adding the Javascript to the document without modifying it somehow? – Barmar Mar 08 '17 at 22:12
  • I don't load any window. I am developing a Web Extension (former Chrome Extension) that sends an XMLHttpRequest when the user selects a word. – Pau Mar 08 '17 at 22:13
  • Then I can't understand why it can't find the element. By the time the user is able to select words, all the HTML should be loaded, so the form element should exist. – Barmar Mar 08 '17 at 22:15
  • The form is in the page that the user is selecting a word from, right? – Barmar Mar 08 '17 at 22:16
  • I am then sending a form filled by the extension, an XMLHttpRequest to the "action" field of the form with fields filled by it. – Pau Mar 08 '17 at 22:16
  • No, the user selects a word in one document and I send the XMLHttpRequest to a different resource. – Pau Mar 08 '17 at 22:17
  • It does find the form. What does not work is the line 'var formElement = document.getElementById("aspnetForm");' before the XMLHttpRequest. – Pau Mar 08 '17 at 22:20
  • That's the form it doesn't find. See my updated answer. – Barmar Mar 08 '17 at 22:23
  • What you proposed is more or less what I was doing in the first option. I have tried though, but still not working, it does not change the innerHTML of textarea. – Pau Mar 15 '17 at 23:09

1 Answers1

0

You shouldn't be trying to get the form element with getElementById. The form isn't in the DOM of the current page, it's in a completely different document that isn't loaded into the browser.

You just need to construct the formData by hand with a bunch of add calls:

var formData = new FormData;
formData.add("$txtbxInput", "New String Inserted");
formData.add("$btnTagIt", "Tag It");
var xhr = new XMLHttpRequest();
xhr.open('POST', "http://nlpdotnet.com/services/Tagger.aspx", true);
xhr.setRequestHeader("Content-type", "multipart/form-data");
xhr.onload = function () {
    var results = xhr.response;
}
xhr.send(formData);
Barmar
  • 596,455
  • 48
  • 393
  • 495
  • Thanks, but the line "var formData = new FormData(formElement);" throws the error: "TypeError: Argument 1 of FormData.constructor is not an object", so the following lines are not executed. – Pau Mar 05 '17 at 22:58
  • What does `console.log(formElement);` show? Are you running this code in an event listener after the DOM is loaded? Are you sure you have the correct ID in the line `var formElement = document.getElementById("aspnetForm");`? – Barmar Mar 05 '17 at 23:05
  • console.log(formElement) shows null. I have double-check the form id, it is correct. No, I don't use an event listener. This is the first interaction I have with the website and that's why, in my opinion, formElement is null, cause the DOM hasn't still charged when I declare it. All the examples I've seen have the DOM and the javascript code in the same document. – Pau Mar 05 '17 at 23:49
  • Where are you running this code? It needs to be after the HTML, or you need to run it in `window.onload`. See http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element – Barmar Mar 05 '17 at 23:56
  • Why are you submitting a form before the user has had a chance to type into it? – Barmar Mar 05 '17 at 23:57
  • The HTML is in an external website. I am developing a js file for accessing this website's form – Pau Mar 06 '17 at 00:41