CODEWITHSUNDEEP
javascriptjqueryajax
Kevin Price
Kevin Price

Reputation: 429

POST Data in URL when pressing button

I have a button below. When I press it, my form data is displaying in my URL like so:

?name=&email=&phone=&message=

I dont want that and im unsure of why its there considering there is no POST on my form and my button is using a jquery post method.

Heres the form and button in question: 

               <form class="form">
                    <p type="Message"><input type="text" name="message"></p>
                    <button id="clickMe">Send Message</button>
                </form>

Heres the jquery on my button:

$(document).ready(function() {
    $('#clickMe').on('click', function() {
        var data = {};
        data.name="kevin";
        $.ajax({
            type: "POST",
            data: JSON.stringify(data),
            contentType: 'application/json'
        });
    });
});

Upvotes: 1

Views: 909

Answers (1)

You Old Fool
You Old Fool

Reputation: 22941

I think you just need to prevent the form from submitting. You can add inside of your click handler (read more here):

$('#clickMe').on('click', function(e) {
    e.preventDefault();

Note the e inside function(e) so that you capture the event object.

If you want to POST the form data add method="POST" to your <form> element (read more here):

<form action="http://foo.com" method="post">

But if your goal is not to post the form but only send an ajax request I don't think it matters what method attribute is set to.

Upvotes: 1

Related Questions