0

Im into HTML/JS/PHP for 2 Months now and I have 2 problems in my code where the page reloads / jumps to top but it shouldnt in my opinion.

In the first snippet im just trying to click the image so I can send a request to my database, but the page shouldnt move at all. 

function favorite(identifier)
{
   
        $.ajax(
      {
      url:"favorite.php",
      type:"POST",
      data:
        {
         id: $(identifier).data('option')
       },
      success:function(data)
      {
        $(".container").html(data);
      }
      });
};
<input type="image" class="favorite-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Heart_icon_red_hollow.svg/800px-Heart_icon_red_hollow.svg.png" data-option="<?php echo $row['id']?>" onclick="return favorite(this);">

Here im trying to login and keep the page at the current state if the login details are wrong. Here again the form closes / becomes invisible and the page reloads. 

<div class="user-modal-container">
            <ul class="switcher">
               <li><a >Sign in</a></li>
               <li><a >New account</a></li>
            </ul>
            <div id="login">
               <form class="form" target="_self" method="post" action="">
               <?php include('errors.php'); ?>
                  <p class="fieldset">
                     <label class="image-replace email" for="signin-user">Username</label>
                     <input class="full-width has-padding has-border" id="signin-username" type="text" name="username" placeholder="Username">
                  </p>
                  <p class="fieldset">
                     <label class="image-replace password" for="signin-password">Password</label>
                     <input class="full-width has-padding has-border" id="signin-password" type="password"  name="password"     placeholder="Password">
                     <a  class="hide-password">Show</a>
                     <span class="error-message">Wrong password! Try again.</span>
                  </p>
                  <p class="fieldset">
                     <input type="checkbox" id="remember-me" checked>
                     <label for="remember-me" style="color:#fff">Remember me</label>
                  </p>
                  <p class="fieldset">
                     <input class="full-width" type="submit" value="Login" name="login_user">
                  </p>
               </form>
               <p class="form-bottom-message">Forgot your password?</a></p>
            </div>
Joshie
  • 1
  • 1
  • Hi Joshie: The question should be updated to include desired behavior, a specific problem or error, and **the shortest code necessary** to reproduce the problem. – caramba Mar 17 '22 at 14:45
  • https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault – WOUNDEDStevenJones Mar 17 '22 at 15:15
  • Does this answer your question? [What's the effect of adding 'return false' to a click event listener?](https://stackoverflow.com/questions/128923/whats-the-effect-of-adding-return-false-to-a-click-event-listener) – WOUNDEDStevenJones Mar 17 '22 at 16:32
  • For your second question about the form submission - you want to add a form `submit` event listener (https://stackoverflow.com/questions/7410063/how-can-i-listen-to-the-form-submit-event-in-javascript and https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event for examples) so you can submit the form asynchronously, and then either redirect the user on success or display an error message if the login failed. – WOUNDEDStevenJones Mar 17 '22 at 16:34
  • I already tried that, but its just not working out for me in the first case. I retrieve a Gallery from a Database. Then I have to press an Image to get a Value from the retrieved Data. So far its working, but somehow every way ive found online didnt work for me, including your proposal. – Joshie Mar 17 '22 at 16:48
  • `return favorite(this);` should be replaced by `favorite(this);` – E-telier Mar 18 '22 at 08:44
  • I fixed it by returning false in every single function call. Thank you for helping. – Joshie Mar 18 '22 at 13:55

0 Answers0