We Keep Coding

How to calculate percentage with simple JavaScript code

I have already created a form in html and linked it with my style sheet and also JavaScript page.
My problem is displaying the result on the form.
Can someone please take a look at the JavaScript code and tell me what I am doing wrong?
See the snippet for more details
// Percentage Calculator
const myForm = document.getElementById('my-form');
myForm.onsubmit = e=>e.preventDefault() // disable form submit
;
myForm.oninput = percentageCalculator;
function percentageCalculator(amount, percent) {
return ((percent *amount) / 100).toFixed(2)
}
myForm.result.value = percentageCalculator()
fieldset { margin-top: 1em;
}
label {
display: inline-block; width: 8em; text-align: left;
}
input {
font-size: .8em; text-align: left; display: inline-block; width: 8em;
}
output::before {
content: '';
}
output {
font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;
}
<h2>Percentage Calculator</h2>
<form action="" id="my-form">
<fieldset>
<legend>Calculate Percentage :</legend>
<append>What is <input type="number" name="percent" step=any min=0> % of </append>
<label><input type="number" class="amount" step=any min=0></label>
</fieldset>
<fieldset><br>
<legend>Result :</legend>
<output name="result" value='0'></output>
<br><br>
<button type="reset">Reset Calculator!</button>
</fieldset>
</form>

If you want to make result instantly on click of the input boxes then, make addEventListerner to input elements then get the value inside percentageCalculator and make calculation accordingly..
I have not modified anything from your HTML and only modified the JS part..
const myForm = document.getElementById('my-form');
const percent = document.querySelector('[name="percent"]');
const amount = document.querySelector('.amount');
const result = document.querySelector('[name="result"]');
function percentageCalculator() {
result.value = ((percent.value * amount.value) / 100).toFixed(2)
}
myForm.addEventListener('submit', e=>e.preventDefault())
myForm.addEventListener('input', percentageCalculator)
// myForm.result.value = percentageCalculator()
fieldset { margin-top: 1em;
}
label {
display: inline-block; width: 8em; text-align: left;
}
input {
font-size: .8em; text-align: left; display: inline-block; width: 8em;
}
output::before {
content: '';
}
output {
font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;
}
<h2>Percentage Calculator</h2>
<form action="" id="my-form">
<fieldset>
<legend>Calculate Percentage :</legend>
<append>What is <input type="number" name="percent" step=any min=0> % of </append>
<label><input type="number" class="amount" step=any min=0></label>
</fieldset>
<fieldset><br>
<legend>Result :</legend>
<output name="result" value='0'></output>
<br><br>
<button type="reset">Reset Calculator!</button>
</fieldset>
</form>
If it is possible for you to modify HTML template then you can add name attribute to the amount input as well then you can get the element with myForm.inputName..
Alternative solution: https://codepen.io/Maniraj_Murugan/pen/KKpdgXo

Use oninput as I did below. Also give the amount input field a name. it's missing in the OP.
// Percentage Calculator
const myForm = document.getElementById('my-form');
myForm.oninput = () => {
myForm.result.value = percentageCalculator(myForm.amount.value, myForm.percent.value);
}
function percentageCalculator(amount, percent) {
return ((percent * amount) / 100).toFixed(2)
}
fieldset { margin-top: 1em;
}
label {
display: inline-block; width: 8em; text-align: left;
}
input {
font-size: .8em; text-align: left; display: inline-block; width: 8em;
}
output::before {
content: '';
}
output {
font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;
}
<h2>Percentage Calculator</h2>
<form action="" id="my-form">
<fieldset>
<legend>Calculate Percentage :</legend>
<append>What is <input type="number" name="percent" step=any min=0> % of </append>
<label><input type="number" name="amount" class="amount" step=any min=0></label>
</fieldset>
<fieldset><br>
<legend>Result :</legend>
<output name="result" value='0'></output>
<br>
<button type="reset">Reset Calculator!</button>
</fieldset>
</form>

Pass the parameters into the function as a local scope and return the result back.
function percentageCalculator(amount,percent) {
return ((percent *amount) / 100).toFixed(2)
}
myForm.result.value = percentageCalculator()

