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

Here’s the HTML button I’m working with:

<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>

When someone hits the button but the “Other” text field is blank, it’s supposed to not redirect and instead show an error message. Right now the error message displays, but only for a quick moment before it redirects anyway.

Here is my complete JavaScript code:

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';
}

I’m not sure if something’s wrong with the code I put in the button or in the JavaScript.

Answer

Disable button by default

The button should be disabled by default, and should only be enabled when the expected input value is detected. It appears you already have a mechanism for this in your example, but you have some impediments to overcome first:

1. button should be disabled by default. Do this in the HTML:
   <button disabled …>Continue To Payment</button>
2. input‘s onchange handler should just call setValueOnTarget(), because this function already calls EnableButton(). In the HTML:
   <input onchange="setValueOnTarget(this);" … >
3. Remove the call to redirectPage() from the button‘s onclick handler and move it into addValueToQueryString() after you have assigned a value to newSrc.
4. Add a call to EnableButton() after you call displayError() in cases where you want to allow the user to modify the input and try again.

For example:

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>