Pressing button causes page to reload rather than run nessasary code?

Question

I have a settings page in my website, the user edits his profile and then hits the update button which when properly working, like on chrome browser, will run certain code in the updateProfileData function. However in the firefox browser the page reloads as soon as I press the update button.

How can I prevent this and instead have the code I want run just like in chrome browser?

$('#update').on('click', event => {
  updateProfileData();
})

function updateProfileData() {
  //none of this will run because the page will instead reload
}

function pickFile() {
  fileButton.click()
}

function pickFile2() {
  fileButton2.click()
}

function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

html, body {
  /* bottom: 0px;
  top: 0px; */
  width: 100%;
  height: 100%;
  margin:0px;

  font: Arial;
  font-family: sans-serif;
  font-weight:medium;

  text-align: center;

  /* bellow is to prevent all highlighting on the website. */
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
}

/* #mp3Picker {
  color: grey;
} */

/* .middleSignUpDiv .container input {
  background-color: #F5F3F4;
  color: black;

  display: block;
  width: 390px;
  height: 125px;

  margin-left: auto;
  margin-right: auto;
  margin-top: 27px;
  margin-bottom: 17px;

  border-radius: 21px;
  border: none;

  padding-left: 15px;
  font-size: 0.95em;
  outline:none;

  border: solid transparent 2px;
} */

.justify {
  /* background-color: lightblue; */
  margin-top: 5px;
  display: flex;
  justify-content: center;
}

.soundscapeCaption:focus {
  border: solid #E2E2E2 2px;
}

.soundscapeCaption {
  /* margin-left: auto;
  margin-right: auto; */

  display: block;
  margin: 1px;
  padding: 1px;
  padding-left: 20px;
  padding-top: 20px;
  width: 390px;
  height: 115px;
  resize: none;
  background-color: #F5F3F4;
  border-radius: 21px;
  outline: none;
  font-size: 15px;
  border: solid transparent 2px;
}

.imgcontainer {
  display: block;
  position: relative;
  text-align: center;
}


input[type=file] {
  display:none;
}

.imgcontainer img {
  /* display: block; */
  /* vertical-align: middle; */
  object-fit: cover;
}

.middleSignUpDiv input:focus{
  border: solid #E2E2E2 2px;
  /* background-color: #B6B5B5; */
}

.middleSignUpDiv ::placeholder {
  font: Arial;
  font-family: sans-serif;
  /* font-size: 15px; */
  font-weight:medium;
  color: #B6B5B5;
}

/* input[type=text] {
  background-color: #F5F3F4;
  color: #B6B5B5;
} */

button {
  width: 215px;
  height: 55px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;

  font: Arial;
  font-family: sans-serif;
  font-size: 19px;
  font-weight:600;
  color: white;
  background-color: #4152F1;
  border-radius: 7px;
  border: none;
  outline:none;
  cursor: pointer;
}

button:active{
background: blue;
}
button:visited {
   color: #4152F1;
}

/* .disclaimer {
  font: Arial;
  font-family: sans-serif;
  font-size: 12px;
  font-weight:medium;
  color: #CECECE;
  width: 390px;
  margin-left: auto;
  margin-right: auto;
}


.disclaimer em {
  color: #B4B4B4;
  cursor: pointer;
  font: Arial;
  font-family: sans-serif;
  font-size: 12px;
  font-weight:medium;
  font-style: normal
} */

/* Sign Up side */
/* body {
  top: 0px;
  bottom: 0px;

  float:left;
  display:inline-block;
  width: 100%;
  height: 100%;
  background-color: white;
  text-align: center;
} */

.descriptDiv {
  width: 100%;
  text-align: center;
  /* background-color: lightblue; */
}

.topSignUpDiv h1 {
  font: Arial;
  font-family: sans-serif;
  font-size: 40px;
  font-weight:600;
  /* text-align: center; */
  margin-top: 25px;
  margin-bottom: 0px;
}
/* .topSignUpDiv h3 {
  font: Arial;
  font-family: sans-serif;
  font-size: 19px;
  font-weight:400;
  color: white;
  background-color: #4152F1;
  border-radius: 7px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 10px;
  width: 355px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 55px;
} */

.disclaimer {
  margin-top: 50px;
  color: grey;
  font: Arial;
  font-family: sans-serif;
  font-size: 15px;
  font-weight:400;
  cursor: pointer;
}

