How to change the text on both hover and onclick

Question

I have a default message at the top of the donation form, and I would like it to dynamically change depending on how much the user is hovering or clicking on.

Each amount, as well as "€ Other" must have a corresponding message. For example: "from € 5.00 we can do it ..." From € 10.00 we could do it ... "

These messages should change accordingly on hover, but also remain visible if the corresponding option is selected.

If the user deselected a previously selected option or if the option is not selected, a default message should appear.

I tried different methods without success, I would really appreciate help in this.

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=" [e-mail] "> <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; } 

Answer 1

David! Finally, I improved it :) You can customize your own message in HTML using data-alertOnHover, which is displayed when you hover over a button or text field and a notification about the data. After that select the button or enter the number in the text box. It covers all states, as well as less cumbersome.

Besides

if the user deselects a previously selected parameter or if not 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=" [e-mail] "> <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> 

Answer 2

You can use data attributes for input fields, and data can contain text. In addition, to achieve the desired functionality, you can set a flag that will check whether the option has been selected and "block" the text (so that it does not change when you hover). Something like that:

 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=" [e-mail] "> <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> 

PS If I do not understand your requirements, and you want the text changes to hang, even if the option is selected, you can simply delete locked var ...

EDIT: I think this is fine now: https://jsfiddle.net/y05uzdzc/ based on your description.

Answer 3

I think this is exactly what you need. JSFIDDLE

HTML does not change, but "id":

 <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"); }); 

Answer 4

When I come across such things, I choose or create a way to easily distinguish one input from others.

A unique identifier allows you to quickly and easily find. In this example, your donation of 5 euros will receive a donation certificate of 5.

 $("body").on("mouseover", "input", function () { if ($(this).attr("id") === "donation-5") { // --> DO your hover thing. } else if (so forth and so on...){ // ..... } }) 

In addition, I would consider using HTML5 button tags.

Oh yes ... Almost forgot, you want to control two types of events

You will need two "event listeners":

What I listed above, as well as the following:

 $("body").on("click", "input", function () { if ($(this).attr("id") === "donation-5") { // --> DO your hover thing. } else if (so forth and so on...){ // ..... } }) 

Answer 5

Firstly, I think you need radio buttons instead of checkboxes. Once you make this change, I just grab the change and hover events.

When changing, you can always update your message. When you hover, check if any item is checked, if so, leave a message, otherwise you can change it.

Here is an example of work:

 $(".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=" [e-mail] "> <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> 

Answer 6

First of all, do not believe that clicking is the only way to select the check box. The user can very well insert his path to it and a space in it to change.

Secondly, the behavior you want is a switch, not checkboxes.

Here's how I 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'); }