// Percentage Calculator
const calculatedResult = document.getElementById('result');
function mySubmitFunction(e) {
e.preventDefault();
const percent = document.getElementById('percent').value;
const amount = document.getElementById('amount').value;
calculatedResult.value = percentageCalculator(amount,percent);
return false;
}
function percentageCalculator(amount,percent) {
return ((percent *amount) / 100).toFixed(2)
}
fieldset { margin-top: 1em;
}
label {
display: inline-block; width: 8em; text-align: left;
}
input {
font-size: .8em; text-align: left; display: inline-block; width: 8em;
}
output::before {
content: '';
}
output {
font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;
}
<h2>Percentage Calculator</h2>
<form action="" onsubmit="return mySubmitFunction(event)" id="my-form">
<fieldset>
<legend>Calculate Percentage :</legend>
<append>What is <input type="number" id="percent" name="percent" step=any min=0> % of </append>
<label><input type="number" id="amount" class="amount" step=any min=0></label>
</fieldset>
<fieldset><br>
<legend>Result :</legend>
<output id="result" name="result" value='0'></output>
<br><br>
<button type="submit">Calculate!</button>
</fieldset>
</form>
Your mistake:
Submit button instead of reset
Prevent default once it's submitted
reference element using ID

Transfer input from prompt() into a text field

I have a HTML page in which when the start button is being pressed, a prompt box will appear to prompt the user to enter his/her name. When user enters his/her name and confirms the input, it would appear on the black box (as shown in the code) with white text color. I am not sure of how to "transfer" the value from prompt() to text field. I know the value of the input fields are empty by default.
function myFunction() {
var person = prompt("Please enter your name");
if (person != null) {
person = document.getElementById(input).value;
}
}
#input{
width: 15%;
padding: 50px 50px;
margin: 8px 0;
background-color: #191818;
color: white;
}
#input1 {
width: 15%;
padding: 50px 50px;
margin: 8px 0;
background-color: #7C7878;
color: white;
}
.btnEdit{
width: 30px;
margin: 5px;
display: block;
font-weight:bold;
text-align:center;
font-size:10px;
line-height:15px;
}
<h2>Part 3</h2>
<button onclick="return myFunction()" id="strt" value="Start">Start</button>
<button onclick="return reset()" id="clr" value="Clear">Clear</button> <br />
<br>
<input type="text" id="input" style="text-align:center;" name="input"/>
<button id="swap" value="Swap" class="btnEdit">--></button>
<button id="swap1" value="Swap1" class="btnEdit"><--</button>
<input type="text" id="input1" value="" style="text-align:center;" name="input1"/>
Expected output would be for the user to enter his/her name in the prompt and upon confirmation, his/her name will appear in the text field in black with white text colors.

You just need to swap it.
person = document.getElementById(input).value;
The above is wrong. It should be:
document.getElementById("input").value = person;
And you need to update the "input" too. It's not a constant.
function myFunction() {
var person = prompt("Please enter your name");
if (person != null) {
document.getElementById("input").value = person;
}
}
#input {
width: 15%;
padding: 50px 50px;
margin: 8px 0;
background-color: #191818;
color: white;
}
#input1 {
width: 15%;
padding: 50px 50px;
margin: 8px 0;
background-color: #7C7878;
color: white;
}
.btnEdit {
width: 30px;
margin: 5px;
display: block;
font-weight: bold;
text-align: center;
font-size: 10px;
line-height: 15px;
}
<h2>Part 3</h2>
<button onclick="return myFunction()" id="strt" value="Start">Start</button>
<button onclick="return reset()" id="clr" value="Clear">Clear</button> <br />
<br>
<input type="text" id="input" style="text-align:center;" name="input" />
<button id="swap" value="Swap" class="btnEdit">--></button>
<button id="swap1" value="Swap1" class="btnEdit"><--</button>
<input type="text" id="input1" value="" style="text-align:center;" name="input1" />

