Javascript to fill a formatted text field on a web site

Question

I know virtually nothing about Javascript. By a monkey-see, monkey-do approach I’ve managed to successfully use Javascript within AppleScript/Safari to fill text fields on a web-site using the following command:

do JavaScript "document.getElementById('ElementID').value ='TextToEnter';" in document 1

I’ve been able to enter text into all fields except one. The fields that work are labeled as input type="text”. The field that doesn’t work is complex in that the entered text can be formatted (bold, italics, underline, alignment, etc.) after entry. Assuming I’ve identified the correct source code for this element it looks as follows PRIOR TO any text entry:

<body id="tinymce" class="mce-content-body " onload="window.parent.tinymce.get('fax_text').fire('load');" contenteditable="true" spellcheck="false"><p><br data-mce-bogus="1"></p></body>

Depending on how its viewed, sometimes the p and br tags appear on separate lines but everything is otherwise identical.

After manual entry of text (“INSERT TEXT HERE”) directly into the web page's text field the source code becomes:

<body id="tinymce" class="mce-content-body " onload="window.parent.tinymce.get('fax_text').fire('load');" contenteditable="true" spellcheck="false"><p>INSERT TEXT HERE</p></body>

The following did not work (wrapped in Applescript):

document.getElementById('tinymce').value ='INSERT TEXT HERE';

It produces the error: "missing value".

As per @WhiteHat, the following with n= 0-4 inserted text at several spots on the page but not in the targeted text field; n > 4 resulted in the "missing value" error:

document.getElementsByTagName('p')[n].innerHTML ='Insert text here';

I tried targeting the br tag but to no avail. How do I target this text field with Javascript? Note: I do not need to format the entered text.

WhiteHat · Accepted Answer · 2015-08-20 18:05:29Z

You need to access the  element, which is just after the body of the document, as such...

document.getElementsByTagName('P')[0].innerHTML = 'your text'

The getElementsByTagName function returns an array of all elements with the tag name you provide, P in this case. You're looking for the first one, hence the [0].

The innerHTML property will allow you to set the contents of the  element.

Following is a good JavaScript reference...

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

The following reference is for the web page, or Document Object Model (DOM).

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

And tinymce is a 3rd party JavaScript library which allows the rich edit functionality.

http://www.tinymce.com/

Based on the comments, the specific field you are looking for is named fax_text. Here is the source, it's in a textarea tag, take note on which function to use TagName vs. Name...

document.getElementsByName('fax_text')[0].value = 'This is my text!'; document.getElementsByTagName('textarea')[0].value = document.getElementsByName('fax_text')[0].value + '\nThis is additional text...';

<textarea rows="5" name="fax_text" cols="36" class="mytext"></textarea>

Thanks! Makes a lot of sense. I think you nailed it, but something is still missing. Using your code with element numbers 0-4 resulted in text insertions into random places on the page, but no insertions in the targeted field. Numbers >> 4 returned the "missing value" error. So I'm still not targeting the correct p tag. Not sure if it means anything but when I cut/paste the code it appears as above, but when one inspects it visually the and tags are on separate lines (see edit above). I also tried targeting the br tag but to no avail.
If you have access to change the html, you can set an id on those fields. id="myField", then you can access with getElementById instead of by tag name. It's in the second reference.
Unfortunately accessing the site is not an option. The code is what it is.
are all the fields you want to change in a  element, or are there others, like <div> or ? Anyway, you could loop through all of them and enter text like 'This is field 1,2,3 etc', then you would know which fields you want to change.
When text is entered manually into the form field, the element is as listed in the original question, i.e. the desired text replaces a tag that was entirely contained within a tag. The net result is that the desired text is contained within a tag. So that's the goal, to get that text in that tag. But when I cycle through every p tag, this particular p tag is not targeted by the code you suggested.

jackjr300 · Accepted Answer · 2015-08-20 19:58:35Z

This text field is in an iFrame. This iFrame contains an HTML document (<html><head><body>).

To get this document, you need the_iFrame.contentDocument.

do JavaScript "var ifr = document.getElementById('fax_text_ifr'); ifr.contentDocument.getElementsByTagName('p')[0].innerHTML = 'some text';" in document 1

Collectives™ on Stack Overflow

Javascript to fill a formatted text field on a web site

2 Answers 2

13 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

Comments

Linked

Related