TheBoss InTheHouse TheBoss InTheHouse - 1 year ago 57
jQuery Question

If not enough money disabled button?

I have a question.

This is my button :

$balance = "3";
<button type="submit" type=tex name="log" class="btn btn-primary">Ticket kaufen! Je mehr, desto mehr Chance habt ihr zu gewinnen!</button>


So, my problem is :

I want the button to become disabled if a user does not have enough money!

It is possible ? With Javascript or JQuery?

Sorry for my English!
I hope you can help me!

Thanks

Edit :

I have tired this! :

$balance = "3";
<button type="submit" type=tex name="log" class="btn btn-primary">Ticket kaufen! Je mehr, desto mehr Chance habt ihr zu gewinnen!</button>

<script>
$('button').attr('1838383', $balance)

if ($('button').attr('193939') < COSTOFITEM) {
$('button').hide()
}
</script>


But this doesn't work

Answer Source

I assume you are using bootstrap.

I assume you have an input field where the user can input a numeric value and when it becomes less the 3 dollars the button must be disable.

You need to add an event handler for the input field so that every time the user change the value a test must be done in order to enable or disable the button.

I try to explain with a snippet how to achive this result:

// when the document is loaded
$(function () {
  
  // every time the user change the input value
  $('#balance').on('input', function (e) {

    // set the property disabled of the button:
    //
    // 'button[name="log"]': means select a button with the
    // attribute name equal to the string log
    //
    //(+this.value < 3): means: translate the input value to
    // a number and test if it is less then 3
    //
    $('button[name="log"]').prop('disabled', (+this.value < 3));
  })
});
<!--
include the jquery and bootstrap 
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<!-- I assume you have a form like...  -->
<form action="#">
    <div class="form-actions">
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="number" value="1000" class="form-control currency" id="balance"/>
        </div>
        <button type="submit" name="log" class="btn btn-primary">Ticket kaufen! Je mehr, desto mehr Chance habt ihr zu
            gewinnen!
        </button>
    </div>
</form>