#signout {
  font-weight: 500;
  color: grey;
  margin-top: 30px;
  cursor: pointer;
}

.cancelBtn {
  text-align: center;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  /* height: 50px; */
  font: Arial;
  font-family: sans-serif;
  font-size: 20px;
  font-weight:400;
  color: grey;
  cursor: pointer;
  border-radius: 5px;
}

/* .cancelBtn:hover {
} */

.cancelBtn:hover{
  background: #4152F1;
  color: white;
}

.profImg {
  margin-top: 20px;
  height: 150px;
  width: 150px;
  border-radius: 75px;
  border: solid #EFEFEF 1px;
  background-color: #EFEFEF;
  cursor: pointer;
}

.profImg:hover {
  border: solid #4152F1 1.2px;
}

.avatar {
  margin-top: 30px;
  height: 250px;
  width: 65%;
  border-radius: 20px;
  border: solid #EFEFEF 1px;
  background-color: #EFEFEF;
  cursor: pointer;
}

.avatar:hover {
  border: solid #4152F1 1.2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


    <div class="topSignUpDiv">
      <h1 class="">Edit profile/Settings</h1>
      <!-- <div class="descriptDiv"> -->
        <!-- <h3 class="">by creating your personal account</h3> -->
      <!-- </div> -->
    </div>
    <div class="middleSignUpDiv">

      <!-- <form class="js-form"> -->
        <!-- action="process.php" method="post"-->
        <div class="imgcontainer">
          <img onclick='pickFile()' src="images/defaultBanner.png" alt="Avatar" class="avatar" id="avatar">
          <input type="file" id="fileButton" value="upload"/>
        </div>

        <div class="profileImageContainer">
          <img onclick='pickFile2()' src="images/defaultProfImg.png" alt="Avatar" class="profImg" id="profImg">
          <input type="file" id="fileButton2" value="upload"/>
        </div>

        <!-- <div><label for="image_file">Please select image file</label></div> -->
        <!-- <div><input type="file" name="image_file" id="image_file" onchange="fileSelected();" /></div> -->

        <div class="container">
          <!-- <img onclick='pickFile()' src="images/defaultProfImg.png" alt="Avatar" class="profImg" id="profImg">
          <input type="file" id="fileButton2" value="upload"/> -->
          <!-- <div id="mp3PickerDiv"><input type="file" name="mp3File" id="mp3Picker" onchange="fileSelected();" />Select Soundscape (.MP3)</div> -->


          <!-- <input type="text" placeholder="Bio" name="soundscapeCaption" id="soundscapeCaption" required> -->
          <div class="justify">
            <textarea placeholder="Bio" class="soundscapeCaption" id="soundscapeCaption" rows="20" cols="50"></textarea>
          </div>

          <!-- <input type="text" placeholder="Email" name="emailInput" id="emailInput" required>
          <input type="password" placeholder="Password" name="psw" id="psw" required> -->


          <button id="update">Update</button>
          <!-- type="submit" -->

          <!-- <label>
            <input type="checkbox" checked="checked" name="remember"> Remember me
          </label> -->
        </div>

        <!-- <div class="container" style="background-color:#f1f1f1">
          <span class="googleSignIn"> fhsdakj </span>
        </div> -->
      <!-- </form> -->

      <div class="cancelBtn" id="cancelBtn">
        Cancel
      </div>

      <p id="signout">Sign out</p>

    </div>

Please avoid using inline `onclick` handlers. It's hard to debug and JS code should be in one place, not dispersed around HTML files. Use `.addEventListener()` — Roko C. Buljan, Feb 17 '20 at 19:13

score 1 · Accepted Answer · answered Feb 17 '20 at 20:00

1

Seems like in Firefox Buttons default to submit. You could set your button type to button or just call event.preventDefault().

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

answered Feb 17 '20 at 20:00

nicoavn

73
6

score 0 · Answer 2 · answered Feb 17 '20 at 20:41

event.preventDefault() should solve your problem. So your code should look like:

$('#update').on('click', event => {
  // prevent default event
  event.preventDefault();
  updateProfileData();
})

function updateProfileData() {
  //none of this will run because the page will instead reload
}

function pickFile() {
  fileButton.click()
}

function pickFile2() {
  fileButton2.click()
}

function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.

Pressing button causes page to reload rather than run nessasary code?

2 Answers2