防止在表单提交后重定向到php文件

Question

After researching this for too many hours I finally decided to post the question myself, as what is working for others, doesn't seem to work for me. Please keep in mind that I am fairly new to ajax and jquery, but as I am on a deadline with my current project I wont have time to go through it all.

I have the following html form:

<div class="form">
    <form id="savePlacemarkForm" method="post" action="createPlacemark.php">
        <div>
            <input type="text" id="placemarkName" name="placemarkName" placeholder="Name:"/>
        </div>
        <div>
            <input type="text" id="placemarkAddress" name="placemarkAddress" placeholder="Adress:"/>
        </div>
        <div>
            <input type="text" id="placemarkTag" name="placemarkTag" placeholder="Tags:"/>
        </div>
        <div>
            <textarea id="placemarkDescription" name="placemarkDescription" placeholder="Description" rows="1" cols="1"></textarea>
        </div>
        <div>
            <input id="latitude" type="text" name="latitude"/>
        </div>
        <div>
            <input id="longtitude" type="text" name="longtitude"/>
        </div>
        <button class="md-close" id="savePlacemark" onclick="createPlacemark();"/>Save</button>
    </form>
    <button class="md-close">Cancel</button>
    <script src="my_script.js" type="text/javascript"></script>
</div>

As you see I have the action set to createPlacemark.php which takes input from these fields and saves it to my DB, which works fine!! However since this should work without redirecting or resubmitting the page, meaning ajax! I include my_script.js which looks like this:

$("#savePlacemark").click( function() {
    $.post( $("#savePlacemarkForm").attr("action"), 
        $("#savePlacemarkForm :input").serializeArray();                     
    });
    clearInput();
});

$("#savePlacemarkForm").submit( function() {
    return false;   
});

function clearInput() {
    $("#savePlacemarkForm :input").each( function() {
        $(this).val('');
    });
}   

As you see it does the post for me, which works, but for some reason the return false; doesnt seem to work for me, as I am continuously redirected to the before mentioned php file.

Any help would be greatly appreciated! thx!

Answer 1

Try the following. The .submit() function actually triggers a submit for the form. Take this out of the script since you don't need it when you've already posted the values with $.post .

$("#savePlacemark").click( function() {
 $.post( $("#savePlacemarkForm").attr("action"), 
         $("#savePlacemarkForm :input").serializeArray();                    
  });
  clearInput();
});

function clearInput() {
    $("#savePlacemarkForm :input").each( function() {
       $(this).val('');
    });
}   

Answer 2

try this

<button onclick="return createPlacemark();">Save</button>

it may help you.