Search code examples
javascripthtmljqueryhttp-status-code-404jsfiddle

When button is submitted it returns a 404 error?

Here is my code.

Adding both the HTML and Javascript to get a clear understanding of what I did so someone can see where I went wrong

HTML

<form id="form" onsubmit="return addUser()">
<h2>Add a User:</h2>
<input id="name" type="text" name="username" placeholder="name">
<input id="email" class="mail" type="email" name="email" placeholder="email" onkeydown="validate()">
<span id="text"></span>
<button type="submit">Add User</button>
<h2>Users:</h2>
<ul id="users"></ul>
</form>

Javascript

It works fine in my local environment but when submitted in jsfiddle it returns a 404 error

function validate() {
   let form = document.getElementById('form');
   let email = document.getElementById('email').value
   let eData = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
   let text = document.getElementById('text')
   
   if (email.match(eData)) {
   form.classList.add('valid')
   form.classList.remove('invalid')
   text.innerHTML = "Your Email is Valid"
   text.style.color = 'green'
   } else {
   form.classList.remove('valid')
   form.classList.add('invalid')
   text.innerHTML = "Please Enter Valid Email"
   text.style.color = 'red'
   }
   
   if (email == '') {
   form.classList.remove('valid')
   form.classList.remove('invalid')
   text.innerHTML = ''
   text.style.color = '#00e5ff'
   }
}

const list = document.getElementById('users')

function addUser() {
let newName = document.getElementById('name').value
let newMail = document.querySelector('.mail').value
let data = document.createElement('li')
data.appendChild(document.createTextNode(newName + ' ' + newMail))
list.appendChild(data)
return false;
}

// END YOUR CODE HERE

jsfiddle for reference

http://jsfiddle.net/m3c5djbf/25/

Solution

  • I thought my comment might not be clear enough so here you can see an implementation of preventing the form from sending an ajax request and breaking your app:

    <html>
<body>

  <form id='form'>
    <label>test button</label>
    <input type='submit' value='button?' />
  </form>
  
  <p id='text'>not clicked</p>

  <script>
    const form = document.getElementById('form');
    const text = document.getElementById('text');
    form.addEventListener('submit', e => {
        e.preventDefault();
      console.log('submitted?');
      
      text.innerHTML = 'clicked';
    })
  </script>
</body>
</html>