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.
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:
button
should be disabled
by default. Do this in the HTML:<button disabled …>Continue To Payment</button>
input
's onchange
handler should just call setValueOnTarget()
, because this function already calls EnableButton()
. In the HTML:<input onchange="setValueOnTarget(this);" … >
redirectPage()
from the button
's onclick
handler and move it into addValueToQueryString()
after you have assigned a value to newSrc
.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.