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.
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>
Participant
1406 Points
2785 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
Participant
1110 Points
299 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 +
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