提交空字段的 HTML 按钮，即使它不应该是

Question

这是我正在使用的 HTML 按钮：

<b>Other: </b><input type="number" id="AmntValue" data-target-element-id="SubmitAmnt" data-target-parameter="Amnt" onchange="setValueOnTarget(this);' +/* ' enableButton(SubmitAmnt);' */+ '"> 
<button class="button2" id="SubmitAmnt"  type="button" data-redirect-src="https://hub.deltasigmapi.org/donations/donations.aspx?appealid=1989&NumberOfPaymentsDisplay=0&GiftRecurrenceDisplay=0&GiftRecurrence=onetime&GiftAmount=" onclick="disableButton(this); addValueToQueryString(this); redirectPage(this);">Continue To Payment</button>

当有人点击按钮但“其他”文本字段为空白时，它应该不重定向，而是显示错误消息。现在会显示错误消息，但只是在它重定向之前的一小会儿。

这是我完整的 JavaScript 代码：

function setValueOnTarget(sourceElem) {
    var targetId = sourceElem.getAttribute('data-target-element-id');
    if (targetId) {
        var targetElem = document.getElementById(targetId);
        if (targetElem) {
            var valueToSet;
            var parameterToSet;
            if (sourceElem.nodeName.toUpperCase() == 'SELECT') {
                valueToSet = sourceElem.options[sourceElem.selectedIndex].value;
            }
            if (sourceElem.nodeName.toUpperCase() == 'INPUT') {
                if (sourceElem.type.toUpperCase() == 'NUMBER' || sourceElem.type.toUpperCase() == 'TEXT') {
                    valueToSet = sourceElem.value;
                }
            }
            targetElem.setAttribute('data-value-set-by-other-element', valueToSet);
            parameterToSet = sourceElem.getAttribute('data-target-parameter');
            targetElem.setAttribute('data-target-parameter', parameterToSet);
            EnableButton(targetElem)
        }
    }
}

function disableButton(btn) {
    btn.disabled = true;
}

function EnableButton(btn) {
    btn.disabled = false;
}

function addValueToQueryString(elem) {
    var src = elem.getAttribute('data-redirect-src');
    var newValue = elem.getAttribute('data-value-set-by-other-element');
    var parameter = elem.getAttribute('data-target-parameter');
    if (newValue && parameter) {
        if (src && newValue && parameter) {
            var newSrc;
            newSrc = src + newValue;
            elem.setAttribute('data-redirect-src', newSrc);
        } else {
            displayError('Could not find the URL to redirect to');
        }
    } else {
        displayError('No value or parameter has been set. Please set a proper value.');
    }
}

function redirectPage(elem) {
    var src = elem.getAttribute('data-redirect-src');
    window.location = src;
}

function displayError(message) {
    var userMessage = document.getElementById('userMessage');
    userMessage.innerHTML = message;
    userMessage.style.backgroundColor = 'red';
    userMessage.style.color = 'white';
    userMessage.style.display = 'block';
}

function displaySuccess(message) {
    var userMessage = document.getElementById('userMessage1');
    userMessage.innerHTML = message;
    userMessage.style.backgroundColor = 'green';
    userMessage.style.color = 'white';
    userMessage.style.display = 'block';
}

我不确定我放在按钮或 JavaScript 中的代码是否有问题。任何和所有的帮助将不胜感激！

Answer 1

默认禁用按钮

button 应默认禁用，并且仅应在检测到预期的input 值时启用。在您的示例中，您似乎已经有了一个机制，但是您首先需要克服一些障碍：

1. button 默认应该是 disabled。在 HTML 中执行此操作：
   <button disabled …>Continue To Payment</button>
2. input 的onchange 处理程序应该只调用setValueOnTarget()，因为这个函数已经调用了EnableButton()。在 HTML 中：
   <input onchange="setValueOnTarget(this);" … >
3. 从button 的onclick 处理程序中删除对redirectPage() 的调用，并在为newSrc 赋值后将其移至addValueToQueryString()。
4. 如果您希望允许用户修改input，请在调用displayError() 后添加对EnableButton() 的调用，然后重试。

例如：

function setValueOnTarget(sourceElem) {
    var targetId = sourceElem.getAttribute('data-target-element-id');
    if (targetId) {
        var targetElem = document.getElementById(targetId);
      console.log(targetElem);
        if (targetElem) {
            var valueToSet;
            var parameterToSet;
            if (sourceElem.nodeName.toUpperCase() == 'SELECT') {
                valueToSet = sourceElem.options[sourceElem.selectedIndex].value;
            }
            if (sourceElem.nodeName.toUpperCase() == 'INPUT') {
                if (sourceElem.type.toUpperCase() == 'NUMBER' || sourceElem.type.toUpperCase() == 'TEXT') {
                    valueToSet = sourceElem.value;
                }
            }
            targetElem.setAttribute('data-value-set-by-other-element', valueToSet);
            parameterToSet = sourceElem.getAttribute('data-target-parameter');
            targetElem.setAttribute('data-target-parameter', parameterToSet);
            EnableButton(targetElem);
        }
    }
}

function disableButton(btn) {
    btn.disabled = true;
}

function EnableButton(btn) {
    btn.disabled = false;
}

function addValueToQueryString(elem) {
    var src = elem.getAttribute('data-redirect-src');
    var newValue = elem.getAttribute('data-value-set-by-other-element');
    var parameter = elem.getAttribute('data-target-parameter');
    if (newValue && parameter) {
        if (src && newValue && parameter) {
            var newSrc;
            newSrc = src + newValue;
            elem.setAttribute('data-redirect-src', newSrc);
            redirectPage(elem);
        } else {
            displayError('Could not find the URL to redirect to');
        }
    } else {
        displayError('No value or parameter has been set. Please set a proper value.');
        EnableButton(elem);
    }
}

function redirectPage(elem) {
    var src = elem.getAttribute('data-redirect-src');
    window.location = src;
}

function displayError(message) {
    var userMessage = document.getElementById('userMessage');
    userMessage.innerHTML = message;
    userMessage.style.backgroundColor = 'red';
    userMessage.style.color = 'white';
    userMessage.style.display = 'block';
}

<b>Other: </b>
<input
       type="number"
       id="AmntValue"
       data-target-element-id="SubmitAmnt"
       data-target-parameter="Amnt"
       onchange="setValueOnTarget(this);"> 
<button
        disabled
        class="button2" 
        id="SubmitAmnt"
        type="button"
        data-redirect-src="https://hub.deltasigmapi.org/donations/donations.aspx?appealid=1989&NumberOfPaymentsDisplay=0&GiftRecurrenceDisplay=0&GiftRecurrence=onetime&GiftAmount="
        onclick="disableButton(this); addValueToQueryString(this);">Continue To Payment</button>

<div id="userMessage"></div>