我如何创建一个 javascript function 在按下表单提交按钮时更改 html

Question

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

Answer 1

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