My ajaxForm redirects to a PHP script

Question

When I submit my form ajax always redirects to some.php, how can I prevent this from redirecting to the PHP script instead after submitting the form I want the page redirects to the index.html

<html>
<head>
<meta charset="utf-8">
<title>jQuery Adapter &mdash; CKEditor Sample</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="../ckeditor.js"></script>
<script src="../adapters/jquery.js"></script>
<script src="jquery.form.js"></script>

<script>
    CKEDITOR.disableAutoInline = true;

    $( document ).ready( function() {
        $( '#editor1' ).ckeditor(); // Use CKEDITOR.replace() if element is <textarea>.
        $( '#editable' ).ckeditor(); // Use CKEDITOR.inline().
    } );

    function setValue() {
        $( '#editor1' ).val( $( 'input#val' ).val() );
    }
</script>
</head>

<body>
<form id="f1" action="some.php" method="post" enctype="multipart/form-data">
<table>
    <tr>
        <td>Title:</td>
        <td><input type="text" name="articletitle" id="articletitle" required/></td>
    </tr>
    <tr>
        <td>Featured Image:</td>
        <td><input name="MAX_FILE_SIZE" value="2097152" type="hidden">
        <input name="image" id="image" type="file" required/></td>
    </tr>
    <tr>
        <td colspan="3"><textarea cols="80" id="editor1" name="editor1" rows="10"></textarea></td>
    </tr>
    <tr>
        <td><input id="save" type="submit" value="Save"></td>
    </tr>
</table>
</form>

<script type="text/javascript">

$(document).ready(function(){
    $("#save").click(function(){
        $("#f1").ajaxForm();
    });
});
</script>
</body>
</html>

Please help me guys on this one.

This is because a submit buttons default behavior is to submit a form. You can prevent this by using `preventDefault()` in your click handler. [jQuery Docs](http://api.jquery.com/event.preventDefault/) — Jeemusu, Sep 13 '13 at 06:39

firemeaway · Answer 1 · 2013-09-13T07:06:34.417

1

Try this:

$(document).ready(function(){
    $("#save").click(function(e){
        e.preventDefault();
        $("#f1").ajaxForm();
    });
});

It should prevent your input from doing its default behavior of redirecting the page.

Edit:

To redirect to another page you should use something like:

window.location.href = 'http://www.google.com';

on the ajax's Success event.

Edit 2:

Try this fiddle: http://jsfiddle.net/4hF6e/3/ Make sure your references are correct. Seems to me the AjaxForm plugin has some way to prevent default behavior on the button.

edited Sep 13 '13 at 07:06

answered Sep 13 '13 at 06:42

firemeaway

68
6

You mean it still redirects? – Jeemusu Sep 13 '13 at 06:44
@FioderickVillapañe what does your function ajaxForm() do? – rakeshjain Sep 13 '13 at 06:48
@Jeemusu It doesn't insert the data inside the database – Fioderick Villapañe Sep 13 '13 at 06:51
@rakeshjain It insert the data inside the database, as you can see I also have an image to be uploaded to my database. – Fioderick Villapañe Sep 13 '13 at 06:52
Does it still redirect? If not, this is the answer. You appear to have a completely different problem relating to your AJAX. I would suggest looking at your XHR requests/responses in the network tab of Firebug/Chromes developer tools to see what errors you are getting. If you have more problems, start a new question. – Jeemusu Sep 13 '13 at 06:54

score 1 · Answer 2 · answered Sep 13 '13 at 06:42

1

The default behaviour of an <input type="submit"> is to submit the form.

There two ways to fix this. The first one is to simply make your input a button. That will prevent the browser to send the form.

A better way though is to be JavaScript-independent and use what @Jeemusu said, use preventDefault() to prevent the submit to occur.

answered Sep 13 '13 at 06:42

Bart Friederichs

33,050
15
95
195

when I change the input to button the data in the form doesn't insert in my database. – Fioderick Villapañe Sep 13 '13 at 07:08
@FioderickVillapañe that's a different question. Your question here applies to the redirect, not the database handling. – Bart Friederichs Sep 13 '13 at 07:17

score 0 · Answer 3 · answered Sep 13 '13 at 06:43

0

TRY

$("#save").click(function(e){
        e.preventDefault();
        $("#f1").ajaxForm();

});

OR

$("#save").click(function(){
        $("#f1").ajaxForm();
        return false;
});

answered Sep 13 '13 at 06:43

rakeshjain

1,791
11
11

Use the first one. Always use the first one. – Jeemusu Sep 13 '13 at 06:44

score 0 · Answer 4 · answered Sep 13 '13 at 06:45

0

instead of using type="submit" you can use:

type="button"

or you can make use of .preventDefault();:

$("#save").click(function(e){
    e.preventDefault();
    $("#f1").ajaxForm();

});

answered Sep 13 '13 at 06:45

Jai

74,255
12
74
103

1

Don't say, `it doesn't work`. This is such a meaningless comment. Explain how it doesn't work. You asked how to stop your form redirecting to another page. This will almost certainly stop that from happening. If you want to ask a question about your AJAX failing, please start a new question. – Jeemusu Sep 13 '13 at 07:00

score 0 · Answer 5 · answered Sep 13 '13 at 06:51

Or you could attach to the event "onsubmit" of the form. And return false in that function. i.e.:

$('#f1').submit(function() {
  // do your ajax stuff... and when completed (success) redirect 
  // using document.location.href = 'index.html';
  return false;
});

My ajaxForm redirects to a PHP script

5 Answers5

Linked