title: django html regulate input value based on the select option
body: <p>Here the scenario is that  in the html select, there are two options &quot;cube&quot; or &quot;cylinder&quot;. and there are three input fields: length, width, and height.</p>
  <p>what I am looking for is that when user select &quot;cylinder&quot; option from the dropdown menue, there must require user to input the same value for length and width input fields. if not, when click submitting form, there should be an alert to advise users to make sure both length and width value being the same.</p>
  <p>what is the easiest way to do such work?</p>
  <p>UPDATE - javascripts for generating the form</p>
  <pre><code>&lt;script&gt;
  $(document).ready(function()
  
      {
      var x = 1; //Initial field counter
      var list_maxField = 9; //Input fields increment limitation
  
          //Once add button is clicked
      $('.list_add_button').click(function()
          {
          //Check maximum number of input fields
          if(x &lt; list_maxField){
              x++; //Increment field counter
              //var list_fieldHTML = '&lt;div class=&quot;row&quot;&gt;&lt;div class=&quot;col-xs-4 col-sm-4 col-md-4&quot;&gt;&lt;div class=&quot;form-group&quot;&gt;&lt;input name=&quot;list['+x+'][]&quot; type=&quot;text&quot; placeholder=&quot;Type Item Name&quot; class=&quot;form-control&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;col-xs-7 col-sm-7 col-md-7&quot;&gt;&lt;div class=&quot;form-group&quot;&gt;&lt;input name=&quot;list['+x+'][]&quot; type=&quot;text&quot; placeholder=&quot;Type Item Quantity&quot; class=&quot;form-control&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;col-xs-1 col-sm-7 col-md-1&quot;&gt;&lt;a href=&quot;javascript:void(0);&quot; class=&quot;list_remove_button btn btn-danger&quot;&gt;-&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;'; //New input field html
              //var list_fieldHTML = '&lt;div class=&quot;row&quot;&gt;&lt;div class=&quot;col-xs-4 col-sm-4 col-md-4&quot;&gt;&lt;div class=&quot;form-group&quot;&gt;&lt;input name=&quot;list['+x+'][]&quot; type=&quot;text&quot; placeholder=&quot;Type Item Name&quot; class=&quot;form-control&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;col-xs-7 col-sm-7 col-md-7&quot;&gt;&lt;div class=&quot;form-group&quot;&gt;&lt;input name=&quot;list['+x+'][]&quot; type=&quot;text&quot; placeholder=&quot;Type Item Quantity&quot; class=&quot;form-control&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;col-xs-1 col-sm-7 col-md-1&quot;&gt;&lt;a href=&quot;javascript:void(0);&quot; class=&quot;list_remove_button btn btn-danger&quot;&gt;-&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;'; //New input field html
              var list_fieldHTML = &quot;&lt;div class='row'&gt;&quot;+
              &quot;&lt;span style='margin-left:-3px;'&gt;&quot; + x + &quot;&lt;/span&gt;&quot;+
              &quot;&lt;input name='length' required type='text'  placeholder=''  style='width:63px;margin-left:43px;color:gray'/&gt;&quot;+
              &quot;&lt;input name='width' required type='text'  placeholder=''  style='width:63px;margin-left:19px;color:gray'/&gt;&quot;+
              &quot;&lt;input name='height' required type='text'  placeholder=''  style='width:63px;margin-left:19px;color:gray'/&gt;&quot;+
              &quot;&lt;input name='weight' required type='text'  placeholder=''  style='width:63px;margin-left:19px;color:gray'/&gt;&quot;+
              &quot;&lt;input name='quantity' required type='text'  placeholder=''  style='width:63px;margin-left:19px;color:gray'/&gt;&quot;+
              &quot;&lt;select name='typeof'  required  style='width:100px;margin-left:17px;color:gray'&gt;&quot;+
                    &quot;&lt;option value=''&gt;--select--&lt;/option&gt;&quot;+
                    &quot;&lt;option value='cube'&gt;cube&lt;/option&gt;&quot;+
                    &quot;&lt;option value='cylinder'&gt;cylinder&lt;/option&gt;&quot;+
              &quot;&lt;/select&gt;&quot;+
              &quot;&lt;select name='updown' required  style='width:100px;margin-left:17px;color:gray'&gt;&quot;+
                    &quot;&lt;option value=''&gt;--select--&lt;/option&gt;&quot;+
                    &quot;&lt;option value='true'&gt;true&lt;/option&gt;&quot;+
                    &quot;&lt;option value='false'&gt;false&lt;/option&gt;&quot;+
              &quot;&lt;/select&gt;&quot;+
  
              &quot;&lt;a href='javascript:void(0);' style='margin-left:33px;' class='list_remove_button btn btn-danger'&gt;-&lt;/a&gt;&quot;+
              &quot;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&quot;;
  
  
  
  
              $('.list_wrapper').append(list_fieldHTML); //Add field html
          }
          });
  
          //Once remove button is clicked
          $('.list_wrapper').on('click', '.list_remove_button', function()
          {
             $(this).closest('div.row').remove(); //Remove field html
             x--; //Decrement field counter
          });
  });
  &lt;/script&gt;
  </code></pre>
  <p>the form looks like below format where user can add delete lines for input values depending on the specific situation.</p>
  <p><a href="https://i.stack.imgur.com/BCWHk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BCWHk.png" alt="enter image description here" /></a></p>