how do I create a javascript function that changes the html when a form submit button is pushed in d-CodePudding

I can easily update the html when it's not part of the form's submit or button. Or even when it's just a pure button element (rather than an input from a form). However, when I try to append a string to the

class "chatGoesHere", nothing happens. The consolealso quickly reloads since the form is going to \send.

I'm happy to post my views.py and urls.py, however, I'm pretty sure the issue is inside of my html document below:

<p class="chatGoesHere" id="chatGoesHere"> 1st Item! </p> 

<form action="\send\" method="post">
    <input type="text" name="userMessage" />
    <input type="submit" value="Send to smallest_steps bot" class="sendButt" id="sendButt" />
  </form>
  
  <script>
      var btn = document.getElementById("sendButt");
      btn.addEventListener("click", updateChat);
  
      function createMenuItem(name) {
          let li = document.createElement('p');
          li.textContent = name;
          return li;
      }
      const td = document.getElementById('chatGoesHere');
      td.appendChild(createMenuItem("TEST2"))
  
      function updateChat(){
          const td = document.getElementById('chatGoesHere');
          td.appendChild(createMenuItem("TEST3"))
      }
  </script>

I'd like it so that every time a user pushes the submit button of the form something gets added to the page without the page reloading.

Thank you

CodePudding user response：

You need to use django with sockets.

Take a look at this walk through.

Helped me to do the same thing a few years ago!

https://channels.readthedocs.io/en/stable/tutorial/part_2.html