How to make the deadline automatically appears when the start date is selected

user_14418269 0
Viewed 58

I have a select that gets the values from my database table. There are five prices in the amount selection, and the prices selected will have different cut-off years. What I want to do is when I select the amount, and then select the start date after that, the deadline will come out automatically based on the table column years to count. What should I write in my Javascript?

This is my submit form

<form id="guanyinForm">
      <div class="form-group row mb-2">
           <label for="sx_ID" class="col-sm-4 col-form-label">sxID:</label>
             <div class="col-sm-8">
                  <input type="text" class="form-control" id="sx_ID" value="{{ $light->sx_ID }}" readonly>
             </div>
      </div>
      <div class="form-group row mb-2">
           <label for="gylight_receipt" class="col-sm-4 col-form-label">Receipt Number:</label>
             <div class="col-sm-8">
                  <input type="text" class="form-control" id="gylight_receipt">
             </div>
      </div>
      <div class="form-group row mb-2">
           <label for="gylight_amount" class="col-sm-4 col-form-label">Amount:</label>
             <div class="col-sm-8">
                  <select name="gylight_amount" id="gylight_amount" class="form-control">
                    <option>Choose amount</option>
                      @foreach ($gyprice as $item)
                    <option value="{{ $item->gylight_amount }}">                
                      RM{{ $item->gylight_amount }}
                    </option>
                      @endforeach
                  </select>
              </div>
      </div>
      <div class="form-group row mb-2">
           <label for="gylight_number" class="col-sm-4 col-form-label">Light Numer:</label>
             <div class="col-sm-8">
                  <input type="text" class="form-control" id="gylight_number">
             </div>
      </div>
      <div class="form-group row mb-2">
           <label for="gylight_label" class="col-sm-4 col-form-label">Label:</label>
             <div class="col-sm-8">
                <input type="text" class="form-control" id="gylight_label">
             </div>
      </div>
      <div class="form-group row mb-2">
           <label for="gylight_remark" class="col-sm-4 col-form-label">Remark:</label>
             <div class="col-sm-8">
                <input type="text" class="form-control" id="gylight_remark">
             </div>
      </div>
      <div class="form-group row mb-2">
           <label for="gylight_remark" class="col-sm-4 col-form-label">Start Date:</label>
             <div class="col-sm-8">
                <input type="text" class="form-control" id="gylight_sDate">
             </div>
      </div>
      <div class="form-group row mb-2">
           <label for="gylight_remark" class="col-sm-4 col-form-label">Due Date:</label>
             <div class="col-sm-8">
                <input type="text" class="form-control" id="gylight_eDate">
             </div>
      </div>
      <div class="row">
             <div class="col-12">
                 <button class="btn btn-primary float-right" id="guanyinAdd">Submit</button>
             </div>
      </div>
</form>

This is my table

 <?php

   use Illuminate\Database\Migrations\Migration;
   use Illuminate\Database\Schema\Blueprint;
   use Illuminate\Support\Facades\Schema;

   class CreateGypricesTable extends Migration
   {
     /**
     * Run the migrations.
     *
     * @return void
     */
   public function up()
   {
      Schema::create('gyprices', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->double('gylight_amount',8,2)->comment('price of the light');
        $table->bigInteger('years')->comment('how many years');
        $table->timestamps();
        $table->softDeletes();
      });
   }

    /**
    * Reverse the migrations.
    *
    * @return void
    */
   public function down()
   {
       Schema::dropIfExists('gyprices');
   }
}

This is my controller

public function view(Light $light){

    $gylight = Guanyin::latest()->first()->orderBy('id','desc')->get();
    $gyprice = Gyprice::latest()->first()->orderBy('id','asc')->get();

    return view('admin.light.view',[
        'light' => $light,
        'gylight' => $gylight,
        'gyprice' =>$gyprice,
    ]);
}

This is my script

<script>
    $('#gylight_amount').on('change', function() {
     var year = $(this).find(':selected').data('years');
     var amount = $('#gylight_amount').val();
     var startDate = $('#gylight_sDate').val();

     var date = new Date(startDate);

     var yyyy = date.getFullYear() + year;
     var m = date.getMonth();
     var d = date.getDate();

     $("#gylight_eDate").val(d + "/" + m + "/" + yyyy);

     });
</script>
laravel jquery javascript
1 Answers

For select dropdown:

<div class="form-group row mb-2">
       <label for="gylight_amount" class="col-sm-4 col-form-label">Amount:</label>
         <div class="col-sm-8">
              <select name="gylight_amount" id="gylight_amount" class="form-control">
                <option>Choose amount</option>
                  @foreach ($gyprice as $item)
                <option data-years="{{$item->years}}" value="{{ $item->gylight_amount }}">                
                  RM{{ $item->gylight_amount }}
                </option>
                  @endforeach
              </select>
          </div>
  </div>

Jquery Code: Try following code you will get year for selected option.

 $("#gylight_amount, #gylight_sDate").change( function () {

    var str = $("#gylight_sDate").val();
    var duration = $("#gylight_amount").find(':selected').data('years');

    if( /^\d{2}\/\d{2}\/\d{4}$/i.test( str ) ) {

        var parts = str.split("/");

        var day = parts[0] && parseInt( parts[0], 10 );
        var month = parts[1] && parseInt( parts[1], 10 );
        var year = parts[2] && parseInt( parts[2], 10 );

        if( day <= 31 && day >= 1 && month <= 12 && month >= 1 ) {

            var expiryDate = new Date( year, month - 1, day );
            expiryDate.setFullYear( expiryDate.getFullYear() + duration );

            var day = ( '0' + expiryDate.getDate() ).slice( -2 );
            var month = ( '0' + ( expiryDate.getMonth() + 1 ) ).slice( -2 );
            var year = expiryDate.getFullYear();

            $("#gylight_eDate").val( day + "/" + month + "/" + year );

        } else {
            // display error message
        }
    }
});
user_75917880
Related