Clear fields of non clicked elements

Question

Here is the example :

$("input[name=search_product_id]").on("click", function() {
 var _parent = this;
 $("input[name=search_product_id]").filter(function() {
  if($(_parent) != $(this)) {$(this).val("")};
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

<input type="text" name="search_product_id"  id='0'>
<br>
<input type="text" name="search_product_id" id='1'>

When I click on an input it should clear all other inputs EXCEPT the one I clicked upon. So if I click on the first input and start typing, the second input should be cleared, if I want to click on the first input again to hover the mouse on a past text, the full text should stay, which in my code it does not and the text in all inputs is cleared on every click. Any idea why is my code not working and possible solutions ?

So what's happening : If I write txt on the first input, and then click again on the first input after the first t to add an e to have text rather than txt, that click should not clear the first input. It should only clear the text of any other inputs with the same name tag.

I hope my question is clear. Feel free to ask for addition explanation !

Your subject says "hovering" but your question talks about "clicking". Which is it? They aren't the same thing. If it's clicking, you can check out the blur event, which fires when an input element loses focus — lurker, Jul 23 '19 at 10:44
@lurker I updated my title, thank you. About using the blur event I'd have the same problem, I wasn't able to successfully compare fields, which the answer below helped me find. EDIT : On second thought it's not a good idea to use the blur event, as if I get out of the text input it gets cleared. — , Jul 23 '19 at 10:45
Yeah I wasn't totally sure the blur event would do it for you. Just a fleeting thought... — lurker, Jul 23 '19 at 16:24

score 0 · Accepted Answer · answered Jul 23 '19 at 10:41

0

Because $(_parent) != $(this) is always true. You should use :not(:focus) instead and use focus event instead of click.

Demo:

$("input[name=search_product_id]").on("focus", function() {
 $("input[name=search_product_id]:not(:focus)").val("")
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

<input type="text" name="search_product_id"  id='0'>
<br>
<input type="text" name="search_product_id" id='1'>
<br>
<input type="text" name="search_product_id" id='2'>

answered Jul 23 '19 at 10:41

Cuong Le Ngoc

11,595
2
17
39

Thank you, it works! Why is `$(_parent) != $(this)` always true? In my logic I'm comparing two elements which could be the same. Could you please explain a bit more? – Jul 23 '19 at 10:43
1

You can find information about this here: https://stackoverflow.com/questions/6985932/how-do-i-compare-two-jquery-objects-for-identity – Cuong Le Ngoc Jul 23 '19 at 10:46

score 0 · Answer 2 · answered Jul 23 '19 at 10:45

0

onblur="" - solve this problem

   
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

<input type="text" name="search_product_id"  id='0' onblur="this.value = ''">
<br>
<input type="text" name="search_product_id" id='1' onblur="this.value = ''">

answered Jul 23 '19 at 10:45

Michael Shtefanitsa

303
1
4
14

Thank you but the comment on my post already pointed it out, check my answer on that comment :-) – Jul 23 '19 at 10:48

Clear fields of non clicked elements

2 Answers2