Is it possible to set the value for an HTML form input by reading values of other inputs with PHP?-CodePudding

I am working on a prescription order form, and the client wants to be able to enter the quantity of medication taken per dose, the frequency of dose, and the duration of this dosage schedule, and then have the results of those fields used to calculate the quantity of medication needed. For example, if they selected "2 pills", "3 times per day", and "14 days", they want the quantity input to be set to 2*3*14 = "84" .

The entering of the quantity per dose, frequency of dose, and duration of doses are all done with <select>, so there is a strict set of values that can be entered.

Is there a way that I can grab the values of quantity per dose, frequency of dose, and duration of doses with PHP before the form is submitted, and set the value of the quantity field on the fly based upon those values?

Here is the HTML for the section of the form where the fields mentioned above are located.

<label for="qtyperdose">Qty per Dose</label>
<select id="qtyperdose">
    <option value="0.25">1/4</option>
    <option value="0.5">1/2</option>
    <option value="1" selected>1</option>
    <option value="2">2</option>
</select>
<label for="frequency">Frequency Of Dose</label>
<select id="frequency">
    <option value="twice per day">twice per day</option>
    <option value="3 times per day">3 times per day</option>
    <option value="once per day" selected>once per day</option>
</select>
<label for="duration">Duration</label>
<select id="duration">
    <option value="7">7 days</option>
    <option value="14" selected>14 days</option>
    <option value="21">21 days</option>
</select>
<label for="total_quantity">Quantity: </label> 
<input type="number" id="quantity" max="100"> <!-- Default needs to be calculated from qtyperdose * frequency * duration -->

CodePudding user response：

As u say:

before the form is submitted

Only using php its not possible. that said, you need javascript.

     function calcquantity(){
      qtyperdose = document.getElementById("qtyperdose").value;
      frequency = document.getElementById("frequency").value;
      duration = document.getElementById("duration").value;
      total = qtyperdose * frequency * duration;
      console.log(total);
      document.getElementById("quantity").value = total;
    
    }
    calcquantity();

    <label for="qtyperdose">Qty per Dose</label>
    <select id="qtyperdose" name="qtyperdose" onchange="calcquantity()">
        <option value="0.25">1/4</option>
        <option value="0.5">1/2</option>
        <option value="1" selected>1</option>
        <option value="2">2</option>
    </select>
    <label for="frequency">Frequency Of Dose</label>
    <select id="frequency" name="frequency" onchange="calcquantity()">
    
        <option value="2">twice per day</option>
        <option value="3">3 times per day</option>
        <option value="1" selected>once per day</option>
    </select>
    <label for="duration">Duration</label>
    <select id="duration" name="duration" onchange="calcquantity()">
    
        <option value="7">7 days</option>
        <option value="14" selected>14 days</option>
        <option value="21">21 days</option>
    </select>
    <label for="total_quantity">Quantity: </label> 
    <input type="number" name="quantity" id="quantity" max="100"> <!-- Default needs to be calculated from qtyperdose * frequency * duration -->

CodePudding user response：

The form elements should really have names rather than just ID attributes if you intend to submit these to the server for final processing so the following has been modified accordingly.

Some rudimentary Javascript that uses a delegated change event handler to process each of the 3 select menus - the name/value are added to a global object, when that global object has 3 property/value pairs the calculation is done and the result displayed in the total.

let inputs={};
let total=document.querySelector('#quantity');

document.addEventListener('change',e=>{
  inputs[ e.target.name ]=Number( e.target.value );

  if( Object.keys( inputs ).length==3 ){
    let result=Object.values( inputs ).reduce( ( a, b )=>a * Number(b) );
    if( result > total.getAttribute('max') ){
      alert('Thats umpossible!');
      return;
    }
      
     total.value=result;
  }
});

<label for="qtyperdose">Qty per Dose</label>
<select name='qty' id="qtyperdose">
  <option hidden selected disabled>Quantity per dose
    <option value="0.25">1/4</option>
    <option value="0.5">1/2</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<label for="frequency">Frequency Of Dose</label>
<select name='frequency' id="frequency">
  <option hidden selected disabled>Frequency
    <option value="2">twice per day</option>
    <option value="3">3 times per day</option>
    <option value="1">once per day</option>
</select>

<label for="duration">Duration</label>
<select name='duration' id="duration">
  <option hidden selected disabled>Duration
    <option value="7">7 days</option>
    <option value="14">14 days</option>
    <option value="21">21 days</option>
</select>

<label for="total_quantity">Quantity: </label> 
<input type="number" id="quantity" max="100" />