How to swap text both on hover and onclick

Question

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

mohamad faramarzi · Accepted Answer

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>

How to swap text both on hover and onclick

Tags:

javascript

jquery

css

David Martins

1 Answers

mohamad faramarzi

Recent Activity

Donate For Us

How to swap text both on hover and onclick

Tags:

javascript

jquery

css

David Martins

1 Answers

mohamad faramarzi

Related questions

Recent Activity

Donate For Us