0

In my code, I use javascript to send data to python(flask) and delete the button when it is successful. the code of the button is given below

The result is that it sends the data to python and the backend function on python is work but the button is not be deleted. I write alert(p) in the success:function because I want to know whether the function is used or not and it alerts!!. I am really new to HTML and javascript. Please someone explain how it works and tell me how to solve it!

$(document).on('submit', '#todo-form2', function(e) {
  console.log('hello');
  e.preventDefault();
  $.ajax({
    type: 'POST',
    url: '/delete',
    data: {
      todo: $("#todo").val()
    },
    success: function() {
      var p = $("#todo").val()
      alert(p);
      var elem = document.getElementByName(p);
      elem.parentNode.removeChild(elem);
    }
  })
});

<form method="post" id="todo-form">
  <button class="primary" name="560510531" id="todo" type="submit" value=560510531> 
    Accept 
    </button>
</form>
<form method="post" id="todo-form2">
  <button class="primary ghost" name="560510531" id="todo" type="submit" value=560510531> 
    Deny 
    </button>
</form>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Panasun
  • 1
  • 1
  • 3
  • 1. If the form is generated on the server, then no need to delegate: `$('#todo-form2').on('submit', function(e) {` – mplungjan Jun 06 '22 at 19:54
  • 2. ID MUST be unique in an html page – mplungjan Jun 06 '22 at 19:54
  • 3. Why alert the value of something on the page. Instead console.log or insert the result from the call> `success: function(data) { console.log(data) ...` – mplungjan Jun 06 '22 at 19:55
  • 4. This smells of an X/Y problem. Why do you have two forms and two submit buttons? Also is this in a table and you want to delete something in the same row? If so, use relative addressing: `$(this).closest("tr").remove()` – mplungjan Jun 06 '22 at 19:56
  • 5. There is no function called `getElementByName` it is `getElementsByName` and it returns a nodelist, so you need `var elem = document.getElementsByName(p)[0]; elem.parentNode.removeChild(elem);` or `var elem = document.querySelector(\`[name=${p}]\`);` – mplungjan Jun 06 '22 at 20:01
  • @mplungjan Thank you very much for all your comments. I will try what you tell me here. I have to declare 2 forms because I want to send data to different functions in python including deleting on MySQL and moving from SQL-table to another table. – Panasun Jun 07 '22 at 14:55

0 Answers0