Home » Javascript » Clear text field with own class on dropdown change value JQuery

Clear text field with own class on dropdown change value JQuery

Posted by: admin November 1, 2017 Leave a comment

Questions:

I would like that on CHANGED VALUE in each select, all own grouped textboxes by relevant class comes to blank value
I tried with this simple code, but no success.
Please help me and many thanks in advance.

$(document).ready(function () {

 $("#FormPallet" + $(this).val()).on("change", function () {
			$(".FormCollo" + $(this).val()).val("");
		});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form>
    <div id="wrapper">
        <div id="content">
            <p>
                <label> Dropdown :</label>
                <select id="FormPallet1">
                    <option value="1">value_1</option>
                    <option value="2">value_2</option>

                </select>
            </p>
            <p>
                <label>Name : </label>
                <input class="FormCollo1" type="text" />
            </p>
            <p>
                <label>Reference ID : </label>
                <input class="FormCollo1" type="text" />
            </p>
            <p>
                <label>Amount : </label>
                <input class="FormCollo1" type="text" />
            </p>
        </div>
    </div>
    <br />
    <p style="color: red;">second block</p>
    <br />
    <div id="wrapper">
        <div id="content">
            <p>
                <label> Dropdown :</label>
                <select id="FormPallet2">
                    <option value="1">value_1</option>
                    <option value="2">value_2</option>
                </select>
            </p>
            <p>
                <label>Name : </label>
                <input class="FormCollo2" type="text" />
            </p>
            <p>
                <label>Reference ID : </label>
                <input class="FormCollo2" type="text" />
            </p>
            <p>
                <label>Amount : </label>
                <input class="FormCollo2" type="text" />
            </p>
        </div>
    </div>
</form>
Answers:

You can’t access $this without reference to any element.So $(this).val() in $("#FormPallet" + $(this).val()).on will be not defined,

This way it will work

$(document).ready(function () {

 $("#FormPallet1,#FormPallet2").on("change", function () {
			$(".FormCollo" + $(this).val()).val("");
		});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form>
    <div id="wrapper">
        <div id="content">
            <p>
                <label> Dropdown :</label>
                <select id="FormPallet1">
                    <option value="1">value_1</option>
                    <option value="2">value_2</option>

                </select>
            </p>
            <p>
                <label>Name : </label>
                <input class="FormCollo1" type="text" />
            </p>
            <p>
                <label>Reference ID : </label>
                <input class="FormCollo1" type="text" />
            </p>
            <p>
                <label>Amount : </label>
                <input class="FormCollo1" type="text" />
            </p>
        </div>
    </div>
    <br />
    <p style="color: red;">second block</p>
    <br />
    <div id="wrapper">
        <div id="content">
            <p>
                <label> Dropdown :</label>
                <select id="FormPallet2">
                    <option value="1">value_1</option>
                    <option value="2">value_2</option>
                </select>
            </p>
            <p>
                <label>Name : </label>
                <input class="FormCollo2" type="text" />
            </p>
            <p>
                <label>Reference ID : </label>
                <input class="FormCollo2" type="text" />
            </p>
            <p>
                <label>Amount : </label>
                <input class="FormCollo2" type="text" />
            </p>
        </div>
    </div>
</form>

Questions:
Answers:

A couple things I see here…

First, your first use of $(this).val() doesn’t really do anything, because you’re in the context of the document.ready handler which doesn’t have a value. It sounds like what you want is to target all select elements which start with a given string in their id. Which would be something like this:

$("[id^=FormPallet]").on("change", function () {
    //...
});

From there, you don’t want to base the selection of the items to empty on the value of the select, but rather on the location in the DOM of the select. Otherwise, selecting “2” in the first select will result in the second form being emptied.

From the “current” element, navigate up to a common parent element and then find the target elements therein. Something like this:

$(this).closest('div').find('input').val('');

This would find all the input elements in the most immediate containing div element. Here’s a running example.


Side note: You’re re-using the same id values in your HTML. While in this particular case the JavaScript code isn’t relying on that and should still work, that’s still something you’re going to want to fix. Invalid HTML leads to undefined JavaScript behavior.