brainfoolong / form-data-json

A zero dependency, cross browser library to easily get or set/manipulate form input values as/from a json object.
https://brainfoolong.github.io/form-data-json
MIT License
57 stars 10 forks source link

Doesn't work when inputs are nested more than one child element deep #21

Closed Donny-H closed 2 years ago

Donny-H commented 2 years ago

Is your feature request related to a problem? Please describe. Hi, I know this is probably a rare problem and I can find a workaround if needed, but I was wondering if there is a way for the library to work with forms who's inputs aren't the direct children of the form element. For example, I have a situation where each form is a table row, with each input in a cell across like so:

<tr>
        <form id="example">
          <td>
              <input type='text' name='firstName' class="inputLine" placeholder="First Name"></input>
          </td>
          <td>
              <input type='text' name='lastName' class="inputLine" placeholder="Last Name"></input>
          </td>
          <td>
              <input type='email' name='email' class="inputLine" placeholder="Email"></input>
          </td>
        </form>
      </tr>

If I try use this form in the library, it does not pull the input values. I am assuming that this is because the library looks for inputs that are only the direct children of the form. Is there a way to make this work somehow? If not, will it work if I use divs instead of TD's?

Describe the solution you'd like Maybe a parameter on the function to specify how many nested in the inputs are.

brainfoolong commented 2 years ago

Hi, that is definitely a thing that does work. Doesnt matter how much nested you have it. But your problem is probably that your html is really invalid.

  1. You cannot have a <form> directly inside <tr>, you have it to be arount your <table>
  2. Inputs are self closing, so <input type='email' name='email' class="inputLine" placeholder="Email"/> is correct, <input type='email' name='email' class="inputLine" placeholder="Email"></input> is not

When you have fixed those errors, it should work just fine.