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ハンドラは を呼び出すだけです。HTML では:setValueOnTarget()EnableButton()
    <input onchange="setValueOnTarget(this);" … >
  3. のハンドラredirectPage()からへの呼び出しを削除し、 に値を割り当てた後に に移動します。buttononclickaddValueToQueryString()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 に答える