dslreports logo
 
    All Forums Hot Topics Gallery
spc
Search similar:


uniqs
745
jacour
Premium Member
join:2001-12-11
Matthews, NC

1 edit

jacour

Premium Member

Java Question - Radio Buttons

I am trying to write a script for use with Greasemonkey that will take a particular action based on text strings that change depending which page I am on at a particular web site.

Edit: Sorry, BBR did not like my cut and paste. The "input" lines below start with a left bracket and end with an HTML "BR" tag, but I had to delete that to get this to display.

The site I am accessing has a bunch of pages that use radio button selection, and the code looks something like this:

input type=radio name=choice value='1'> UPS
input type=radio name=choice value='2'> FedEx
input type=radio name=choice value='3'> US Mail

and on a different page:

input type=radio name=choice value='1'> Visa
input type=radio name=choice value='2'> MasterCard
input type=radio name=choice value='3'> PayPal

EVERY selection page recycles the same radio button syntax, and only the trailing text is modified depending on the context.

The problem is that I need to "read" the trailing text string so that if the page displays a radio button with "FedEx", I can select the value of "2" and pass it back to the web page (I know which button I want for every page based on the displayed text, I just need to know how to select it).

I think I know how to pass the "2" back to the web page, but since the text string I need to "read" is not part of the input statement syntax per se, I don't think a variant of "GetElementsByTagName" will do the trick. Is there a clever way to:

A. Detect that I am on a page where radio button selections have been displayed,
B. Read the trailing text, and
C. Based on matching the trailing text string, look at the immediately preceeding statement and grab the numerical value?

For example, if I always wanted to ship FedEx and pay by Visa, I would want to select "2" on the first page and "1" on the second page, etc.

Kickroot
Java Heathen
Premium Member
join:2002-11-24
Honesdale, PA

Kickroot

Premium Member

JavaScript, not Java.

Big difference.

JAAulde
Web Developer
MVM
join:2001-05-09
Frederick, MD
ARRIS SB6141
Ubiquiti EdgeRouter Lite
Ubiquiti UniFi AP

1 edit

JAAulde to jacour

MVM

to jacour
As noted above, this is JavaScript, not Java. We only mention it because in the future you'll get better responses (and those more quickly) by putting JavaScript in the post title rather than Java.

Anyway, I have written you an example Grease Monkey script. For your learning purposes, it can be installed here: »www.jaaulde.com/greasemo ··· .user.js

The source for it is below, but I'll quickly explain the base question you posed, which was how to select an input based on the text immediately following it. I grabbed all inputs in the document via getElementsByTagName and then began iterating over them. As I looped, I checked whether the input was a radio, and whether its nextSibling property had a nodeName of '#text'. This is the first half of your puzzle--nextSibling gets the next item in the DOM following the input, and text nodes have a nodeName of '#text'.

Once I determine we have a radio input followed by text, I move to the next half of the puzzle which is to determine if the text contains the desired value. I gain access to the actual text in string format by using the nodeValue property of the previously mention nextSibling, and I then used some regexes I assembled from your configured (lines 23 and 24) variables to see if the text is what we wanted.

That script is setup to run on anything under this directory on my server:
»www.jaaulde.com/test_bed/jacour/

If you look in that directory, you'll notice 3 pages. Clicking on the first, 1_startsHere.php, will run the Grease Monkey script which selects FedEx and submits to the next page, 2_movesToHere.php. This has the payment stuff on it and the Grease Monkey script will select Visa and submit to the final script, 3_endsHere.php. This script will show you the results of the form submissions (which were stored to PHP session as the chain was progressing).

The code for Grease Monkey looks like so:
// --------------------------------------------------------------------
//
// This is a Greasemonkey user script.
//
// To install, you need Greasemonkey: http://greasemonkey.mozdev.org/
// Then restart Firefox and revisit this script.
// Under Tools, there will be a new menu item to "Install User Script".
// Accept the default configuration and install.
//
// To uninstall, go to Tools/Manage User Scripts,
// select "Shipping Radio Selection", and click Uninstall.
//
// --------------------------------------------------------------------
//
// ==UserScript==
// @name          Shipping Radio Selection
// @namespace     http://jaaulde.com/greasemonkey
// @description   Selects radios for shipping options and submits the forms
// @include       http://www.jaaulde.com/test_bed/jacour/*
// ==/UserScript==
(function()
{
  var shipper = 'FedEx';
  var paymentMethod = 'Visa';
 
  var shipperRegExp = new RegExp('(?:^|\\s+)'+shipper+'(?:\\s+|$)','i');
  var paymentMethodRegExp = new RegExp('(?:^|\\s+)'+paymentMethod+'(?:\\s+|$)','i');
 
  var allInputs = document.getElementsByTagName('input');
  var targetInput = null;
  for (var i = 0; i<allInputs.length; i++)
  {
    if (
        allInputs[i].type === 'radio' &&
        allInputs[i].nextSibling.nodeName === '#text' &&
        (
         allInputs[i].nextSibling.nodeValue.match(shipperRegExp) ||
         allInputs[i].nextSibling.nodeValue.match(paymentMethodRegExp)
        )
       )
    {
      var targetInput = allInputs[i];
      break;
    }
  }
  if(targetInput !== null)
  {
    targetInput.checked = 'checked';
    targetInput.form.submit();
  }
}());
 
jacour
Premium Member
join:2001-12-11
Matthews, NC

jacour

Premium Member

Many thanks for that code!!!

One more script question - I wrote this line:

var title = document.getElementsByTagName('h1')[0];

Which if I understand what I am doing, this should search the document for the first h1 tag and assign it to the variable "title". What I want to do is to assign the contents of what is between the h1 tags to the variable. When I run this scipt with an "alert" echo, I see [object XPCnativewrapper[object htmlheadingelement]].

I have tried appending the .value property after the array element, but that does not work. What the heck is the correct syntax to get the contents of the tags? There are lots of scripting sites that provide the syntax for the getElementsbytagname but none that have a good description of combining it with properties.

JAAulde
Web Developer
MVM
join:2001-05-09
Frederick, MD

JAAulde

MVM

document.getElementsByTagName('h1')[0].innerHTML

That's one simple way of getting what you want. There are one or two other ways using the DOM, but what I just showed you is the more widely used method.

Jim
jacour
Premium Member
join:2001-12-11
Matthews, NC

jacour

Premium Member

Thanks again, my script is now doing what it needs to do although I have a bit more coding to polish up.

Do you have link to a decent site for scripting tutorials and Java script references? I am pretty good at programming if I can find the right syntax!

JAAulde
Web Developer
MVM
join:2001-05-09
Frederick, MD
ARRIS SB6141
Ubiquiti EdgeRouter Lite
Ubiquiti UniFi AP

JAAulde

MVM

My recommendations are the following:

1) Buy and read JavaScript: The Definitive Guide, Fifth Edition
2) Buy and read DOM Scripting
3) Keep playing with JS
4) Keep asking questions
5) Keep playing with JS
6) When you're really feeling comfortable and want to dig into the depths of OOP and JS tricks, buy and read Pro JavaScript Design Patterns

Sadly, there are not really any good JS tutorials on the web. I mean, there are places to learn the absolute basics. But no where teaches proper utilization and implementation. The books I am recommended, though, are quite good.

jayco4376
Premium Member
join:2001-08-11
Lincoln, NE

jayco4376

Premium Member

Gotta love most of the O'Reilly books.