Trying to concatenate a string and variable in jquery

Question

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!

guest271314 · Accepted Answer · 2016-03-12 00:24:08Z

2

You 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.com/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>

answered Mar 12, 2016 at 0:24

guest271314

1

Sign up to request clarification or add additional context in comments.

1 Comment

avasssso Over a year ago

Thank you so much! Just what I needed!

Bosworth99 · Accepted Answer · 2016-03-12 00:23:17Z

2

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?

edited Mar 12, 2016 at 0:23

answered Mar 12, 2016 at 0:17

Bosworth99

4,2445 gold badges39 silver badges53 bronze badges

Comments

John Slegers · Accepted Answer · 2016-03-12 00:34:11Z

Approach 1 :

$(document).ready(function(){
    $('#donation-amount').keyup(function() {
         var amount = $('#display-amount').text('$' + $(this).val());
    });
})

<script type="text/javascript" src="https://code.jquery.com/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.com/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>

Collectives™ on Stack Overflow

Trying to concatenate a string and variable in jquery

3 Answers 3

1 Comment

Comments

Approach 1 :

Approach 2 :

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Approach 1 :

Approach 2 :

Comments

Your Answer

Sign up or log in

Post as a guest

Related