Setting the minimum value of field based on another field in Laravel-CodePudding

I have a start and stop field in my form and I wish to have the user enter a start field then enter the stop field, however, the minimum value for the stop field needs to be the start field's value. Is there any way to achieve this?

my view:

    <div class="mb-3" style="float:left;" style="margin-left: 200px;">
                    <label for="recipient-name" style="width: 7em"class="col-form-label">Start</label>
                    <input type="number"style="width: 7em" name="start" class="form-control" id="start" min="0" required>

 <div class="mb-3" style="float:left;" style="margin-left: 200px;">
                    <label for="recipient-name" style="width: 7em"class="col-form-label">Stop</label>
                    <input type="number"style="width: 7em" name="stop" class="form-control" id="stop" min="0" required>
              
              </div>

CodePudding user response：

Figured it out using an onchange handler:

<div class="mb-3" style="float:left;" style="margin-left: 200px;">
                    <label for="recipient-name" style="width: 7em"class="col-form-label">Start</label>
                    <input type="number"style="width: 7em" name="start" class="form-control" id="start" min="0" onchange="document.getElementById('stop').min=this.value;" required>
                  </div>
                
                  <div class="mb-3">
                    <label for="recipient-name" class="col-form-label">End ODO</label>
                    <input type="number" style="width: 7em" name="stop" class="form-control @error('stop') is-invalid @enderror" id="stop" min="document.getElementById('start').value"  value="{{ old('stop') }}" required>
                    @error('end_odo')
                    <span hljs-string">">{{ $message }}</span>
                @enderror
               
                  </div>

CodePudding user response：

Use this simple jQuery method:

Add `disabled` attribute in your stop input Html

<input type="number"style="width: 7em" name="stop" class="form-control" 
disabled id="stop" min="0" required>

then using jQuery:

$(document).on('blur','#start',function(){
 //make stop input disabled false after focus out from start input
    $("#stop").prop("disabled",false);
//set stop input minimum value to start value
    $("#stop").attr("min",$("#start").val());
    $("#stop").val($("#start").val());
});