2

这是我正在使用的 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 中的代码是否有问题。任何和所有的帮助将不胜感激！

4

1 回答 1

0

默认禁用按钮

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

  1. button应该是disabled默认的。在 HTML 中执行此操作：
    <button disabled …&gt;Continue To Payment</button>
  2. input的onchange处理程序应该只是调用setValueOnTarget()，因为这个函数已经调用了EnableButton()。在 HTML 中：
    <input onchange="setValueOnTarget(this);" … >
  3. redirectPage()从button的onclick处理程序中删除对 的调用，并addValueToQueryString()在您为newSrc.
  4. 在您希望允许用户修改并重试的情况下，EnableButton()在您调用后添加调用。displayError()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>

于 2016-03-09T18:16:44.223 回答