I'm trying to finish a script that fills out a checkout form. It needs to click a button with no id or name then fill out the rest of the form that appears. The code I have to click the button is:

document.querySelector('input[type="submit"][value="continue"]').click();

but that is not working for me, the other elements will appear after that, my script:

// ==UserScript==
// @name         Script
// @include      /*
// @include      http://*.bigcartel/product
// @include      http://*.bigcartel/cart
// @grant        none
// ==/UserScript==

// on "/cart" page click checkout button
if (window.location.origin !== "") document.getElementsByName("checkout")[0].click();
else {
    // fill first three form fields
    document.getElementById("buyer_first_name").value = "John";
    document.getElementById("buyer_last_name").value = "Smith";
    document.getElementById("buyer_email").value = "[email protected]";
    //click button for next section 
    document.querySelector('input[type="submit"][value="continue"]').click();
}

I'm trying to finish a script that fills out a checkout form. It needs to click a button with no id or name then fill out the rest of the form that appears. The code I have to click the button is:

document.querySelector('input[type="submit"][value="continue"]').click();

but that is not working for me, the other elements will appear after that, my script:

// ==UserScript==
// @name         Script
// @include      https://checkout.bigcartel./*
// @include      http://*.bigcartel./product
// @include      http://*.bigcartel./cart
// @grant        none
// ==/UserScript==

// on "/cart" page click checkout button
if (window.location.origin !== "https://checkout.bigcartel.") document.getElementsByName("checkout")[0].click();
else {
    // fill first three form fields
    document.getElementById("buyer_first_name").value = "John";
    document.getElementById("buyer_last_name").value = "Smith";
    document.getElementById("buyer_email").value = "[email protected]";
    //click button for next section 
    document.querySelector('input[type="submit"][value="continue"]').click();
}

• javascript
• tampermonkey

Share Improve this question Follow edited Dec 5, 2017 at 5:33 Brock Adams 93.7k2323 gold badges241241 silver badges305305 bronze badges asked Dec 5, 2017 at 1:11 oversoonoversoon 36033 gold badges88 silver badges2121 bronze badges 1

• you need to load the script "later" ... perhaps look up documentation for @run-at – Jaromanda X Commented Dec 5, 2017 at 1:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Refer to Choosing and activating the right controls on an AJAX-driven site, and use a utility like waitForKeyElements().

Here's how to wait for elements and chain states (in case it's needed) for the submit click:

// ==UserScript==
// @name     _Wait for elements overkill and on separate pages
// @match    https://checkout.bigcartel./*
// @match    *://*.bigcartel./product*
// @match    *://*.bigcartel./cart*
// @require  http://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github./raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
//- The @grant directive is needed to restore the proper sandbox.

//-- Track form field state, just in case. *Might* be needed for multistage forms...
var glblFlags = {firstFlld: false, lastFlld: false, emailFlld: false};

if (location.hostname === "checkout.bigcartel.") {
    /*-- Fill first three form fields.
        Use separate WFKE's for multistage.  (Fun overkill for simpler forms.)
    */
    waitForKeyElements ("#buyer_first_name", jNd => {SetValue (jNd, "firstFlld", "John"); }, true);
    waitForKeyElements ("#buyer_last_name",  jNd => {SetValue (jNd, "lastFlld",  "Smith"); }, true);
    waitForKeyElements ("#buyer_email",      jNd => {SetValue (jNd, "emailFlld", "[email protected]"); }, true);

    //-- Click button for next section
    waitForKeyElements (
        "form[action='/shipping'] button:contains('Next')",
        clickWhenFormIsReady, true
    );
}
else if (location.pathname === "/cart") {
    //-- On "/cart" page click checkout button
    waitForKeyElements ("[name='checkout']", clickNode, true);
}

function clickNode (jNode) {
    var clickEvent  = document.createEvent ('MouseEvents');
    clickEvent.initEvent ('click', true, true);
    jNode[0].dispatchEvent (clickEvent);
}

function SetValue (jNode, flagVarName, newValue) {
    jNode.val (newValue);
    glblFlags[flagVarName] = true;
}

function clickWhenFormIsReady (jNode) {
    //-- Keep waiting if all flags are not true (form not yet filled out):
    for (let prpName in glblFlags) {
        if (glblFlags.hasOwnProperty (prpName) ) {
            if (glblFlags[prpName] === false)
                return true;
        }
    }
    clickNode (jNode);
}

---

To add additional form fields, you would:

1. Add a new "filled" property to the glblFlagsobject. For example:

   var glblFlags = {firstFlld: false, lastFlld: false, emailFlld: false, phoneFlld: false};
   

2. Add a new waitForKeyElements line to the first if section. For example:

       waitForKeyElements ("#buyer_phone", jNd => {SetValue (jNd, "phoneFlld", "800-867-5309"); }, true);
   

   The second parameter to SetValue() is the name of the property you added in step 1.
   The third parameter to SetValue() is the value you wish to fill in the form field with.

3. Some form controls may require special handling. That's beyond the scope of this question. Search around and then open a new question, if needed.