A customized function to clear all the inputs [Answered] RSS

• • Reply
  demoninside9

  Participant

  1445 Points

  2835 Posts

  A customized function to clear all the inputs

  Apr 18, 2020 08:14 PM|demoninside9|LINK

  Hello All,

  I have a requirement. I am doing some functionality on an input blur function. 

   $("#txtAmount").blur(function (e) {
  // doing something
  });

  Depending on the amount of txtAmount the hidden divs get visible. like on $1000 it shows div1, on $2000 it shows div2 and so on.

  Suppose I choose an amount of $1000, then it shows div1, and fill the inputs (text, file, dropdown) which are in div1. But somehow user changes the amount from $1000 to $2000, then it should clear all the inputs which are in div1.

  Is there any jquery or javascript function where I just pass the id or name of the input and it clears value (whatever it may the input, either text, file or drop-down) 

  Please suggest

  It is our choices, that show what we truly are, far more than our abilities.
  
• • Reply
  Sean Fang

  Contributor

  2900 Points

  852 Posts

  Re: A customized function to clear all the inputs

  Apr 19, 2020 03:26 AM|Sean Fang|LINK

  Hi demoninside9,

    

  According to your description, what you need is a customized function that could clear all of <input>/<select> content in a given <div>.

  This can be achieved by using JQuery selector +

  • val('') for <input>
  • find('option:selected').prop("selected", false) for <select>

    

  More details, you could refer to below code:

  Script in head:S

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  
      <script type="text/javascript">
          function clearDiv(input) {
              //Get Id of Div
              var selectValue = '#' + $(input).val();
  
              //Clear content for all input
              $(selectValue).find('input').each(function (index, element) {
                  $(element).val('');
              });
  
              //Clear content for all select
              $(selectValue).find('select').each(function (index, element) {
                  $(element).find('option:selected').prop("selected", false);
              });
          }
      </script>

  HTML page:

  <label>Input the id of the div:</label>
          <input type="text" onchange="clearDiv(this)" />
          <br />
          <br />
          <div>
              <label>below DIV ID is "div1":</label>
              <div id="div1">
                  <label>Input value:</label>
                  <input id="input1" type="text" value="value1" />
                  <br />
                  <label>File value:</label>
                  <input id="input2" type="file" value="file1" />
                  <br />
                  <label>Drop Down Value:</label>
                  <select id="cars">
                      <option value="volvo">Volvo</option>
                      <option value="saab">Saab</option>
                      <option value="mercedes">Mercedes</option>
                      <option value="audi">Audi</option>
                  </select>
              </div>
          </div>

  Demo:

  

   

  Hope this can help you.

  Best regards,

  Sean

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.