function myFunction() {
var person = prompt("Please enter your name");
if (person != null) {
document.getElementById('input').value = person;
}
}
#input{
width: 15%;
padding: 50px 50px;
margin: 8px 0;
background-color: #191818;
color: white;
}
#input1 {
width: 15%;
padding: 50px 50px;
margin: 8px 0;
background-color: #7C7878;
color: white;
}
.btnEdit{
width: 30px;
margin: 5px;
display: block;
font-weight:bold;
text-align:center;
font-size:10px;
line-height:15px;
}
<h2>Part 3</h2>
<button onclick="return myFunction()" id="strt" value="Start">Start</button>
<button onclick="return reset()" id="clr" value="Clear">Clear</button> <br />
<br>
<input type="text" id="input" style="text-align:center;" name="input"/>
<button id="swap" value="Swap" class="btnEdit">--></button>
<button id="swap1" value="Swap1" class="btnEdit"><--</button>
<input type="text" id="input1" value="" style="text-align:center;" name="input1"/>

Form validation button without submitting the form

I have a form, and I want to check validation ( if the inputs are correct) without submitting that form. How is that possible?
The validations in this example is as follows:
If the user enters and for first name and jkp for last name and clicks on the validate button, the document.write function will print success without submitting the form.
$( "#myform" ).submit(function( event ) {
var name = $("#fname").val();
var lname = $("#lname").val();
if(name === "and" && lname ==="jkp")
{document.write("Correct answer");}
else{document.write("Incorrect answer");}
});
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" action="#">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</select>
<input type="submit" value="Submit">
<input style="background:red" type="submit" value="Validate">
</form>

make validate but not a submit type
Changes i have made:
in js
$( "#vali" ).click(function( event ) {
var name = $("#fname").val();
var lname = $("#lname").val();
$('#fname, #lname').css({
'color' : 'red'
});
if(name === "and" && lname ==="jkp")
{alert("Your answers are correct!");}
else{alert("Your answer is not correct");}
});
in html
<input id="vali" style="background:red" type="button" value="Validate">
DEMO:
$( "#myform" ).submit(function( event ) {
var name = $("#fname").val();
var lname = $("#lname").val();
if(name === "and" && lname ==="jkp")
{alert("Your answers are correct!");}
else{alert("Your answer is not correct");}
});
$( "#vali" ).click(function( event ) {
var name = $("#fname").val();
var lname = $("#lname").val();
$('#fname, #lname').css({
'color' : 'red'
});
if(name === "and" && lname ==="jkp")
{alert("Your answers are correct!");}
else{alert("Your answer is not correct");}
});
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
#vali{
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" action="#">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<input type="submit" value="Submit">
<input id="vali" style="background:red" type="button" value="Validate">
</form>

You can also try AJAX requests supposing you will do the validation on the server side, also hiding the business logic from the client.
Another solution is to create a javascript method for validation that is called after focus lost/key up which takes the elements by their id and passes them to this function.

You can simply add event.preventDefault() to the submit event if the validation fails:
$( "#myform" ).submit(function( event ) {
var name = $("#fname").val();
var lname = $("#lname").val();
if(name === "and" && lname ==="jkp") {
alert("Success");
}
else {
event.preventDefault();
alert("failed");
}
});
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" action="#">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</select>
<input type="submit" value="Submit">
<input style="background:red" type="submit" value="Validate">
</form>

