admin管理员组文章数量:1326344
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>
本文标签: javascriptTrying to concatenate a string and variable in jqueryStack Overflow
版权声明:本文标题:javascript - Trying to concatenate a string and variable in jquery - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742198241a2431479.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论