locked
A customized function to clear all the inputs RRS feed

  • Question

  • User1052662409 posted

    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

    Saturday, April 18, 2020 8:14 PM

Answers

  • User-1330468790 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, April 19, 2020 3:26 AM