Content Disappears Immediately After Form Submitted and Function Runs

Content disappears immediately after form submitted and function runs

Move the listener to the form's submit handler. Have the function return false to stop submission:

<form id="date_form" onsubmit="return myFunction();" ...>

Take the listener off the button:

<input type="submit">

Do not give it a name of submit as that will mask the form's submit method so you can't call it. Submit buttons only need a name if there are two or more on a form and you want to know which one was used to submit the form.

There is an error in your code, it's missing a closing double qoute:

function myFunction(){
   var input = document.getElementById("date").value;
   if(input==="February 7"){
      document.getElementById('w1').innerHTML = "<h2> HEADING </h2>";
   }
   return false; // to stop submission
};

This may or may not fix you issues, you haven't said what you are actually trying to do.

text disappears rapidly after click on 'submit-button'

The submit buttons are submitting your form (so reloading your page).

Change the buttons to type="button".

Form disappears on function call

As you haven't declared a type for the button, it defaults to a submit button. Add a type="button" attribute and it will no longer submit the form.

<button type="button" id="hello" onclick="SizeGuide()">Size:</button><p id="show"></p>
        ^^^^ set the type

Appended li disappears after submit form

That is because upon pressing the Enter key, the form is submitting itself and forcing the page to refresh. So you should use .preventDefault() from preventing this from happening:

$('form').on('submit', function(e) {
    var itemToAdd = $('#txtBox').val();
    if ( itemToAdd ) {
        $('#todoList').append('<li class="todoBlk"><input type="checkbox" class"checkbox">'+itemToAdd+'</li>');
    }
    $('#txtBox').val('').focus();
    e.preventDefault();
});

This code also allows you to remove the inline JS for the onsubmit attribute.

Update: I also noticed a problem with your example is that your button fails to clear checked items that are dynamically added. This is because when jQuery is first executed on the page, the click listener is only bound to pre-existing elements. Do consider using .on() to bind the click event to dynamically added list items. Here's the fixed version: http://jsbin.com/hiyuqikura/1/edit?html,js,output

$(function(){

  // On submit, prevent default form action and add item if input is not empty
  $('form').on('submit', function(e) {
    var itemToAdd = $('#txtBox').val();

    if ( itemToAdd ) {
      $('#todoList').append('<li class="todoBlk"><input type="checkbox" class="checkbox">'+itemToAdd+'</li>');
    }
    $('#txtBox').val('').focus();
    e.preventDefault();
  });

  // Listen to click event on dynamically added elements
  $(document).on('click', 'input.checkbox', function(){
    if ($(this).is(':checked')) { 
      $(this).parent().addClass('completed');
    }
    else {
      $(this).parent().removeClass('completed');
    }
  });

  $('#clearComp').click(function(){
    $('.completed').fadeOut();
  });
});

Why does my Javascript code runs and disappear immediately

submit button is basically submitting form to server and reloading page when clicked but if you want to validate before submit you can use preventDefault to stop page reload
see example below

function firstName_lastName(event) {
    event.preventDefault() // to stop submit
    var firstName = document.getElementById('firstName').value;
    var lastName = document.getElementById('lastName').value;
    var names = document.getElementById('names');

    if (firstName == "" || lastName == "") {
        alert('Please fill in all the fields');
    }
    names.innerText = `${firstName} ${lastName}` 
}

<div>
   <p id="names"></p>
</div>

<form method = "get" action = "">
   Enter first name: <input type = "text" id = "firstName"/>
   Enter last name: <input type = "text" id = "lastName"/>
   <input type = "submit" value = "submit" onclick = " firstName_lastName(event);"/>
</form>

My table displays and then disappears after I click submit

You should prevent the browser's default submit event by using e.preventDefault() and e is passed to the submitFunction().

form.addEventListener('submit', function submitFunction(e) {
  e.preventDefault();
  h = document.querySelector('#inputHeight').value;
  w = document.querySelector('#inputWidth').value;
  makeGrid(h, w);
});

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

---

Result (in Code Snippet):

var color, h, w;

const myTable = document.querySelector('#pixelCanvas');

function colorCell(event) {
  event.target.style.backgroundColor =
    document.querySelector('#colorPicker').value;
}

function makeGrid(h, w) {
  myTable.innerHTML = '';
  for (let i = 1; i <= h; i++) {
    const newTR = document.createElement('tr'); // Creates height amount of rows
    for (let i = 1; i <= w; i++) {
      const newTD = document.createElement('td'); // Creates width amount of columns
      newTR.appendChild(newTD);
    }
    myTable.appendChild(newTR); // Adds the row to the table before iterating again
  }
}

myTable.addEventListener('click', colorCell);

let form = document.querySelector('form');

form.addEventListener('submit', function submitFunction(e) {
  e.preventDefault();
  h = document.querySelector('#inputHeight').value;
  w = document.querySelector('#inputWidth').value;
  makeGrid(h, w);
});

body {
  text-align: center;
}

h1 {
  font-family: Monoton;
  font-size: 70px;
  margin: 0.2em;
}

h2 {
  margin: 1em 0 0.25em;
}

h2:first-of-type {
  margin-top: 0.5em;
}

table,
tr,
td {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  margin: 0 auto;
}

tr {
  height: 20px;
}

td {
  width: 20px;
}

input[type='number'] {
  width: 6em;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Pixel Art Maker!</title>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Monoton"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Pixel Art Maker</h1>
    <h2>Choose Your Grid Size</h2>
    <h4>(to reset, click Submit again)</h4>
    <form id="sizePicker">
      Grid Height:
      <input type="number" id="inputHeight" name="height" min="1" value="1" />
      Grid Width:
      <input type="number" id="inputWidth" name="width" min="1" value="1" />
      <input type="submit" />
    </form>

    <h2>Choose Any Color</h2>
    <input type="color" id="colorPicker" />

    <h2>Create your art in the table below!</h2>
    <table id="pixelCanvas"></table>

    <script src="designs.js"></script>
  </body>
</html>

---

Related Topics