title: Input Text in Checkbox to JSON data
body: <p>I want to store checkbox data as JSON to .txt file.
  The last checkbox is text type input for &quot;other&quot; options, but when I submit with that &quot;other&quot; value it gives only that &quot;other&quot; value as the only checked data, ignoring the rest checked.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="form22" class="form-group checkbox-type"&gt;
                  &lt;div class="form-section-heading"&gt;
                      &lt;label class="heading"&gt;Project's business model &lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="form-check"&gt;
                      &lt;input class="form-check-input" type="checkbox" id="form22_check1" value="B2B" name="Project's business model"&gt;
                      &lt;label class="form-check-label" for="form22_check"&gt;
                          B2B
                      &lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="form-check"&gt;
                      &lt;input class="form-check-input" type="checkbox" id="form22_check2" value="B2C" name="Project's business model"&gt;
                      &lt;label class="form-check-label" for="form22_check2"&gt;
                          B2C
                      &lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="form-check"&gt;
                      &lt;input class="form-check-input" type="checkbox" id="form22_checkn" name="Project's business model"&gt;
                      &lt;label class="form-check-label" for="form22_checkn"&gt;
                          &lt;input type="text" class="form-control" id="inputBModel" placeholder="Other" name="Project's business model"&gt;
                      &lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Here is my code to store checkbox data as JSON object:</p>
  <pre><code>     const reducerFunction = (data, element) =&gt; {
      data[element.name] = element.value;
      console.log(JSON.stringify(data));
      return data;
  };
  
  const isValidValue = element =&gt; {
      return (!['checkbox', 'radio'].includes(element.type) || element.checked);
  };
  
  const isValidElement = element =&gt; {
      return element.name &amp;&amp; element.value;
  };
  
  const isCheckbox = element =&gt; element.type === 'checkbox';
  const isMultiSelect = element =&gt; element.options &amp;&amp; element.multiple;
  
  const formToJSON = elements =&gt; [].reduce.call(elements, (data, element) =&gt; {
  
      if (isValidElement(element) &amp;&amp; isValidValue(element)) {
          if (isCheckbox(element)) {
              data[element.name] = (data[element.name] || []).concat(element.value);
          } else {
              data[element.name] = element.value;
          }
      } else {
          data[element.name] = (data[element.name] || null);
      }
  
      return data;
  }, {});
  
  const handleFormSubmit = event =&gt; {
      event.preventDefault();
      const data = formToJSON(form.elements);
      const readyData = JSON.stringify(data, null, &quot;  &quot;);
      console.log(readyData);
  </code></pre>
  <p>Expected output:</p>
  <pre><code>&quot;Project's business model&quot;: [
     &quot;B2C&quot;,
     &quot;test&quot;
  ],
  </code></pre>
  <p>The output I get:</p>
  <pre><code> &quot;Project's business model&quot;: &quot;test&quot;
  </code></pre>