Question

我试图填写一个填写结帐表单的脚本。它需要单击没有id或名称的按钮，然后填写出现的其余表单。我必须单击按钮的代码是：

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

但这对我不起作用，其他元素将出现在我的脚本之后：

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

// on "/cart" page click checkout button
if (window.location.origin !== "https://checkout.bigcartel.com") 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 = "john@doe.com";
    //click button for next section 
    document.querySelector('input[type="submit"][value="continue"]').click();
}

Answer 1

请参阅Choosing and activating the right controls on an AJAX-driven site，并使用waitForKeyElements()等实用程序。

以下是如何等待提交点击的元素和链状态（如果需要）：

// ==UserScript==
// @name     _Wait for elements overkill and on separate pages
// @match    https://checkout.bigcartel.com/*
// @match    *://*.bigcartel.com/product*
// @match    *://*.bigcartel.com/cart*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/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.com") {
    /*-- 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", "john@doe.com"); }, 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);
}

要添加其他表单字段，您需要：

添加一个新的＆＃34;填充＆＃34; glblFlags对象的属性。例如：

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

向第一个waitForKeyElements部分添加新的if行。例如：
```
    waitForKeyElements ("#buyer_phone", jNd => {SetValue (jNd, "phoneFlld", "800-867-5309"); }, true);
```
SetValue()的第二个参数是您在步骤1中添加的属性的名称。
SetValue()的第三个参数是您希望在表单字段中填写的值。
某些表单控件可能需要特殊处理。这超出了这个问题的范围。如果需要，搜索一下，然后打开一个新问题。

Tampermonkey脚本等待元素然后填入它们

1 个答案: