Trying to stop form from redirecting after submit (return false & prevent.default are not working!)

Question

The problem I've been trying to solve for hours and hours now is following: I cannot stop the redirecting of #myform action after the data has been submitted succesfully to database. I've tried multiple methods but none seem to work. I'm in dire need of help!

The code:

Html(mainview.php):

    <div id="submitAccordion">

    <form id="myForm" action="userFiles.php" method="post">
        Name: <input type="text" name="accordionName" /><br />
        <input id="sub" type="submit" name="go"  />

    </form>

    <span id="result">  </span>

   </div>

Javascript(mainview_script.js):

 $("#sub").click(function () {

        var data = $("#myForm :input").serializeArray();

        $.post( $("#myForm").attr("action"),
        data, function(info) {
        $("#result").html(info); } )
        }); 

        $("#myForm").submit(function () {

        return false;

        }); 

php(userFiles.php):

session_start();
require_once 'database.php';

if ( isset($_SESSION['user_id']) ) {    
    $sql = "INSERT INTO useraccordion (id, h3) VALUES (:id, :accordion)";
    $stmt = $conn->prepare($sql);
    $stmt->bindParam(':id', $_SESSION['user_id']);
    $stmt->bindParam(':accordion', $_POST['accordionName']);
    if ( $stmt->execute() ) {
       echo "Succesfully inserted";
    } else {
        echo "Sorry, there was an error";
    }
}

I have tried ajax method, prevent.default etc, but none work!

Answer 1

Either change your input type to button

<input id="sub" type="button" name="go" value="Submit"/>

Or try this:

 $("form").submit(function(e){
    e.preventDefault();
 });

Answer 2

It is sufficient to prevent deafult action on sub:

$("#sub").click(function (e) {

    e.preventDefault();

    var data = $("#myForm :input").serializeArray();

    $.post( $("#myForm").attr("action"),
                  data, function(info) {
                        $("#result").html(info); } )

});

Answer 3

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

那应该停止提交

Answer 4

First, move your $("#myForm").submit(... out of the click event so it is it's own thing. Then, pass in e into that function. So it would look like this...

$("#myForm").submit(function(e) {
       e.preventDefault();
       return false;
});
$("#sub").click(function() {
    var data = $("#myForm :input").serializeArray();
    $.post( $("#myForm").attr("action"),data, function(info) {
        $("#result").html(info); 
    });
});

That will fix your immediate problem. My thought is... Do not even use a form for this. There is no reason to. You are posting the data via Ajax, so there is no reason to have a form that would submit. I would do something like this...

HTML...

<div id="form">
    <div class="form-item">
        <label for="name">Name:</label>
        <input name="name" id="name" type="text" />
    </div>
    <button id="sub">Submit Form</button>
</div>

Javascript...

$("#sub").click(function() {
    var postData = {};
    //this is here to be dynamic incase you want to add more items....
    $("#form").find('input').each(function() {
          postData[$(this).attr('name')] = $(this).val();
    });
    $.ajax({
        url: "YOUR URL HERE",
        type: "POST",
        data: postData,
        success: function(msg) {
            $("#result").html(msg);
        }
    });
});

Answer 5

如果要通过ajax或jquery提交表单数据，则应将输入类型从“提交”更改为“按钮”类型

<input id="sub" type="button" name="go" value="go"/>