call jQuery on submit event reload the page

Question

Sorry but, I am getting crazy with this problem. Each time I call jQuery it reloads my page.

HTML file:

<body>
<form enctype='multipart/form-data' id="form_id">
---- some inputs here ------
<input type='submit' value='Basic search'>
</form>
<script type="text/javascript">
$(document).ready(function() {
    $(document).on('submit', '#form_id', function() {
        var data = $(this).serialize();
        $.ajax({
            type : 'POST',
            url  : 'phpfile.php',
            data : data,
            success :  function(data)
            {$(".result").html(data);} //result is div that i want display result in it

        });
        return false;
    });
});
</script>
</body>

Edit 1: I use <input type ='button'> insted of <input type = 'submit'> but it does not works. And I add

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

But, it does not works!

Edit 2: The error msg in console: Form contains enctype=multipart/form-data, but does not contain method=post. Submitting normally with method=GET and no enctype instead.

A form was submitted in the windows-1252 encoding which cannot encode all Unicode characters, so user input may get corrupted. To avoid this problem, the page should be changed so that the form is submitted in the UTF-8 encoding either by changing the encoding of the page itself to UTF-8 or by specifying accept-charset=utf-8 on the form element.

Form contains a file input, but is missing method=POST and enctype=multipart/form-data on the form. The file will not be sent.

mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/

The Web Console logging API (console.log, console.info, console.warn, console.error) has been disabled by a script on this page.

Add a `console.log()` statement to the function, to check whether it's being executed. — Barmar, Feb 23 '16 at 19:18
`` reloads the page. That's what it does pretty much. You want to use another element like ` — BoltKey, Feb 23 '16 at 19:20
@Anant all thing you mention is there but, i just wrote what i used in the post. I recently add e.preventDefault() but it does not work. — Reem, Feb 23 '16 at 19:31
@Anant actually, No. I add but it show me an error in the platform. — Reem, Feb 23 '16 at 19:41
@Reem `console.log("in the submit function")` will display the message in the Javascript console. This is really basic, it should be in any Javascript tutorial. — Barmar, Feb 23 '16 at 20:18
@Barmar console.log("in the submit function") did not displayed in the console — Reem, Feb 23 '16 at 20:39
Then something is preventing your event binding from working. I don't see anything obvious in the question, it must be something you haven't posted. — Barmar, Feb 23 '16 at 20:43
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/104332/discussion-between-reem-and-barmar). — Reem, Feb 23 '16 at 20:53

score 0 · Answer 1 · answered Feb 25 '16 at 20:44

0

I solve the problem by replace $ with jQuery

jQuery.ajax insted of $.ajax

answered Feb 25 '16 at 20:44

Reem

101
2
8

score -1 · Answer 2 · answered Feb 23 '16 at 19:24

-1

Don't use <input type='submit'>, because that reloads the page by default. Use <button> instead.

<button id='search_button'>Basic search</button>

<script type="text/javascript">
$(document).ready(function() {
    $(document).on('click', '#search_button', function() {
        var data = $(this).serialize();
        $.ajax({
            type : 'POST',
            url  : 'phpfile.php',
            data : data,
            success :  function(data)
            {$(".result").html(data);} //result is div that i want display result in it

        });
        return false;
    });
});
</script>

answered Feb 23 '16 at 19:24

BoltKey

1,994
1
14
26

It does not work! also I add e.preventDefault() but it reload the page – Reem Feb 23 '16 at 19:37
`return false` from a jQuery event handler is equivalent to `e.preventDefault()`. This should prevent the default submission. – Barmar Feb 23 '16 at 20:20

call jQuery on submit event reload the page

2 Answers2