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>

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

这是我的完整 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 值时才应启用。在您的示例中您似乎已经有了一个机制，但是您首先要克服一些障碍：

button 默认应该是 disabled。在 HTML:
<button disabled …>Continue To Payment</button>
input 的 onchange 处理程序应该只调用 setValueOnTarget()，因为这个函数已经调用了 EnableButton()。在HTML:
<input onchange="setValueOnTarget(this);" … >
从 button 的 onclick 处理程序中删除对 redirectPage() 的调用，并在为 newSrc 赋值后将其移至 addValueToQueryString() .
在调用 displayError() 后添加对 EnableButton() 的调用以允许用户修改 input 并重试。

例如：

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>

HTML 提交空白字段的按钮，尽管它不应该提交

HTML button that's submitting an empty field even though it shouldn't be

html

javascript

button

htmlbutton

默认禁用按钮