I am trying to concatenate in Jquery and am having lots of trouble. Everytime the page loads I want the $ sign to appear in my div. I was able to do it in Javascript but in Jquery I can't seem to get it.
Here is my js
$(document).ready(function(){
$('#donation-amount').keyup(function() {
var amount = $('#display-amount').text($(this).val());
});
})
I've tried this
$('.display-amount').append("<span>" + '$' + amount + "</span>");
which gives me this
I have also tried making a span tag and gave it a class of dollar and tried these 2 things
$('#dollar').val('$' + amount);
$('#dollar').val($('$').val() + amount);
Here is my form
<div class="row">
<div class="form-group">
<fieldset>
<legend class="text-center">How much would you like to donate</legend>
<div class="choose-pricing">
<div class="btn-group">
<button type="button" class="btn btn-default selectvalue active">10</button>
<button type="button" class="btn btn-default selectvalue">15</button>
<button type="button" class="btn btn-default selectvalue">20</button>
<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom">
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
</div>
</fieldset>
</div>
</div>
Any help would be appreciated!
I am trying to concatenate in Jquery and am having lots of trouble. Everytime the page loads I want the $ sign to appear in my div. I was able to do it in Javascript but in Jquery I can't seem to get it.
Here is my js
$(document).ready(function(){
$('#donation-amount').keyup(function() {
var amount = $('#display-amount').text($(this).val());
});
})
I've tried this
$('.display-amount').append("<span>" + '$' + amount + "</span>");
which gives me this
I have also tried making a span tag and gave it a class of dollar and tried these 2 things
$('#dollar').val('$' + amount);
$('#dollar').val($('$').val() + amount);
Here is my form
<div class="row">
<div class="form-group">
<fieldset>
<legend class="text-center">How much would you like to donate</legend>
<div class="choose-pricing">
<div class="btn-group">
<button type="button" class="btn btn-default selectvalue active">10</button>
<button type="button" class="btn btn-default selectvalue">15</button>
<button type="button" class="btn btn-default selectvalue">20</button>
<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom">
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
</div>
</fieldset>
</div>
</div>
Any help would be appreciated!
Share Improve this question edited Mar 12, 2016 at 0:24 Bosworth99 4,2445 gold badges39 silver badges53 bronze badges asked Mar 12, 2016 at 0:01 avassssoavasssso 2572 gold badges10 silver badges23 bronze badges3 Answers
Reset to default 2You could use css
:before
to display $
character
$(document).ready(function() {
$('#donation-amount').keyup(function() {
var amount = $('#display-amount').text($(this).val());
});
})
#display-amount:before {
content: "$";
}
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="row">
<div class="form-group">
<fieldset>
<legend class="text-center">How much would you like to donate</legend>
<div class="choose-pricing">
<div class="btn-group">
<button type="button" class="btn btn-default selectvalue active">10</button>
<button type="button" class="btn btn-default selectvalue">15</button>
<button type="button" class="btn btn-default selectvalue">20</button>
<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom">
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
</div>
</fieldset>
</div>
</div>
You are setting amount
equal to a jQuery object, which is getting evaluated to a string [object Object]
. Try something like this:
var input = $("#input");
var output = $("#output");
input.keyup(function() {
var amount = input.val();
output.text('$' + amount);
});
Fiddle
You need to capture the value of the input and then insert it into the output container, on keyup. Pretty straightforward.
Also : if you can do this with vanilla javascript, why use jQuery?
Approach 1 :
$(document).ready(function(){
$('#donation-amount').keyup(function() {
var amount = $('#display-amount').text('$' + $(this).val());
});
})
<script type="text/javascript" src="https://code.jquery./jquery-1.12.1.min.js"></script>
<div class="row">
<div class="form-group">
<fieldset>
<legend class="text-center">How much would you like to donate</legend>
<div class="choose-pricing">
<div class="btn-group">
<button type="button" class="btn btn-default selectvalue active">10</button>
<button type="button" class="btn btn-default selectvalue">15</button>
<button type="button" class="btn btn-default selectvalue">20</button>
<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom">
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">$</div>
</div>
</div>
</fieldset>
</div>
</div>
Approach 2 :
$(document).ready(function(){
$('#donation-amount').keyup(function() {
var amount = $('#display-amount').text($(this).val());
});
})
<script type="text/javascript" src="https://code.jquery./jquery-1.12.1.min.js"></script>
<div class="row">
<div class="form-group">
<fieldset>
<legend class="text-center">How much would you like to donate</legend>
<div class="choose-pricing">
<div class="btn-group">
<button type="button" class="btn btn-default selectvalue active">10</button>
<button type="button" class="btn btn-default selectvalue">15</button>
<button type="button" class="btn btn-default selectvalue">20</button>
<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom">
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount">$<span id="display-amount"></span></div>
</div>
</div>
</fieldset>
</div>
</div>