Why are two functions executed with one click?

Question

I have a 2 function in my js code. First, To save the data in my firebaseDB(=Submit) Second, If I click the button, the function associated with the button is executed.(another btn)

The problem is that if I press another button, the submit function is also executed.

How to make eventDN() function only run when event btn is pressed? I tried e.stopPropagation(), but that's not work. I want to know the reason and solution.

Here is my html code

<button  onclick="programDY()" id="btn1" class="btn btn-light">Program</button>
<button  onclick="eventDN()" id="btn2" class="btn btn-light">Event</button>
<button  onclick="articleDN()" id="btn3" class="btn btn-light">Article</button>

<button type="submit" >Submit</button>

Here is my js code

document.getElementById("blogForm").addEventListener("submit", submitForm);

function submitForm(e) {
  e.preventDefault();
  // e.stopPropagation();
  
  var title = getElementVal("title");
  var op_startDate = getElementVal("op_startDate");
  var op_endDate = getElementVal("op_endDate");
  var apply_startDate = getElementVal("apply_startDate");
  var apply_endDate = getElementVal("apply_endDate");
  var msgContent = getElementVal("msgContent");


  saveMessages(title, op_startDate, op_endDate, apply_startDate, apply_endDate, msgContent);

  //   enable alert
  document.querySelector(".alert").style.display = "block";

  //   remove the alert
  setTimeout(() => {
    document.querySelector(".alert").style.display = "none";
  }, 3000); 





  //   reset the form
  document.getElementById("blogForm").reset();
}

const saveMessages = (title, op_startDate, op_endDate, apply_startDate, apply_endDate, msgContent) => {
  var newblogForm = blogFormDB.push();

  newblogForm.set({
    title: title,
    op_startDate: op_startDate,
    op_endDate: op_endDate,
    apply_startDate: apply_startDate,
    apply_endDate: apply_endDate,
    msgContent: msgContent,
  });
};

const getElementVal = (id) => {
  return document.getElementById(id).value;
};


function programDY() {
  document.getElementById("op_Date").style.display = "";
  document.getElementById("apply_Date").style.display = "";

        };

function eventDN() {
  document.getElementById("op_Date").style.display = "";
  document.getElementById("apply_Date").style.display = "none";
  // e.stopPropagation();
};

function articleDN() {
  document.getElementById("op_Date").style.display = "none";
  document.getElementById("apply_Date").style.display = "none";
        };

I've tried changing the code and using stopPropagation(). But I don't know why submit is also executed when I use another function. No matter how many times I change the code, the result doesn't change.

The default `type` of a `button` element is `"submit"`. If you want your buttons **not** to be submit buttons, you need `type="button"` on them. (Also, you never need `` as you've shown for your submit button -- that's the default. Just ``.) — T.J. Crowder, Feb 20 '23 at 11:48

score 0 · Answer 1 · answered Feb 20 '23 at 11:47

That's because <button> by default is of type "submit".
If you don't want buttons to trigger a form submit Event, use the type="button":

<button type="button" onclick="programDY()" id="btn1" class="btn btn-light">Program</button>
<button type="button" onclick="eventDN()" id="btn2" class="btn btn-light">Event</button>
<button type="button" onclick="articleDN()" id="btn3" class="btn btn-light">Article</button>

Why are two functions executed with one click?

1 Answers1