0

I have a project where a form is required for inputs for a week, so for efficiency elsewhere an array of inputs is used (i.e. start[0] etc) this seems to have exacerbated the issue.

The problem is when validating a form where some inputs are given initial values (its an update) jQuery only returns those initial values instead of changed ones unless use of 'this' is feasible. I found to resolve that I had to use:

$(".weekdays").change(function(){
            var newval = $(this).attr('value');
            $(this).attr('value', newval);
                });

Which seems a crazy thing to have to do! Its here I found using $(this).val(newval); always fails except when setting initial values, though its the common given solution?

In the same vein setting check-boxes seems also problematical, using:

var id = $(this).attr('pid');
$("#choice["+id+"]").prop('checked', false);
$("#choiceLabel["+id+"]").css('background-image','url("images/Open.png")');

Always fails, yet reverting to javascript with:

var id = $(this).attr('pid');
document.getElementById("choice["+id+"]").checked = false;
document.getElementById("choiceLabel["+id+"]").style.backgroundImage = 'url("images/Open.png")';

Works fine! So does jQuery not like inputs with id's in array form? or am I getting things wrong somewhere?

Matt
  • 115
  • 8
  • If you want the current value of an input, you want to use `val()` which will get the value from the element property. The `attr('value')` will get whatever the attribute was when it loaded on the page, or what it has been changed to with `attr('value', newValue)` later on – Taplar Mar 15 '19 at 21:06
  • Just for total clarity, can you edit your post and hit the `<>` button or type Ctrl+M and make a working snippet of the issue you are seeing? – Taplar Mar 15 '19 at 21:07
  • Oooooh, or I may know what it is. You have an invalid selector. `[]` are special characters in selectors, denoting attribute selections. So `#choice[13]` would be looking for an element with an id of `choice` **and** has an attribute of "13", which is not valid. (ex. `
    `)
     – Taplar Mar 15 '19 at 21:10
  • In such a situation where you want the `[]` to be considered as part of the id selector for jquery, you have to escape them. `#choice\\["+ id +"\\]` – Taplar Mar 15 '19 at 21:13
  • I was using val() within the validation, which is where it was returning the initial instead of changed value, when I've tested attr('value', newValue) in the workaround script it seems to hold the new? unless I`m looking at the wrong time? – Matt Mar 15 '19 at 21:46
  • Having found this piece [https://stackoverflow.com/questions/5874652/prop-vs-attr] I'm a little clearer, I note its stated the behaviour of `attr()` has been changed though its not clear just how. Currently my initial code snippet resolves the `val()` problem and I'm not sure what else would. – Matt Mar 16 '19 at 01:05

1 Answers1

1

When attempting to select an element with an id that contains special characters, such as [], you have to remember to escape them for jQuery. For instance..

var id = 12;

console.log(
  $('#choice\\['+ id +'\\]').get()
);


console.log(
  $('#choice[data-something]').get()
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="choice[12]">weee</div>
<div id="choice" data-something>dang!</div>

Otherwise, jQuery will treat them as special characters, in this case, assuming you are trying to find an element that has an id and has an attribute matching your variable value.

Taplar
  • 24,788
  • 4
  • 22
  • 35
  • Thanks for that, makes sense. Would you mind explaining why it is double escaped (\\) ? – Matt Mar 15 '19 at 21:22
  • Because it's double escaped, ^_^. The first slash, escapes the second slash, for the string construction. And then that slash, which is now treated as a literal slash, escapes the `[` or `]`. Not confusing at all, I know, :) – Taplar Mar 15 '19 at 21:23