javascript - Trying to concatenate a string and variable in jquery

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!

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 avasssso 2572 gold badges10 silver badges23 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 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./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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Trying to concatenate a string and variable in jquery - Stack Overflow

3 Answers 3

Approach 1 :

Approach 2 :

与本文相关的文章

评论列表(0)