javascript - HTML Tag <a> with both href and onclick and AJAX Request - Stack Overflow

admin管理员组

文章数量:1324799

I want to have both href and onclick working and I found a solution here: HTML tag <a> want to add both href and onclick working

In myFunction, I make an AJAX Request calling a perl ponent.

It works fine when I put the Javascript call in href, but not when in onclick. Unfortunately, I'm not allowed this solution neither jQuery, so can you please help.

// AJAX Request doesn't work
<a href="www.mysite" onclick="myFunction();">Item</a>

<script type="text/javascript">
    function myFunction () {
        var xmlHttp = getXMLHttpObject();
        xmlHttp.open('GET', 'perl.m', true);                
        return true;
    }
</script>

// AJAX Request ok
<a href="javascript: myFunction('www.mysite')">Item</a>

<script type="text/javascript">
    function myFunction (url) {
        var xmlHttp = getXMLHttpObject();
        xmlHttp.open('GET', 'perl.m', true);
        window.location.href = goto_url;                
    }
</script>

perl.m:
<%init>
    warn "perl.m";
    ... update ...
</%init>

I want to have both href and onclick working and I found a solution here: HTML tag <a> want to add both href and onclick working

In myFunction, I make an AJAX Request calling a perl ponent.

It works fine when I put the Javascript call in href, but not when in onclick. Unfortunately, I'm not allowed this solution neither jQuery, so can you please help.

// AJAX Request doesn't work
<a href="www.mysite." onclick="myFunction();">Item</a>

<script type="text/javascript">
    function myFunction () {
        var xmlHttp = getXMLHttpObject();
        xmlHttp.open('GET', 'perl.m', true);                
        return true;
    }
</script>

// AJAX Request ok
<a href="javascript: myFunction('www.mysite.')">Item</a>

<script type="text/javascript">
    function myFunction (url) {
        var xmlHttp = getXMLHttpObject();
        xmlHttp.open('GET', 'perl.m', true);
        window.location.href = goto_url;                
    }
</script>

perl.m:
<%init>
    warn "perl.m";
    ... update ...
</%init>

• javascript
• html
• ajax
• perl
• tags

Share Improve this question Follow edited May 23, 2017 at 11:51 CommunityBot 111 silver badge asked Aug 8, 2014 at 6:53 Karin SuelKarin Suel 10322 gold badges33 silver badges99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Please carefully follow the tutorial. It states that you must enter the javascript like this (with return keyword).

<a href="www.mysite." onclick="return theFunction();">Item</a>

Besides that you should always type in a URL (like http://stackoverflow.).

Please let me know if this supports you.

Try with:

<a href="www.mysite." onclick="myFunction(event);">Item</a>

<script type="text/javascript">
    function myFunction (e) {
        e.preventDefault();
        var xmlHttp = getXMLHttpObject();
        xmlHttp.open('GET', 'perl.m', true);                
        return true;
    }
</script>

Because you have href attr with url, so it will go to url and your ajax is not affected. e.preventDefault() is your solution here.

本文标签： javascriptHTML Tag ltagt with both href and onclick and AJAX RequestStack Overflow