Click but stay on anchor

Question

I have a navabar that uses anchors instead of links. I am making a chat feature and every time the user enters something into the chat, followed by enter, they are redirected to the first anchor. I know I need to probably use AJAX but I can't seem to figure it out. Here is the code.

<div id="tab3">
    <h2>Chat Room</h2>

    <div id="chatboxlog">
        <div id="chatlog">
            Loading chat please wait...
        </div>
    </div>

    <div id="chatinput">
        <form name="chatbox" class="userchat">
            <input class="userchat" name="message" type="text" onkeydown="if (event.keyCode == 13) document.getElementById('chatbutton').click()"/><br>
            <input class="userchat" id="chatbutton" name="submitmsg" type="button" onclick="submitChat()" value="Send" />
        </form>
    </div>
</div>

<script>
function submitChat() {
    if(chatbox.message.value == '') {
        alert('Error: Missing Fields.');
        return;
    }

    var message = chatbox.message.value;
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState==4&&xmlhttp.status==100) {
            document.getElementById('chatlog').innerHTML = xmlhttp.responseText;
        }
    }

    xmlhttp.open('GET','chat.php?message='+message, true);
    xmlhttp.send();
    chatbox.reset();
}

$(document).ready(function(e) {
    $.ajaxSetup({cache:false});
    setInterval(function() {$('#chatlog').load('logs.php');}, 200);
});
</script>

i guess you need to parse the right(current) anchor on click? — , Nov 10 '15 at 03:37
get the anchor http://stackoverflow.com/questions/3552944/how-to-get-the-anchor-from-the-url-using-jquery then add to your open() — , Nov 10 '15 at 03:46
try to use a tag with name attribute instead assigning id to your DIVs. — SG_Rowin, Nov 10 '15 at 04:07
What is your issue exactly? You want to navigate to a particular anchor when user hits "Enter" after having typed a message? Or do you have an unexpected behaviour that makes your page automatically navigate to another anchor when hitting Enter? In the last case, you would simply need to prevent the form from submitting. — ghybs, Nov 10 '15 at 06:14
I'm sorry, I will try to be more clear, when the user submits the message using the enter key (instead of using the submit button) the page reloads back to the first anchor. I need the page to stay on the proper anchor and submit the message. — Gavin Youker, Nov 10 '15 at 10:51

score 0 · Accepted Answer · answered Nov 10 '15 at 11:35

It seems to me you simply have an issue with your form being submitted (typically happens when user hits "Enter" while focus is on a form child element, other than a textarea) and it automatically reloads your page.

This happens for example when no action is specified on your form: the latter tries reloading what is currently in the browser navigation bar ("location"). In your case, if the location has a fragment (hash) to another anchor, the page will simply scroll to that anchor.

You can prevent the form submit action by using event.preventDefault(), either in your text input, or better on the form itself, by attaching a callback on the submit event.

// NOTE: try using id's rather than names.
// Select the appropriate form.
var form = document.querySelector('form[name="chatbox"]');

form.addEventListener("submit", function (event) {
    // Prevent the form from reloading the page.
    event.preventDefault();
});

Demo: http://jsfiddle.net/8odryt5p/1/

score 0 · Answer 2 · answered Nov 10 '15 at 11:57

Use preventDefault() to prevent form or page from reloading. See Examples below

Click on Specific ID

$('#myId').click(function(e){
   event.preventDefault();
});

For click on any class

$('.myClass').click(function(e){
   event.preventDefault();
});

For click on Any Anchor inside page

$('a').click(function(e){
   event.preventDefault();
});

To Prevent Page reload after click on any anchor inside a div or section

$('.myClass a').click(function(e){
   event.preventDefault();
});

Click but stay on anchor

2 Answers2