title: Sending a form through PHP, autosaving with JS every ten minutes
body: <h3>The Environment</h3>
  
  <ul>
  <li>PHP: Symfony -> Twig, Bootstrap</li>
  <li>Doctrine -> Mongodb</li>
  <li>Jquery </li>
  </ul>
  
  <h3>The Project</h3>
  
  <p>The timer is working, counting the interval, and I can send the form.  This is good, but once I get to the part where the form is sent I seem to be running into two problems:</p>
  
  <ul>
  <li>interval counter working</li>
  <li>form submitting automatically, then
  
  <ul>
  <li>The null fields do not get accepted</li>
  <li>The form does not get validated</li>
  </ul></li>
  </ul>
  
  <p>The form itself is setup through a custom built PHP graphical interface that allows you to set the simple things very easily: fields, fieldtypes, names and labels, etc.</p>
  
  <p>This is cool, but it means that you can't go in and tinker very much with the form or at all really.  The most you can change is aesthetics in the template.  Although you could wrap each form element in another form element or some kind of html identifier, this is an option, but a tedious one...</p>
  
  <p>On a valid check the form gets upserted and all is well the else catches the non-valid form and lets the user know that some fields are not filled in.  I would post that code here, but I think it would be frowned upon.  Hopefully you understand the PHP concept.</p>
  
  <p><strong>The part that I can share is the JS:</strong></p>
  
  <pre><code>autoSaveForm = function() {
      var form = $('form'),
          inputs = form.find('input');
  
      form.on('submit', function() {
          inputs.each( function( input ) {
              if (input.attr("disabled") === true){
                  input.removeAttr("disabled");
              }
          })
      });
  
      function counter(){
          var present = $('.minutes').attr('id'),
              past = present;
          $('.minutes').text(past);
          setInterval(function(){
              past--;
              if(past&gt;=0){
                  $('.minutes').text(past);
              }
              if(past==0){
                  $('.minutes').text(present);
              }
          },1000);
      }
  
      function disableInputs(){
          inputs.each( function( input ) {
              if (input.val() === ""){
                  input.attr("disabled", true);
              }
          });
      }
  
      // Start
      counter();
  
      // Loop
      setInterval(function(){
          counter();
          form.submit()
      },10000);
  };
  </code></pre>
  
  <p>This sets a counter on the page and counts through an interval, it's set to seconds right now for testing, but eventually will be 10 minutes.</p>
  
  <h3>Possible Solutions</h3>
  
  <ol>
  <li>disable the null fields before submit and remove the attribute after submit is accomplished
  
  <ul>
  <li>this needs to be done so that the user can do a final completed save at the end of the process</li>
  <li>this doesn't actaully seem to be disabling the fields</li>
  </ul></li>
  <li>Their were a few things I found about adding in novalidate to the html, but it wasn't supported in all browsers and it might get tricky with the static nature of the forms.</li>
  <li>Post the form with ajax and append a save true variable to the end of the url, then redirect it in PHP Controller with a check on the URI var although:
  
  <ul>
  <li>then I still have the null fields</li>
  <li>to solve this: set a random value or default value to the fields as they are being passed through. <em>haven't tried this yet</em></li>
  </ul></li>
  <li>Something kind of like what this question is addressing, although I have some questions still about the null fields - <a href="https://stackoverflow.com/questions/18324772/autosaving-form-data-with-jquery-and-php">Autosaving Form with Jquery and PHP</a></li>
  </ol>
  
  <p><a href="http://www.rrpowered.com/2014/07/auto-save-a-draft-with-php-and-jquery/" rel="nofollow noreferrer">Sending the form through ajax</a></p>
  
  <p>Any input would be greatly appreciated. :)  Thanks</p>