Question 11377 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

javascript – && statement between input text and input select – Jquery

I want to get output based on text input and select input, the value of strength will be determined by nvalue and type(select)

enter image description here

my current code:

function findStrength() {
  var n = document.getElementById('nvalue');
  if ($(".select-box option[value='clay']").attr('selected') && $(n.value == '30')) {
    document.getElementById('soil_strength').value = 'HARD';
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="nvalue" name="nvalue" min="0" max="50" required />

<select class="select-box" name="soil_type" id="soil_type2">
  <option value="" disabled selected hidden>Type</option>
  <option value="clay">CLAY</option>
  <option value="silt">SILT</option>
  <option value="sand">SAND</option>
  <option value="gravel">GRAVEL</option>
</select>

<input type="text" id="soil_strength" name="soil_strength" placeholder="Strength" />
Tags:

2

Answers


  1. 0

    You should not mix jQuery and DOM access. Here I delegate from form and any change to the fields will update the strength

    Also you had typos in the max and required attributes

    Lastly why not use a number field?

    const soilForm = document.getElementById('soilForm');
soilForm.addEventListener("input", function() {
  const n = +this.nvalue.value; // cast to number
  const soil = this.soil_type.value;
  if (soil === "clay" && n === 30) {
    this.soil_strength.value = 'HARD';
  }
  else this.soil_strength.value = "";
})
    <form id="soilForm">
  <input type="number" id="nvalue" name="nvalue" min="0" max="50" required />

  <select class="select-box" name="soil_type" id="soil_type2">
    <option value="" disabled selected hidden>Type</option>
    <option value="clay">CLAY</option>
    <option value="silt">SILT</option>
    <option value="sand">SAND</option>
    <option value="gravel">GRAVEL</option>
  </select>

  <input type="text" id="soil_strength" name="soil_strength" placeholder="Strength" />
</form>

    jQuery version

    $('#soilForm').on('input', function() {
  const n = +$('#nvalue').val(); // cast to number
  const soil = $('#soil_type2').val(); // why name="soil_type" and id="soil_type2" ?
  let strength = "";
  if (soil === 'clay' && n === 30) {
    strength = 'HARD';
  }
  $('#soil_strength').val(strength);
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="soilForm">
  <input type="number" id="nvalue" name="nvalue" min="0" max="50" required />

  <select class="select-box" name="soil_type" id="soil_type2">
    <option value="" disabled selected hidden>Type</option>
    <option value="clay">CLAY</option>
    <option value="silt">SILT</option>
    <option value="sand">SAND</option>
    <option value="gravel">GRAVEL</option>
  </select>

  <input type="text" id="soil_strength" name="soil_strength" placeholder="Strength" />
</form>
    Login or Signup to reply.
  2. 0

    You can use jQuery more effectively.

    <script>
    $(document).ready(function() {
        $('#nvalue, #soil_type2').on('change',function(){
            let type = $('#soil_type2').val();
            let nvalue = $('#nvalue').val();
            if (type == 'clay' && nvalue == '30') {
                $('#soil_strength').val('HARD');
            } else {
                $('#soil_strength').val('EASY');
            }
        });
    });
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search