In jsfiddle, what does the runtime error message "error" : "key missing: title" mean?

user_4355581 0
Viewed 2103

I have a form in this fiddle that generates this error message on submit: "error" : "key missing: title." I can't figure out what it means.

On run, the form displays correctly in the output pane. On submit, the output pane goes black and that error message appears in black on black. One has to select it to read it.

JavaScript (in relevant part):

$(document).ready( function() {
  document.addEventListener("submit", (e) => {
  var formData = $( 'form' ).serializeArray();
  var classes =  buildClasses(formData);
  });  //  end arrow fn callback on event listener
});  // end doc.ready

function buildClasses(fd) {
  ...
}  // end def fn buildClasses

My JavaScript syntax checker says all the code (not just what I've reproduced here) is syntactically correct.

In the snippet below, on submit, the console flashes some message for about a tenth of a second then disappears. This error message is left in the result pane: "The custom error module does not recognize this error."

Snippet

PS: Is there a way to hide the snippet code so that it doesn't show in the question by default?

$(document).ready(function() {
  document.addEventListener("submit", (e) => {
    e.preventDefault;
    var formData = $('form').serializeArray();
    console.log('log formData : ', formData);
    var classes = buildClasses(formData);
    // updateTable(classes);
    console.log('log classes after build : ', classes);
  }); //  end arrow fn callback on event listener
}); // end doc.ready

function buildClasses(fd) {}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<head>
  <title>jdfidde for buildClasses</title>
</head>
<form action="" method="post">
  <div>
    <label>First Name
    <input type="text" name="fname" size="25">
  </label>
  </div>
  <div>
    <label>Last Name
    <input type="text" name="lname" size="25">
  </label>
  </div>
  <div>
    <label>email address
    <input type="email" name="email" size="25">
  </label>
  </div>
  <div>
    <label>08:30 Keynote Speaker
    <select name="select 0830">
      <option value="unsure" >unsure</option>
      <option value="attend" >attend</option>
      <option value="not attend">not attend</option>
    </select>
  </label>
    <label>09:00 Classes
    <select name="select 0900">
      <option value="unsure">unsure</option>
      <option value="A">room A</option>
      <option value="B">room B</option>
    </select>
    </label>
    <label>10:30 Classes
    <select name="select 1030">
      <option value="unsure">unsure</option>
      <option value="A">room A</option>
      <option value="B">room B</option>
    </select>
  </label>
  </div>
  <div>
    <input type="submit" value="submit form">
  </div>
</form>

jsfiddle javascript
1 Answers

On JSFiddle, you have a submit event listener which runs, but does not prevent the form submission. So, after buildClasses runs, you've created a classes object, but there's still a form submission in progress. Because the iframe src is

https://fiddle.jshell.net/_display/

the form submission sends the form data to that address (eg, form data of

fname: 
lname: 
email: 
select: 
select: unsure
select: unsure

)

But, of course, JSFiddle has no idea what any of that means. Presumably, fiddle.jshell.net uses form submissions to it for something else (it's probably expecting data that can be used to create the response iframe document), and those form submissions that it expects are supposed to have a title key.

Similarly, on Stack Overflow's snippet editor, you're submitting that data to https://stacksnippets.net/js , but stacksnippets does not expect such form data - it only expects data that can be used to create a snippet (specifically, keys of: HTML, CSS, JS, Babel, and Console). So, it gives you an error message.

This is just the result of submitting a form in an online Javascript editor which does not expect such a form submission. On your actual site, it shouldn't matter, assuming your site is set up to handle the form submissions properly.

If you want to demonstrate on an online Javascript editor that a form submission will submit the correct data without actually submitting the form, then just prevent form submission with preventDefault somewhere in the submit handler, eg

document.addEventListener("submit", (e) => {
  var formData = $('form').serializeArray();
  console.log('log formData : ', formData);
  var classes = buildClasses(formData);
  // updageTable(classes);
  console.log('log classes after build : ', classes);
  e.preventDefault();
  // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
}); //  end arrow fn callback on event listener


$(document).ready(function() {
  document.addEventListener("submit", (e) => {
    var formData = $('form').serializeArray();
    console.log('log formData : ', formData);
    var classes = buildClasses(formData);
    // updageTable(classes);
    console.log('log classes after build : ', classes);
    e.preventDefault();
  }); //  end arrow fn callback on event listener
}); // end doc.ready

function buildClasses(fd) {
  var timeslots = ['0830', '0900', '1030', '1245', '1415', '1545'];
  var classrooms = ['chapel', 'A', 'B', 'C', 'D', 'E', 'F', 'I'];
  var ts = '';
  var rm = '';
  var startIndex = 3;
  var classes = [];
  console.log('log classes post-def : ', classes);

  if (fd[startIndex].value == 'attend') {
    fd[startIndex].value = 'chapel';
  } else {
    fd[startIndex].value = 'unsure';
  }
  for (var i = startIndex; i < fd.length; i++) {
    if (!fd[i].value || fd[i].value == 'unsure') {} else {
      ts = timeslots[i - startIndex];
      rm = fd[i].value;

      console.log('i, fd[i].value : ', i, fd[i].value);
      console.log('classes pre-push', classes);

      classes.push({
        timeslot: ts,
        room: rm
      });

      console.log('classes post-push : ', classes);

    } //  end else/if
  } //  end for
  return classes;
} //  end def fn buildClassSelections
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<head>
  <title>jdfidde for buildClasses</title>
</head>
<form action="" method="post">
  <div>
    <label>First Name
    <input type="text" name="fname" size="25">
  </label>
  </div>
  <div>
    <label>Last Name
    <input type="text" name="lname" size="25">
  </label>
  </div>
  <div>
    <label>email address
    <input type="email" name="email" size="25">
  </label>
  </div>
  <div>
    <label>08:30 Keynote Speaker
    <select name="select">
      <option value="" name="defaultOptionUnsure">unsure</option>
      <option value="attend" name="">attend</option>
      <option value="not attend">not attend</option>
    </select>
  </label>
    <label>09:00 Classes
    <select name="select">
      <option value="unsure">unsure</option>
      <option value="A">room A</option>
      <option value="B">room B</option>
    </select>
    </label>
    <label>10:30 Classes
    <select name="select">
      <option value="unsure">unsure</option>
      <option value="A">room A</option>
      <option value="B">room B</option>
    </select>
  </label>
  </div>
  <div>
    <input type="submit" value="submit form">
  </div>
</form>

PS: Is there a way to hide the snippet code so that it doesn't show in the question by default?

Check the "Hide snippet by default" checkbox, like I did for the above snippet:

enter image description here

user_95152070
Related