jQuery/JS stop propogation after button click

Question

I am posting data from user to php script and displaying response as a result.

Issue with me is after I click button it reload the page and empty all textbox without displaying reply from server script.

I tried with event.stopPropagation(); and resturn false but still no help.

HTML :

 <div class="show" id="show"></div>

JS:

    $( "#submit" ).click(function(event) {
            event.stopPropagation();
            //var cat = $("#cats option:selected").html();
            var post = document.getElementById("post").value;
            var tag = document.getElementById("tags").value;
            dataInsert(post,tag);
            return false;
    });

    function dataInsert(post,tag)
    {               
        var xmlhttp;
        alert("hi");
        show.innerHTML = '';
        if (window.XMLHttpRequest)
        {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }           
        xmlhttp.onreadystatechange=function()
        {
            //document.getElementById("old-records").innerHTML = "";                
            if (xmlhttp.readyState == 4 && xmlhttp.status==200)
            {
                var div2 = document.getElementById("show");
                alert(xmlhttp.responseText);
                div2.innerHTML = xmlhttp.responseText;
            }
        }       
        xmlhttp.open("POST","koove_getTag_db.php",true);                
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send('post=' + post + '&tag=' + tag ) ;         
        alert(post+cat+tag);
    }

If you're using jQuery, why are you doing the longhand, plain vanilla JavaScript AJAX request? — j08691, Jul 03 '14 at 17:33
you want `preventDefault`, `stopPropagation` stops the event from bubbling up to parent elements, also note that if your code errors out before reaching `return false` the default event action will not be prevented — Patrick Evans, Jul 03 '14 at 17:34
If you're using a `a` tag, then you need `event.preventDefault()` — Foreign Object, Jul 03 '14 at 17:35
There is more than one way to submit a form. You should not rely on the user clicking a button. Use `$('#theform').submit(function(){})` — Popnoodles, Jul 03 '14 at 17:36
`$('#theform').submit(function(e){e.preventDefault(); ... });` — mplungjan, Jul 03 '14 at 17:38

score 1 · Answer 1 · edited May 23 '17 at 11:58

1

Use this

 event.preventDefault()

instead of this

 event.stopPropagation()

Difference between thses 2 methods : Read here - What's the difference between event.stopPropagation and event.preventDefault?

"stopPropagation stops the event from bubbling up the event chain.

preventDefault prevents the default action the browser makes on that event."

edited May 23 '17 at 11:58

Community

1
1

answered Jul 03 '14 at 17:40

Cute_Ninja

4,742
4
39
63

score 0 · Answer 2 · answered Jul 03 '14 at 17:44

0

$( "#submit" ).click(function(event) {
    event.preventDefault();
    //...
});

answered Jul 03 '14 at 17:44

Michał Jantos

1
1

Add some explanation to this answer. Why do you think it works? What does it do? – Joe Kennedy Jul 03 '14 at 18:01

jQuery/JS stop propogation after button click

2 Answers2