Home » Javascript » How to call a function upon html input on laravel platform [on hold]

How to call a function upon html input on laravel platform [on hold]

Posted by: admin August 19, 2018 Leave a comment

Questions:

Please I need someone to help me look into this. don’t know where I got it wrong and why it’s not working using a new template but working on old design.

               <div class="panel-body"> 
                    <form class="form form-horizontal">                     
                  <div class="form-body">
                    <h4 class="form-section"><i class="la la-eye"></i> <strong>{{ $page_title }}</strong></h4>
                    <div class="text-center">
                        <h3 class="bold uppercase">Current Balance : <strong>{{ round(Auth::user()->balance, $basic->deci) }} - {{ $basic->currency }}</strong></h3>
                    </div>
                    <hr>
                    <div class="form-group row">
                      <label style="margin-top: 5px;font-size: 14px;" class="col-md-4 label-control"><strong>Investment Amount : </strong></label>
                      <div class=" col-md-4 input-group">
                          <input type="text" value="" name="amount" id="amount" class="form-control bold" placeholder="Enter Invest Amount" required>
                          <span class="input-group-addon">&nbsp;<strong>{{ $basic->currency }}</strong></span>
                          <input type="hidden" name="plan" id="plan" value="{{ $plan->id }}">
                      </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div id="result"></div>
                        </div>
                    </div>
                    <hr>                        
                  </div>
                </form>
                </div>

And the Function below the page is this

    <script type='text/javascript'>

    jQuery(document).ready(function(){
        $('#amount').on('input', function() {
            var amount = $("#amount").val();
            var plan = $("#plan").val();
            $.post(
                    '{{ url('/user/invest-amount-chk') }}',
                    {
                        _token: '{{ csrf_token() }}',
                        amount : amount,
                        plan : plan
                    },
                    function(data) {
                        $("#result").html(data);
                    }
            );
        });
    });
</script>

When ever I input the amount, It should automatically display the “result” called below the input column.

Answers: