How to enable editing for the input field jquery

ghz 7months ago ⋅ 79 views

In the provided form, the second input field has a default value, which is divided by 5 to update the third field. However, I need the flexibility to edit the value in the third field and have the final result (Total Visits per Year) updated accordingly, based on the inputs from the main form.

JSfiddle

 //Average number of rooms 
    var avgrooms = (parseInt((jQuery("#numshops").val())) ) / 5;
    jQuery("#numrooms").val(avgrooms);

    
jQuery('#numofapples, #numshops, #numrooms, #avgcustomer').on('input',function() {
    
    var avgrooms = (parseInt((jQuery("#numshops").val())) ) / 5;
    jQuery("#numrooms").val(avgrooms);
            
    //Total annual visitors here
    var totalannualvisits = (parseInt((jQuery("#numofapples").val())) * parseInt(jQuery("#avgcustomer").val())) * avgrooms;
    jQuery("#totalvisitperyear").val(totalannualvisits);
    });
   
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form id="" action="" method="post">
  <div class="form-right">
    <table width="100%">
      <tr>
        <td width="60%" valign="top">
          <label> 1. How many apples do you have? <br/>
                      <input name="" id="numofapples" placeholder="" type="number" required />
                    </label>
          <label> 2. How many shops do you have?<br/>
                      <input name="" id="numshops" type="number" value="10" placeholder="" required />
                    </label>
          <label> 3. Average Number of rooms per shop<br/>
                      <input name="" id="numrooms" type="number" value="" placeholder="" required />
                    </label>
          <label> 4. Average customer per store per day <br/>
                      <input name="" id="avgcustomer" type="number" placeholder="" required />
                    </label>

        </td>
        <td width="40%" valign="top">
          <p>Total visits per year </p>
          <input value="" type="text" name="" id="totalvisitperyear" />

        </td>
      </tr>
    </table>

  </div>

</form>

Answers

To achieve the desired functionality where the total visits per year are updated dynamically based on the inputs from the main form, while also allowing the flexibility to edit the value in the third field (Average Number of rooms per shop), you can modify the JavaScript code as follows:

// Function to calculate total annual visits
function calculateTotalVisits() {
    // Get the values from input fields
    var numApples = parseInt(jQuery("#numofapples").val());
    var numShops = parseInt(jQuery("#numshops").val());
    var avgCustomer = parseInt(jQuery("#avgcustomer").val());
    var numRooms = parseInt(jQuery("#numrooms").val());
    
    // Calculate the average number of rooms per shop (if numRooms is empty, default to 0)
    var avgRooms = numRooms ? numRooms : 0;
    
    // Calculate the total annual visits
    var totalAnnualVisits = (numApples * avgCustomer) * (numShops / 5) * avgRooms;
    
    // Update the total visits per year field
    jQuery("#totalvisitperyear").val(totalAnnualVisits);
}

// Call the calculateTotalVisits function when the document is ready
jQuery(document).ready(function() {
    calculateTotalVisits();
});

// Bind the input event to all relevant input fields to trigger the calculation
jQuery('#numofapples, #numshops, #numrooms, #avgcustomer').on('input', function() {
    calculateTotalVisits();
});

In this updated code:

  • The calculateTotalVisits function calculates the total annual visits based on the input values from the form fields.
  • The function is called when the document is ready to initialize the total visits per year field with the default value.
  • The input event listener is attached to all relevant input fields (#numofapples, #numshops, #numrooms, #avgcustomer) to trigger the calculation whenever the user inputs or changes any value in these fields.
  • The average number of rooms per shop (numRooms) is handled with more flexibility. If the input field is empty, it defaults to 0.

This should allow you to dynamically update the total visits per year field based on the inputs from the main form while also providing the flexibility to edit the value in the third field.

#html #forms