0

I have some php that adds a class (bg-success) to a <td> if its value is used for something else. In every <td> is a text input. How can I make the input required if the class of the td is "bg-success"?

<tr>
   <td class="border text-center">
      <input type="text" name="1">//not Required
   </td>
   <td class="border text-center bg-success">
      <input type="text" name="2">//needs to be required
   </td>
   <td class="border text-center bg-success">
      <input type="text" name="3">//needs to be required
   </td>
...

I have tried a few variations of this:

 $(document).ready(function() {
    var parents = document.getElementsByClassName("bg-success");
    for (var i = 0; i < parents.length; i++) {
        var parent = parents.item(i);
       parent.find(">:first-child").attr('required', '');
    }
});

It hasn't liked any version I have tried and maybe I'm not even close to correct. It doesn't like whatever I put after parent or parents.item(i).

I know I could move the class to the input but I like it being more like a border.

Full transparency, this is my first coding project and I am sure that I am doing everything the hard way. This site has helped me figure out a lot of things. Thanks in advance.

ADyson
  • 57,178
  • 14
  • 51
  • 63
Luke
  • 1
  • 1
  • `It hasn't liked` Is there an error or does it just not work? – mykaf Mar 07 '23 at 20:51
  • 1
    [attr](http://api.jquery.com/attr/) is a jQuery function, not a native DOM function. You probably have a console error about that – ADyson Mar 07 '23 at 20:52
  • 2
    So is `.find()`. The DOM function is `.querySelector()`. – Barmar Mar 07 '23 at 20:53
  • It's always confusing when you jump back and forth between jQuery and DOM. Pick one scheme and stick with it and you'll do better. You can do this whole thing in one line with jQuery, since it loops automatically. – Barmar Mar 07 '23 at 20:54
  • The basic lesson here is 1) do your research, and 2) don't mix JS and jQuery arbitrarily together, you tend to end up confusing yourself. Choose a style and stick to it throughout. Most applications don't really need jQuery these days - there are easy to use native DOM functions for the vast majority, and easy-to-research little polyfills for the rest. – ADyson Mar 07 '23 at 20:54
  • 1
    @ADyson LOL, we started the same, then ended up with the opposite recommendations :) – Barmar Mar 07 '23 at 20:54
  • @Barmar lol, it's a matter of opinion I guess. I loved jQuery for many years, but if I was just starting out I doubt I would need to bother with it now. – ADyson Mar 07 '23 at 20:56
  • Error message: jQuery.Deferred exception: parent.find is not a function TypeError: parent.find is not a function at HTMLDocument. – Luke Mar 07 '23 at 21:12
  • So I should change .find() to .querySelector()? – Luke Mar 07 '23 at 21:14
  • If you want to use JS instead of jQuery there, then yes. And then also look at replacing the attr - see the duplicate for details of what you'd need to do. – ADyson Mar 07 '23 at 21:22

0 Answers0