title: JQuery JS Uncaught Error: Syntax error, unrecognized expression:
body: <p>So, I have this issue that has been bugging me and I just can't seem to fix it. The error that comes up is this: </p>
  
  <blockquote>
    <p>Uncaught Error: Syntax error, unrecognized expression: [{"type":"header","subtype":"h1","label":"Another test form"},{"type":"checkbox-group","label":"Checkbox Group","name":"checkbox-group-1497353080484","values":[{"label":"Option 1","value":"option-1","selected":true}]},{"type":"header","subtype":"h1","label":"Header"},{"type":"number","label":"Number","className":"form-control","name":"number-1497353081884"},{"type":"text","label":"Text Field","className":"form-control","name":"text-1497353083345","subtype":"text"}]</p>
  </blockquote>
  
  <p>I have managed to track down the line of code that is causing this issue, which is this: </p>
  
  <pre><code>        forms = $(document.getElementById('formData').getAttribute("value")),
  </code></pre>
  
  <p>Now, I have no idea why this is causing this issue. The content coming in is correct. This is all being done within a JQuery function, in fact the whole JQuery function looks like this:</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-js lang-js prettyprint-override"><code>jQuery(function($) {
    var $fbEditor = $(document.getElementById('fb-editor')),
    $formContainer = $(document.getElementById('fb-rendered-form')),
    forms = $(document.getElementById('formData').getAttribute("value")),
    fbOptions = {
     formData: forms,
     dataType: 'json',
     onSave: function(){
      $fbEditor.toggle();
      $formContainer.toggle();
      $('form', $formContainer).formRender({
       formData: formBuilder.formData
      });
     }
    },
    formBuilder = $fbEditor.formBuilder(fbOptions);
    
    $('.edit-form', $formContainer).click(function() {
     $fbEditor.toggle();
     $formContainer.toggle();
    });
   });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So, I am not that experienced with JavaScript, JQuery or any of the rest of this. So it could very well be a simple issue but I cannot currently figure out what it is. Can somebody else tell me where I have gone wrong and possibly how to fix it?</p>