POST Data in URL when pressing button

Question

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'
        });
    });
});

Where is url option? And add `$('#clickMe').on('click', function(e) {` `e.preventDefault()` — Void Spirit, Oct 03 '18 at 20:42
and add a `type="button"` to your button to tell the browser that it's not a 'submit' button for your form (just to be sure together with the preventDefaults) — Bert Maurau, Oct 03 '18 at 20:44

But those new buttons though.. · Accepted Answer · 2018-10-03T20:49:06.307

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.

POST Data in URL when pressing button

1 Answers1