span onClick JQuery change text

Question

I'm trying to get a value from the database: SenderDriver->total_trips .

And all great, but I want to get a specific id so I have to put it into onClick() , then it set the value from the database variable: SenderDriver->total_trips .

This is the code

 <span onclick="readd( amounts{{$referral_detail->SenderDriver->total_trips}});" 
          data-target="#addMoneyModel" data-toggle="modal" id="{{$referral_detail->GetterDriver->id }}">
   <a data-original-title="Add Money" data-toggle="tooltip" id="{{ $referral_detail->GetterDriver->id }}" data-placement="top" class="btn text-white btn-sm btn-success menu-icon btn_detail action_btn"> 
    <i class="fa fa-money-bill"></i> 
   </a>
  </span>

Now I want the val to change a specific text when it's clicked using the above code. Btw all this is in .blade.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script type="text/javascript">
   function readd(){
      $("input:text").val(amounts);
    }
</script>

I tried a lot nothing working any help?

The input

<div class="modal fade text-left" id="addMoneyModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <label class="modal-title text-text-bold-600" id="myModalLabel33">@lang('admin.message200')</label>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ route('merchant.AddMoney') }}" method="post">
                    @csrf
                    <div class="modal-body">
                        <label>@lang('admin.message203'): </label>
                        <div class="form-group">
                            <select class="form-control" name="payment_method" id="payment_method" required>
                                <option value="1">@lang('admin.message201')</option>
                                <option value="2">@lang('admin.message202')</option>
                            </select>
                        </div>

                        <label>@lang('admin.message204'): </label>
                        <div class="form-group">
                            <input type="text" name="receipt_number" value="0"
                                   class="form-control" required>
                        </div>

                        <label>@lang('admin.message205'): </label>
                        <div class="form-group">
                            <input type="text" id="amount" name="amount"
                                   class="form-control" required>
                            <input type="hidden" name="add_money_driver_id" id="add_money_driver_id">
                        </div>

                        <label>@lang('admin.message206'): </label>
                        <div class="form-group">
                        <input class="form-control" id="title1" rows="3" name="description"
                                  value="Refer Gift">
                        </div>
                    </div>
                    <div class="modal-footer">



                        <input type="reset" class="btn btn-outline-secondary btn-lg" data-dismiss="modal" value="close">
                        <input type="submit" class="btn btn-outline-primary btn-lg" value="Add">
                    </div>
                </form>
            </div>
        </div>
    </div>

Answer 1

Not 100% sure what you're trying to accomplish, but here are my thoughts anyway.

1. In your onclick implementation you provide an argument to the function readd , which you're not using/defining in your javascript code at the bottom.
2. It appears that you try to push the value into the input text field of your bootstrap modal with the id="amount"

Here is the improved JavaScript section:

<script type="text/javascript">
   function readd(amount){
      $("#amount").val(amounts);
    }
</script>

I'm not sure if the bootstrap toggle possibly overrides the onclick event of the span element. If that's the case you need to approach that issue a bit different

<script type="text/javascript">
   function readd(amount){
      $("#amount").val(amounts);
      // Do something with the id
      const some_important_id = $(this).attr('data-id');
      console.log(some_important_id);
      $('#addMoneyModel').modal('show');
    }
</script>

and remove the modal stuff from your Span element.

<span onclick="readd( {{$referral_detail->SenderDriver->total_trips}});" data-id="{{$referral_detail->GetterDriver->id }}">