Constantly getting navigated to my html directory on clicking a button

Question

I am trying to show a form with a add button and on clicking it the display property should be toggled. But whenever I click on the button i am getting Navigated to "Link Address" in my console ,so I placed a console.log there which gets triggered.I dont understand where I am going wrong. This is my code snippet:

function addForm(){
    console.log("triggered");
   var x= document.getElementById("add-form");
   if(x.style.display === "none"){
     x.style.display="grid";
   }
   else
    x.style.display="none";
  }

.form-box{
 display: grid;
 grid-template-columns: repeat(20,50px);
 grid-template-rows: repeat(40,50px);
 width: 100%;
}

.heading{
  font-size: 22px;
  font-weight: 600px;
  grid-row: 2/3;
  grid-column: 3/6;
}

.line{
  height: 2px;
background: #F2F2F2 0% 0% no-repeat padding-box;
opacity: 1;
width: 100%;
opacity: 1;
grid-row: 3/4;
grid-column: 3/15;
}

.form{
  grid-column: 3/12;
  grid-row:4/10;
  display: grid;
  grid-auto-rows: 50px;
}

.same-line{
  display: flex;
 align-items: center;
}

.full{
  flex:1;
}

.btn-add{
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
}

.btn-add:hover{
  color: #F08520;
}


.add-form{
  grid-row:12/16;
  display: none;
}

.btn-submit{
  grid-row: 18/19;
  grid-column:10/12;
  display: flex;
  justify-content: center;
}
.btn-style{
  border: none;
  outline: none;
  background: #F08520;
  width: 90px;
  border-radius: 7px;
  color: white;
}

.btn-style:hover{
  color: aqua;
}

.select-input{
  height: 35px;
  background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #DDDDDD;
opacity: 1;
border-radius: 4px;
color: #AAAAAA;

}

.form-input{
  height: 35px;
  background: #FFFFFF 0% 0% no-repeat padding-box;
 border: 1px solid #DDDDDD;
 opacity: 1;
 border-radius: 4px;
 }
 .form-textarea{
  height: 70px;
  background: #FFFFFF 0% 0% no-repeat padding-box;
 border: 1px solid #DDDDDD;
 opacity: 1;
 border-radius: 4px;
 resize: none;
 }

.label{
  font-size: 15px;
  color: #666;
  padding-top: 10px;
  font-family: 'Nunito Sans', sans-serif;
}

<div class="form-box">
  <p class="heading">Form Elements</p>
  <div class="line"></div>
  <form class="form">
    <label class="label">First Name</label>
    <input class="form-input" type="text" name="" id="">
    <label class="label">Last Name</label>
    <input class="form-input" type="text" name="" id="">
    <label class="label">Age</label>
    <input class="form-input" type="text" name="" id="">
    <div class="same-line">
    <label class="label full">Instances</label>
    <button class="btn-add" onclick="addForm()">add</button>
    </div>
    <label class="label">Address</label>
    <input class="form-input" type="text" name="" id="">
    <label class="label">Type</label>
    <select class="select-input" name="" id="">
      <option value="">Home</option>
      <option value="">office</option>
      <option value="">others</option>
    </select>
    <div id="add-form" class="add-form">
        <label class="label">Address2</label>
        <input class="form-input" type="text" name="" id="">
        <label class="label">Type</label>
        <select class="select-input" name="" id="">
          <option value="">Home</option>
          <option value="">office</option>
          <option value="">others</option>
        </select>
    </div>
    <label class="label">comments</label>
    <textarea class="form-textarea"></textarea>
  </form>
  <div class="btn-submit">
   <button class="btn-style">Submit</button>
  </div>
  <div id="new">

  </div>
  </div>

Your console.log shouldnt be triggered either, unless you somewhere tell it to execute this function. If it is triggered, make sure you add something that prevents its default behavior. like `return false;` — Dorvalla, Feb 28 '20 at 12:15
have you tried event.preventDefault(); on your button to stop its default behaviour? https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault — ASG, Feb 28 '20 at 12:15
I am placing a consolelog in the function and im and getting that value in the console — , Feb 28 '20 at 12:17

score 3 · Answer 1 · answered Feb 28 '20 at 12:16

3

Button element in form will automatically submit the form when clicked. You need to set its type as button.

<button class="btn-add" onclick="addForm()" type="button">add</button>

answered Feb 28 '20 at 12:16

glinda93

7,659
5
40
78

1

Please try to mark questions as duplicate instead when possible. This has been answered many many times before – Ruan Mendes Feb 28 '20 at 12:18
@JuanMendes You're right. Thanks for advice. – glinda93 Feb 28 '20 at 12:19
Thanks this has resolved the issue – Feb 28 '20 at 12:20

Constantly getting navigated to my html directory on clicking a button

1 Answers1