Home » Jquery » javascript – Pressing button causes page to reload rather than run nessasary code?

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

Posted by: admin February 22, 2020 Leave a comment

Questions:

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>
How to&Answer:

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

Answer:

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.