Bad path /boomboom/v2/index.html error message when trying to assign event handlers

Question

I'm writing an event handler in Javascript on Codepen that will take a form input and add it to an unordered list. When trying to test, I get a "bad path /boomboom/v2/index.html" error message. I'm not sure if this error is a result of my code or an issue with Codepen. Can anyone point me to how to fix this?

I don't know what to try because I have not idea what this error means.

Here's the HTML:

<div class="card">
<div class="card-body">
    <h3 class="card-title">Today's To Do List</h3>
    <form id="todo-form">Week 5: To Do List
        <div class="form-group">
            <input type="text" class="form-control" id="todo-Week 5: To Do Listinput" placeholder="What else do you need to do?">
        </div>
        <div class="form-group">
            <input type="submit" id="todo-btn" class="btn btn-secondary btn-block" value="Add Item To List">
        </div>
    </form>
</div>
<ul class="list-group list-group-flush" id="todo-ul">
    <li class="list-group-item">Pick up groceries
            <i class="fas fa-trash-alt"></i>
    </li>
    <li class="list-group-item">Finish essay
        <i class="fas fa-trash-alt"></i>
    </li>
    <li class="list-group-item">Soccer @ 5:00

        <i class="fas fa-trash-alt"></i>
</ul>

Here's the CSS:

        body
    {
        background-color: #34495e;
        font-family: 'Lato', sans-serif;
    }

    button {
        margin: 0 auto;
        float: right;
    }

    .centered {
        margin: 0 auto;
        width: 80%
    }

    .card {
        margin: 50px auto;
        width: 18rem;
    }
    i{
        float:right;
        padding-top:5px
    }

Here's the Javascript:

    (function(){
  //add event handler to form button
  formButton = document.querySelector("#todo-btn");
  formButton.onclick = addNewTodo;

  function addNewTodo() {

  //get value of form field
  newTask = document.getElementById("todo-Week 5: To Do Listinput").value;
  //console.log(newTask);
  //create new ul list item element
  const newItem = document.createElement('li');
  const newItemContent = document.createTextNode(newTask);

  //add new li element item to ul
  newItem.appendChild(newItemContent);
  document.getElementById("todo-ul").appendChild(newItem);
  }


})();

Code can also be viewed on my pen at https://codepen.io/raquelocasio/pen/XwwKLZ

When I enter some text into the form field and click the button, the error displays.

The expected output is to be able to add the text entered in the form field as a new list item. Any help or pointers would be greatly appreciated.

Forgot to mention that I can't change the HTML or CSS, it was provided by the professor. — Raquel Ocasio, Jun 08 '19 at 17:40
For future questions like this: here's an example of a most minimal version to show the outcome: https://codepen.io/sheriffderek/pen/VwLQjZY (showing problem) - https://codepen.io/sheriffderek/pen/abOqZoM (showing addressed) - if we can show the people at CodePen - they could add some information to the error message to help people in the future. Docs: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault — sheriffderek, Mar 11 '20 at 06:06

edinburghrules · Answer 1 · 2019-06-25T11:17:21.470

6

it's due to the forms default behaviour which is to reload the page. In this case the error is related to codepen. You need to add the event preventDefault method to your addNewTodo function. You'll need to do this for most form submit events.

function addNewTodo(event) {
  event.preventDefault()
  // Rest of your add todo code here...
}

edited Jun 25 '19 at 11:17

answered Jun 25 '19 at 11:10

edinburghrules

61
2

Thank you for this answer. Do you know if codepen plans on fixing this at all? Also, do you happen to know if there is a way to implement this behavior as an html attribute? – Tara Oct 21 '19 at 00:23
This should probably be the accepted answer. It's more informative, and solves the problem while retaining the use of the
element.
– Hod Mar 10 '20 at 21:41
@Hod this doesn't solve the problem completely either. What happens if I want to validate my form? I can't do that when I preventDefault. I've tried it out and it doesn't allow for validation to occur. – Hudson Kim Aug 23 '20 at 20:36

score 5 · Accepted Answer · answered Jun 08 '19 at 22:15

5

I saw a similar issue when I used <form> tags in Codepen. I switched the <form> tag to a <div> tag and the error went away.

Can you try this?

answered Jun 08 '19 at 22:15

blastoise

274
2
5

This might solve 'the outcome' - but does it really solve the problem? OP - are you sure this is the answer? – sheriffderek Mar 11 '20 at 05:52
This sort of solves it. What happens if I want to validate my form? I can't do that using a div. – Hudson Kim Aug 22 '20 at 17:17
You can't validate the form on codepen's site. The default behavior of the form tag, with a button of input type='submit', is to submit the form to codepen's server. When you do that, codepen returns a 403 error, which signals they won't process your request. The boombox page is the default page they render when you try to submit the form. To workaround this, you can remove the form tag and replace it with a div tag. – blastoise Sep 15 '20 at 07:33

score 2 · Answer 3 · answered Aug 21 '19 at 09:26

2

I got the same problem with a form on my codepen.io pen, but it got fixed when i changed button type="submit" to type="button".

answered Aug 21 '19 at 09:26

Lucy

21
1

sheriffderek · Answer 4 · 2020-03-12T19:27:59.143

It seems like this error (which is agreeably confusing - or enjoyably named) is brought up when a <form> is submitted in the sandbox. CodePen itself is a web application (built on rails I believe) with forms - and I'm not sure how that all plays out - but it probably has some scope to those - and can't just be having forms submitted to their server by its many many users.

Here is an example of an error: https://codepen.io/sheriffderek/pen/VwLQjZY

We've run across these a few times - but it has always been our fault - and when we've basically tried to submit a form - to a server we have no access to: (which can be unexpected - but makes sense)

and

are the messages we've seen. Does that mean 'poop' ? ; ) .... or...

and here is the documentation for preventing the default form submission https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

and how to use that in a Pen: https://codepen.io/sheriffderek/pen/abOqZoM

element.addEventListener('click', function(event) {
   event.preventDefault();
   // some instructions etc.
});

We should tell the people there - and maybe they can detect the type of submission error and direct people to information on why it occurs. : )

Bad path /boomboom/v2/index.html error message when trying to assign event handlers

4 Answers4