How can I prevent my hyperlink from refreshing the page?

Question

everyone, I'm using a javascript to do a form popup on a page. The form is included rather than being directly a part of the page.

When I click on hyperlink the form only shows for a second then disappears. It works if I literally create the form in the same page instead of including it as a php file.

I believe it's the hyperlink that's refreshing the page. How can I prevent my hyperlink from refreshing the page?

<?php < scripttype = "text/javascript" >
function deselect(e)
    {
    $('.popUp') . slideFadeToggle(
   function ()
    {
    e . removeClass('selected');
    });
}

$(
function ()
{
$('#edit') . on('click',
function ()
    {
    if ($(this) . hasClass('selected'))
        {
        deselect($(this));
        }
      else
        {
        $(this) . addClass('selected');
        $('.pop') . slideFadeToggle();
        }

    return false;
    });
$('.close') . on('click',
function ()
    {
    deselect($('#edit'));
    return false;
    });
});
$ . fn . slideFadeToggle =
function (easing, callback)
{
return this . animate(
    {
    opacity:
        'toggle', height:
            'toggle'
            }

        , 'fast', easing, callback);
        };
</script>

Here's the form that is in a seperate file...

<div id="contactInfoDiv" class="fluid popUp">
<form id="updateForm" method="post" action="editContact.php">
<pre>
First Name:   <input type="text" name="firstName" value="<?php echo    $firstname;?>"><br>
    Last Name:    <input type="text" name="lastName" value="<?php echo  $lastname;?>"><br>
    Address:      <input type="text" name="address" value="<?php echo $address;?>"><br>
    Phone:        <input type="text" name="phone" value="<?php echo $phone;?>"><br>
    Email:        <input type="email" name="email" value="<?php echo $email;?>"><br>
<input type="submit" name="update" value="Update"><br>
</pre>
</form>
    </div>

Edit

What I'm trying to do is just include the above form like this:

<?php include("editContact.php");

<a href="userProfile.php" id="edit">Edit</a>

UPDATE:

I added e.preventDefault() like the following:

 <script type="text/javascript">
 function deselect(e) {

  $('.pop').slideFadeToggle(function() {
 e.removeClass('selected');

    });
   e.preventDefault();
 }

   $(function() {
   $('#edit').on('click', function() {
 if($(this).hasClass('selected')) {
  deselect($(this));               
} else {
  $(this).addClass('selected');
  $('.pop').slideFadeToggle();
}
 return false;
 });

  $('.close').on('click', function() {
  deselect($('#edit'));
   return false;
   });
});

 $.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing,      callback);
 };

You should take a look into using ajax to make the call to editcontact.php which will help you display the form in place without a refresh as well. — MrTechie, Apr 07 '15 at 17:32
try something like this on your anchor. `` It will fire the javascript just fine but will not return its original function, which is to link to something. — Dorvalla, Apr 07 '15 at 19:56

score 3 · Answer 1 · answered Apr 07 '15 at 17:33

3

To prevent a link's default behavior with jQuery, you can start your function with:

$("#edit").on("click", function(e){
    e.preventDefault();
}

answered Apr 07 '15 at 17:33

jackel414

1,636
2
13
29

Tried the e.preventDefault() with no different result. Sorry MrTechie, I'm not to confident with ajax to make it work. – CloudyKooper Apr 07 '15 at 18:14
2

You added the preventDefault at the wrong place @CloudyKooper, the parameter `e` should be the `click` event, not your jquery object – DarkBee Apr 07 '15 at 19:54

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

Try changing the structure of your HTML Link.

<?php include("editContact.php");

<a href="#edit" id="edit">Test</a>

The href='#edit' makes the link try to make your browser focus the element whose id='edit', instead of trying to load a remote page for you. Now the user won't leave your page (no http request, no refresh), and the jquery event still gets triggered.

See this question for more information.

(thanks to DarkBee in the comments).

edited May 23 '17 at 12:13

Community

1
1

answered Apr 07 '15 at 19:46

Snivs

1,105
11
20

Using an `#` as link will send the browser back to top. It does not prevent the initial event from firing up! – DarkBee Apr 07 '15 at 19:52
In that case you should try using a tag, such as href='#something' probably right next to the link so it doesn't make the user "go away", where 'something' is the id of the pop up you're opening. – Snivs Apr 07 '15 at 19:55
As OP is using jquery, jackel's answer is the one that is 100% correct – DarkBee Apr 07 '15 at 19:57
That's just subjective thinking, getting the job done using a different approach. But thanks for the sweet yet not very reasonable downvote. – Snivs Apr 07 '15 at 19:59

How can I prevent my hyperlink from refreshing the page?

2 Answers2