jquery won't change input val in a form hidden with CSS

Question

I have an application using jQuery 3.2.1. It features 2 separate search forms called #primarySearch and #advancedSearch.

#primarySearch is always visible, but #advancedSearch is hidden on page load:

<form id="primarySearch">

</form>

<form id="advancedSearch" style="display: none;">

</form>

There is a button to show/hide #advancedSearch like this:

/* Open Advanced Search */
$('#advancedSearchCta b').click(function(){
    $('#advancedSearch').toggle();
    $('#advancedSearchCta').hide();
});

/* Close Advanced Search */
$('#closeAdvancedSearch').click(function(){
    $('#advancedSearch').toggle();
    $('#advancedSearchCta').show();
});

This works fine.

Each form contains a number of inputs. I have implemented a button (#resetSearchBtn) to clear all the form inputs - effectively a "Reset Search" button:

 $('#resetSearchBtn').click(function(e){
    e.preventDefault();
    $(':input','#primarySearch, #advancedSearch')
    .not(':button, :submit, :reset, :hidden')
    .val('')
    .removeAttr('checked')
    .removeAttr('selected');
 });

This works fine if the #advancedSearch is visible. However if the user closes the advanced search - thus toggling it back to display: none;, it does not work. Basically, it will only reset the search if #advancedSearch is visible.

I can't rely on this because a user may open the advanced search, enter something, close it, and then try and do a reset. It will leave their data in #advancedSearch. The application is ajax based and reacts to form changes. So it basically submits the "wrong" data to the server.

Is this normal behaviour or some conflict in my app I should be looking for? What are the solutions to this?

Do you have multiple elements with the same id of `resetSearchBtn`? — Rory McCrossan, Jul 24 '17 at 10:15
This is very odd behaviour. The visibility of an element should have no effect on it's accessibility through code. Could you show an example of the problem in a snippet. — Rory McCrossan, Jul 24 '17 at 10:17
I agree! I don't understand it either and have never seen anything like it. It's hard to show because it's in an app being developed on a private server (I can't post a link to it). And I don't think a fiddle will help because I've no doubt it'll just work as expected on that. I'll see what I can do. — Andy, Jul 24 '17 at 10:19
My last thought would be to check for errors in the console (assuming you haven't already) just to check if another event handler is causing an error and interfering with your logic. — Rory McCrossan, Jul 24 '17 at 10:23
Yeah - I missed that you were setting the `val()` on checkbox/radio buttons — Rory McCrossan, Jul 24 '17 at 10:24

score 3 · Accepted Answer · answered Jul 24 '17 at 10:21

3

I'm not surprised that your code has a strange behavior. According to this code :

$(':input','#primarySearch, #advancedSearch')
    .not(':button, :submit, :reset, :hidden')
    .val('')
    .removeAttr('checked')
    .removeAttr('selected');

You take every input in the form (including checkboxes and radios). You set the value to ''. At this point, your checkboxes and radios are already dead. The you remove the attr checked and selected on everything.

First: Don't set the value of checkboxes and radios. I don't think it is what you want.

Second: checked and selected are boolean properties and must be handled with .prop()

Third: Your code ommit every hidden elements (because of the :hidden selector in the .not). So it won't work if the form is hidden. Obviously.

answered Jul 24 '17 at 10:21

Magus

14,796
3
36
51

As it happens I don't even need the `.not` selector at all for this part of the application. Removing it completely has solved the issue. Thanks for pointing it out, it's my own silly error! – Andy Jul 24 '17 at 10:25
FYI, that code came from a highly up-voted SO post: https://stackoverflow.com/questions/7792320/jquery-clearing-form-inputs :p – Andy Jul 24 '17 at 10:26
1

With a highly up-voted comment, suggesting that it won't work with checkboxes and radios – Magus Jul 24 '17 at 10:28

score 2 · Answer 2 · answered Jul 24 '17 at 10:22

In your not() filter you are specifying not to select elements that are hidden. Anything below the form tag with display:none is hidden and will not be cleared. Try being more specific in your selector. Perhaps:

.not(':button, :submit, :reset, form:hidden')

jquery won't change input val in a form hidden with CSS

2 Answers2