Extract Form Results from a Webpage

Questions & Suggestions
1

I'm aiming to capture data from a page that has been created by the user filling out a form. When I inspect the resultant data it looks like this:

<div class="form-group col-sm-6">
<label for="Mobile_Phone">Mobile phone</label>
<span class="field_value">9051234567</span>
</div>

So I guess the question is: how can I get the field_value for the label Mobile_Phone (which I will save to a variable).

1 Like
2

Hey @brijazz,

Something like this might work in a Execute a JavaScript in Front Browser action.

document.querySelector('div.form-group.col-sm-6 .field_value').innerText

What web browser are you using?

You need Safari or Google Chrome to use the front-browser actions (at least until KMv9.0 hits the streets).

There are some options available depending upon what browser you're using.

-Chris

1 Like
3

Thanks, @ccstone. That worked, but brings a follow-up question:

There are multiple "field-values" on the page. One for the phone number, one for the email address, one for the date of birth and so on. They're all different by the "label for" identifier. How can I get KM to move from one item to the next, capturing each bit of info into separate variables as it goes?

Also, I'm using Safari.

4

Hey @brijazz,

Something like this?

Change the value in the function call as necessary:

     fieldValue('Home_Phone')

Extract Label Name from Web Page v1.00.kmmacros (6.9 KB)

Keyboard Maestro Export.png794×1154 102 KB

@JMichaelTX assisted me in sussing out the syntax for this.

-Chris

1 Like
5

This is perfect (and gives me much-needed insight on how to select elements from a page). Thanks so much to you and @JMichaelTX for spending your time on this, it's truly appreciated! :beers:

But it looks like there are a couple of more elements that I can't quite figure out:

In this one, I'm trying to grab the name "Junior Smith":

<div class="table-responsive">
                <table class="table">
                <thead>
                  <tr>
                    <th>Name</th>
                      <th>Email</th>
                      <th>Mobile Phone</th>
                    <th class="text-right">Status</th>
                  </tr>
                </thead>
                  <tbody>
                  <tr>
                    <td><a href="/students/446926">Junior Smith</a></td>
                      <td></td>
                      <td></td>
                    <td class="text-right">Active</td>
                  </tr>
                </tbody>
              </table>
              </div>

In this one, I'm trying to get "Papa Smith":

<div class="row index-title">
        <span>Papa Smith</span>
          <span class="profile-link"><a href="/customers/414346/edit">Edit</a></span>
        <span class="pull-right visible-sm visible-xs"><button type="button" class="btn btn-primary btn-xs btn-offcanvas" data-toggle="offcanvas">Info</button></span>
          <span class="label label-success pull-right" original-title="Status">Active</span>
              <span class="label pull-right label-primary balance-label" original-title="Balance">$0.00</span>
      </div>

Any further suggestions? I've been hacking away at this myself, to no avail :confused:

2 Likes
6

Hey @brijazz,

Working with JavaScript and the DOM is very confusing to begin with, but it get's better with study and practice.

Try these respectively:

document.querySelector('div.table-responsive').innerText

document.querySelector('div.row.index-title').innerText

Then parse the output.

You could try innerHTML instead of innerText if the text is too hard to parse.

-Chris

7

Hey @brijazz,

These are a bit more direct:

document.querySelector('div.row.index-title span').innerText

document.querySelector('div.row.index-title span').innerText

But they might not work if your web page structure changes any.

-Chris

8

Very helpful as always. I think I've got everything working the way I need. Thanks again!

1 Like