Not checked but you can use onchange(),
The change event occurs when the value of an element has been changed (only works on input, textarea and select elements).
The change() method triggers the change event or attaches a function to run when a change event occurs.
$( "#myform" ).change(function( event ) {
var name = $("#fname").val();
var lname = $("#lname").val();
if(name === "and" && lname ==="jkp"){
alert("Your answers are correct!");
}
else{
alert("Your answer is not correct");
}
}

Validate if radio button was checked?

I have the scripts below to validate text field..
< script src = "https://img.en25.com/i/livevalidation_standalone.compressed.js"
type = "text/javascript" >
< script type = "text/javascript" >
var dom1 = document.querySelector('#form3471 #field1');
var field1 = new LiveValidation(dom1, {
validMessage: "",
onlyOnBlur: false,
wait: 300
});
field1.add(Validate.Presence, {
failureMessage: "This field is required"
});
< /script>
<form method="post" name="" action="https://s1788.t.eloqua.com/e/f2" onsubmit="setTimeout(function(){if(document.querySelector){var s=document.querySelector('form#form3471 input[type=submit]');if(s){s.disabled=true;}}},100);return true;" id="form3471"
class="elq-form">
<label for="field1" style="display: block; line-height: 150%; padding: 1px 0pt 3px; float: left; width: 31%; margin: 0pt 15px 0pt 0pt; word-wrap: break-word">Name:*</label>
<input id="field1" name="C_FirstName" type="text" value="" style="width: 46%">
I added some radio buttons & would like to validate the radio buttons as well, how do I modify them to work for radio button?
<label for="field0" style="display: block; line-height: 150%; padding: 1px 0pt 3px; white-space: nowrap">Country*</label>
<label style="display: block; float: left; padding-right: 10px; padding-left: 22px; text-indent: -22px">
<input name="radioButtons" type="radio" value="country1" style="vertical-align: middle; margin-right: 7px">
<span style="vertical-align: middle">Country1</span>
</label>
<label style="display: block; float: left; padding-right: 10px; padding-left: 22px; text-indent: -22px">
<input name="radioButtons" type="radio" value="country2" style="vertical-align: middle; margin-right: 7px">
<span style="vertical-align: middle">Country2</span>
</label>

Do a function for your radiobutton. Right now you don't have a function for it.
Like this:
function myFunction() {
var answer = document.getElementById("radioBtn").checked;
document.getElementById("value").innerHTML = answer;
}
http://codepen.io/anon/pen/oBPpZz

Please try this
if ($('input[name=radioButtons]:checked').val() == 'country1' ) {
//validation
}

How to swap text both on hover and onclick

I have a default message on the top of a donation form and I would like it to change dynamically depending on which amount the user hovers or clicks.
Each amount as well as "€Other" should have a corresponding message. For Example: "with €5.00 we can accomplish this..." With €10.00 we could do that..."
These messages should change accordingly on hover but also remain visible if the corresponding option is selected.
If the user deselects a previously selected option or if no option is selected, the default message should reappear.
I've tried different methods without success, I would really appreciate some help making this happen.
FIDDLE
HTML
<p>Choose below the amount of your donation</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="louzanimalespaypal#gmail.com">
<label><input type="checkbox" name="amount" class="checkbutton" value="5,00"><span>€05.00</span></label>
<label><input type="checkbox" name="amount" class="checkbutton" value="10,00"><span>€10.00</span></label>
<label><input type="checkbox" name="amount" class="checkbutton" value="15,00"><span>€15.00</span></label>
<label><input type="checkbox" name="amount" class="checkbutton" value="20,00"><span>€20.00</span></label>
<input type="number" class="textBox" name="amount" placeholder="€ Other">
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="item_number" value="Donation">
<input type="hidden" name="currency_code" value="EUR">
<input type="hidden" name="lc" value="PT">
<input type="hidden" name="bn" value="Louzanimales_Donation_WPS_PT">
<input type="hidden" name="return" value="http://www.louzanimales.py/agradecimentos.htm">
<br style="clear: both;"/>
<input class="donation-button" type="submit" value="Send Donation">
</form>
JavaScript
$('input.checkbutton').on('change', function() {
$('input.checkbutton').not(this).prop('checked', false);
});
$(".textBox").focus(function() {
$(".checkbutton").prop("checked", false);
});
$(".checkbutton").change(function() {
if($(this).is(":checked")) {
$(".textBox").val("");
}
});
CSS
body {
box-sizing: border-box;
padding: 50px;
font-family: sans-serif;
font-size: 18px;
text-align: center;
}
label {
margin: 1%;
float: left;
background: #ccc;
text-align: center;
width: 18%;
}
label:hover {
background: grey;
color: #fff;
}
label span {
text-align: center;
box-sizing: border-box;
padding: 10px 0;
display: block;
}
label input {
display: none;
left: 0;
top: -10px;
}
input:checked + span {
background-color: black;
color: #fff;
}
/* Hide HTML5 Up and Down arrows in input type="number" */
input[type=number] {-moz-appearance: textfield;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
.textBox {
margin: 1%;
float: left;
background: #ccc;
border: 0;
padding: 10px 0;
text-align: center;
font-family: sans-serif;
font-size: 18px;
width: 18%;
-webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
-moz-box-sizing: border-box; /* For all Gecko based browsers */
box-sizing: border-box;
}
.textBox:focus {
box-shadow:none;
box-shadow:inset 0 0 4px 0 #000;
-moz-box-shadow:inset 0 0 4px 0 #000;
-wevkit-box-shadow:inset 0 0 4px 0 #000;
}
.donation-button {
width: 98%;
margin: 1%;
border: 0;
background: grey;
color: white;
text-align: center;
font-family: sans-serif;
font-size: 18px;
padding: 10px 0 10px 0;
-webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
-moz-box-sizing: border-box; /* For all Gecko based browsers */
box-sizing: border-box;
}
.donation-button:hover {
background: black;
}

David! Finally i improved it :)
You can customize your own message in HTML seperatly by data-alertOnHover which shown on hover on button or textBox and data-alertAfter which shown select a button or type a number in textBox. It covers all of states as well as less cumbersome.
Also
if the user deselects a previously selected option or if no option is
selected, the default message will reappear.
var defaultTxt = $('#alert').text();
var checked;
$('input.checkbutton').change(function() {
if ($(this).is(":checked")) {
$(".textBox").val("");
$('#alert').text($(this).attr("data-alertAfter") + $(this).val());
checked = $(this);
}
else
{
$('#alert').text(defaultTxt);
checked = undefined;
}
$('input.checkbutton').not(this).prop('checked', false);
});
$('.input-container').hover(
function() {
$('#alert').text($(this).children('input').attr("data-alertOnHover"));
},
function() {
if (checked)
$('#alert').text($(checked).attr("data-alertAfter") + $(checked).val());
else
$('#alert').text(defaultTxt);
}
);
$(".textBox").focus(function() {
checked = undefined;
$(".checkbutton").prop("checked", false)
}).blur(function() {
if ($(this).val() != "") {
checked = $(this);
$('#alert').text($(this).attr("data-alertAfter") + $(this).val())
}
});
body {
box-sizing: border-box;
padding: 50px;
font-family: sans-serif;
font-size: 18px;
text-align: center;
}
label {
margin: 1%;
float: left;
background: #ccc;
text-align: center;
width: 18%;
}
label:hover {
background: grey;
color: #fff;
}
label span {
text-align: center;
box-sizing: border-box;
padding: 10px 0;
display: block;
}
label input {
display: none;
left: 0;
top: -10px;
}
input:checked + span {
background-color: black;
color: #fff;
}
/* Hide HTML5 Up and Down arrows in input type="number" */
input[type=number] {
-moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
.textBox {
margin: 1%;
float: left;
background: #ccc;
border: 0;
padding: 10px 0;
text-align: center;
font-family: sans-serif;
font-size: 18px;
width: 18%;
-webkit-box-sizing: border-box;
/* For legacy WebKit based browsers */
-moz-box-sizing: border-box;
/* For all Gecko based browsers */
box-sizing: border-box;
}
.textBox:focus {
box-shadow: none;
box-shadow: inset 0 0 4px 0 #000;
-moz-box-shadow: inset 0 0 4px 0 #000;
-wevkit-box-shadow: inset 0 0 4px 0 #000;
}
.donation-button {
width: 98%;
margin: 1%;
border: 0;
background: grey;
color: white;
text-align: center;
font-family: sans-serif;
font-size: 18px;
padding: 10px 0 10px 0;
-webkit-box-sizing: border-box;
/* For legacy WebKit based browsers */
-moz-box-sizing: border-box;
/* For all Gecko based browsers */
box-sizing: border-box;
}
.donation-button:hover {
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p id="alert">Choose below the amount of your donation</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="louzanimalespaypal#gmail.com">
<label class="input-container">
<input type="checkbox" name="amount" class="checkbutton" value="5,00" data-alertOnHover="With €5.00 we can accomplish this..." data-alertAfter="Your donation will be €"><span>€05.00</span></label>
<label class="input-container">
<input type="checkbox" name="amount" class="checkbutton" value="10,00" data-alertOnHover="With €10.00 we could do that..." data-alertAfter="Your donation will be €"><span>€10.00</span></label>
<label class="input-container">
<input type="checkbox" name="amount" class="checkbutton" value="15,00" data-alertOnHover="With €15.00 we could do that..." data-alertAfter="Your donation will be €"><span>€15.00</span></label>
<label class="input-container">
<input type="checkbox" name="amount" class="checkbutton" value="20,00" data-alertOnHover="With €20,00 we could do more than that..." data-alertAfter="Your donation will be €"><span>€20.00</span></label>
<span class="input-container">
<input type="number" class="textBox" name="amount" placeholder="€ Other" data-alertOnHover="just type how much you want to donate..." data-alertAfter="Your donation will be €">
</span>
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="item_number" value="Donation">
<input type="hidden" name="currency_code" value="EUR">
<input type="hidden" name="lc" value="PT">
<input type="hidden" name="bn" value="Louzanimales_Donation_WPS_PT">
<input type="hidden" name="return" value="http://www.louzanimales.py/agradecimentos.htm">
<br style="clear: both;" />
<input class="donation-button" type="submit" value="Send Donation">
</form>

i think this is exactly do what you need.
JSFIDDLE
HTML is not changed but "id" of:
<p id="alert">Choose below the amount of your donation</p>
Javascript
var defaultTxt = $('#alert').text();
$('input.checkbutton').change( function() {
$('input.checkbutton').not(this).prop('checked', false);
if($(this).is(":checked")) {
$(".textBox").val("");
}
var check = $(this).prop('checked');
var value = $(this).val();
switch(value)
{
case("5,00"):
if(check)
$('#alert').text("with €5.00 we can accomplish this...");
else
$('#alert').text(defaultTxt);
break;
case("10,00"):
if(check)
$('#alert').text("With €10.00 we could do that...");
else
$('#alert').text(defaultTxt);
break;
case("15,00"):
if(check)
$('#alert').text("With €15.00 we could do that...");
else
$('#alert').text(defaultTxt);
break;
case("20,00"):
if(check)
$('#alert').text("With €20,00 we could do more than that...");
else
$('#alert').text(defaultTxt);
break;
default:
$('#alert').text("");
break;
}
});
$('input.checkbutton').hover(function() {
alert();
},function() {
}
);
$('input.checkbutton').parent().hover(
function() {
var value = $(this).children('input.checkbutton').val();
switch(value)
{
case("5,00"):
$('#alert').text("with €5.00 we can accomplish this...");
break;
case("10,00"):
$('#alert').text("With €10.00 we could do that...");
break;
case("15,00"):
$('#alert').text("With €15.00 we could do that...");
break;
case("20,00"):
$('#alert').text("With €20,00 we could do more than that...");
break;
default:
$('#alert').text("");
break;
}
}, function() {
var othervalue = $('input.checkbutton:checked').val();
switch(othervalue)
{
case("5,00"):
$('#alert').text("with €5.00 we can accomplish this...");
break;
case("10,00"):
$('#alert').text("With €10.00 we could do that...");
break;
case("15,00"):
$('#alert').text("With €15.00 we could do that...");
break;
case("20,00"):
$('#alert').text("With €20,00 we could do more than that...");
break;
default:
$('#alert').text("");
break;
}
}
);
$(".textBox").focus(function() {
$(".checkbutton").prop("checked", false);
$('#alert').text(defaultTxt);
});
$(".textBox").blur(function() {
var txtVal = $(this).val();
if(txtVal != "")
$('#alert').text("With €"+ txtVal +" we could do that");
});

You can use data attributes for input fields, and data can hold text. Also, to achieve desired functionality, you could set 'flag' which will check if option is selected and 'lock' text (so it will not change on hover). Something like this:
locked=false;
$('input.checkbutton').on('change', function() {
$('#desc').text( $(this).data('text') );
if($(this).prop('checked')) {
locked=true;
}
else {
locked=false;
}
$('input.checkbutton').not(this).prop('checked', false);
});
$(".textBox").focus(function() {
$(".checkbutton").prop("checked", false);
});
$(".checkbutton").change(function() {
if($(this).is(":checked")) {
$(".textBox").val("");
}
});
default_text="Choose below the amount of your donation";
$( 'label').hover(
function() {
if(!locked)
$('#desc').text( $(this).children().data('text') );
}, function() {
if(!locked)
$('#desc').text( default_text );
}
);
body {
box-sizing: border-box;
padding: 50px;
font-family: sans-serif;
font-size: 18px;
text-align: center;
}
label {
margin: 1%;
float: left;
background: #ccc;
text-align: center;
width: 18%;
}
label:hover {
background: grey;
color: #fff;
}
label span {
text-align: center;
box-sizing: border-box;
padding: 10px 0;
display: block;
}
label input {
display: none;
left: 0;
top: -10px;
}
input:checked + span {
background-color: black;
color: #fff;
}
/* Hide HTML5 Up and Down arrows in input type="number" */
input[type=number] {-moz-appearance: textfield;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
.textBox {
margin: 1%;
float: left;
background: #ccc;
border: 0;
padding: 10px 0;
text-align: center;
font-family: sans-serif;
font-size: 18px;
width: 18%;
-webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
-moz-box-sizing: border-box; /* For all Gecko based browsers */
box-sizing: border-box;
}
.textBox:focus {
box-shadow:none;
box-shadow:inset 0 0 4px 0 #000;
-moz-box-shadow:inset 0 0 4px 0 #000;
-wevkit-box-shadow:inset 0 0 4px 0 #000;
}
.donation-button {
width: 98%;
margin: 1%;
border: 0;
background: grey;
color: white;
text-align: center;
font-family: sans-serif;
font-size: 18px;
padding: 10px 0 10px 0;
-webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
-moz-box-sizing: border-box; /* For all Gecko based browsers */
box-sizing: border-box;
}
.donation-button:hover {
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="desc">Choose below the amount of your donation</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="louzanimalespaypal#gmail.com">
<label><input type="checkbox" name="amount" class="checkbutton" value="5,00" data-text="With 5 euros we can..."><span>€05.00</span></label>
<label><input type="checkbox" name="amount" class="checkbutton" value="10,00" data-text="With 10 euros we can..."><span>€10.00</span></label>
<label><input type="checkbox" name="amount" class="checkbutton" value="15,00" data-text="With 15 euros we can..."><span>€15.00</span></label>
<label><input type="checkbox" name="amount" class="checkbutton" value="20,00" data-text="With 20 euros we can..."><span>€20.00</span></label>
<input type="number" class="textBox" name="amount" placeholder="€ Other">
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="item_number" value="Donation">
<input type="hidden" name="currency_code" value="EUR">
<input type="hidden" name="lc" value="PT">
<input type="hidden" name="bn" value="Louzanimales_Donation_WPS_PT">
<input type="hidden" name="return" value="http://www.louzanimales.py/agradecimentos.htm">
<br style="clear: both;"/>
<input class="donation-button" type="submit" value="Send Donation">
</form>
P.S. If i didn't understand your requirements, and you want text changing on hover, even when option is selected, you can just remove locked var...
EDIT: I think it is perfect now: https://jsfiddle.net/y05uzdzc/ based on your description.

When I run into stuff like this, I pick or create a way to easily distinguish one input from the others.
Unique ID's make it quick, and easy to find. In this example, your 5 Euro donation would get the ID of donation-5.
$("body").on("mouseover", "input", function () {
if ($(this).attr("id") === "donation-5") {
// --> DO your hover thing.
} else if (so forth and so on...){
// .....
}
})
Also, I'd consider using HTML5 button tags.
Ah yes... Nearly forgot, you want to monitor two event types
You'll need two 'event listeners':
The one I listed above, as well as the one that follows:
$("body").on("click", "input", function () {
if ($(this).attr("id") === "donation-5") {
// --> DO your hover thing.
} else if (so forth and so on...){
// .....
}
})

First, I think you want radio buttons instead of checkboxes. Once you make that change, I would just capture the change and hover events.
On change, you can always update your message. On hover, see if any of the items are checked, if so, leave the message, otherwise you can change it.
Here's a running example:
$(".donation").hover(function() {
let checkCount = $("form .donation :checked").length;
if (checkCount == 0) {
setMessage(this);
}
}).change(function() {
setMessage(this);
});
function setMessage(item) {
var text = $(item).text();
$("#message").text("Thanks for pledge of " + text);
}
body {
box-sizing: border-box;
padding: 50px;
font-family: sans-serif;
font-size: 18px;
text-align: center;
}
label {
margin: 1%;
float: left;
background: #ccc;
text-align: center;
width: 18%;
}
label:hover {
background: grey;
color: #fff;
}
label span {
text-align: center;
box-sizing: border-box;
padding: 10px 0;
display: block;
}
label input {
display: none;
left: 0;
top: -10px;
}
input:checked + span {
background-color: black;
color: #fff;
}
/* Hide HTML5 Up and Down arrows in input type="number" */
input[type=number] {
-moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
.textBox {
margin: 1%;
float: left;
background: #ccc;
border: 0;
padding: 10px 0;
text-align: center;
font-family: sans-serif;
font-size: 18px;
width: 18%;
-webkit-box-sizing: border-box;
/* For legacy WebKit based browsers */
-moz-box-sizing: border-box;
/* For all Gecko based browsers */
box-sizing: border-box;
}
.textBox:focus {
box-shadow: none;
box-shadow: inset 0 0 4px 0 #000;
-moz-box-shadow: inset 0 0 4px 0 #000;
-wevkit-box-shadow: inset 0 0 4px 0 #000;
}
.donation-button {
width: 98%;
margin: 1%;
border: 0;
background: grey;
color: white;
text-align: center;
font-family: sans-serif;
font-size: 18px;
padding: 10px 0 10px 0;
-webkit-box-sizing: border-box;
/* For legacy WebKit based browsers */
-moz-box-sizing: border-box;
/* For all Gecko based browsers */
box-sizing: border-box;
}
.donation-button:hover {
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="message">Choose below the amount of your donation</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="louzanimalespaypal#gmail.com">
<label class="donation">
<input type="radio" name="amount" class="checkbutton" value="5,00"><span>€05.00</span>
</label>
<label class="donation">
<input type="radio" name="amount" class="checkbutton" value="10,00"><span>€10.00</span>
</label>
<label class="donation">
<input type="radio" name="amount" class="checkbutton" value="15,00"><span>€15.00</span>
</label>
<label class="donation">
<input type="radio" name="amount" class="checkbutton" value="20,00"><span>€20.00</span>
</label>
<input type="number" class="textBox" name="amount" placeholder="€ Other">
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="item_number" value="Donation">
<input type="hidden" name="currency_code" value="EUR">
<input type="hidden" name="lc" value="PT">
<input type="hidden" name="bn" value="Louzanimales_Donation_WPS_PT">
<input type="hidden" name="return" value="http://www.louzanimales.py/agradecimentos.htm">
<br style="clear: both;" />
<input class="donation-button" type="submit" value="Send Donation">
</form>

First of all, do not trust that clicking is the only of way of selecting a checkbox. An user can very well tab his way to it and spacebar its change.
Secondly, the behavior you want is radio button, not checkboxes.
This is how I'd do it:
HTML
<p id="myTextIdentifier">Choose below the amount of your donation</p>
... <!- Hidden for brevity ->
<label><input type="radio" name="amount" data-message="Value is 5 message" value="5,00"><span>€05.00</span></label>
<label><input type="radio" name="amount" data-message="Value is 10 message" value="10,00"><span>€10.00</span></label>
<label><input type="radio" name="amount" data-message="Value is 15 message" value="15,00"><span>€15.00</span></label>
<label><input type="radio" name="amount" data-message="Value is 20 message" value="20,00"><span>€20.00</span></label>
<input type="number" name="amount" data-message="Other value message" placeholder="€ Other">
JavaScript
$('#otherValueIdentifier')
.focus(function() {
$(':radio').prop('checked', false);
})
.change(function() {
changeText($(this).val().length
? $(this).data('message')
: '');
});
$(':radio').change(function() {
changeText($(this).is(':checked')
? $(this).data('message')
: '');
});
// Please keep in mind that this has a few flaws, I'll revise it later
$('[data-message]').hover(function () {
// this is the mouseEnter function
changeText($(this).data('message'));
}, function() {
// this is the mouseLeave function
changeText($('[data-message]:checked').data('message'));
});
function changeText(text) {
$('#myTextIdentifier').val(text || 'Default message');
}