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

时间:2013-10-30 11:32:16

标签: javascript php jquery ajax forms

经过几个小时的研究后,我终于决定自己发布这个问题,因为对他人有用的东西,对我来说似乎没什么用。请记住,我对ajax和jquery相当新,但是因为我正处于当前项目的最后期限,所以我没时间完成所有这些。

我有以下html表单:

<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>

如你所见,我将动作设置为createPlacemark.php,它从这些字段中获取输入并将其保存到我的数据库,这很好用!!但是,因为这可以在不重定向或重新提交页面的情况下工作,这意味着ajax!我包含my_script.js,如下所示:

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

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

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

正如你所看到的那样,对我而言,这是有效的,但由于某种原因,返回错误;似乎不适合我,因为我不断被重定向到前面提到的php文件。

任何帮助将不胜感激! THX!

2 个答案:

答案 0 :(得分:0)

尝试以下方法。 .submit()函数实际上触发了表单的提交。当你已经使用$.post发布值时,不需要它就可以从脚本中取出它。

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

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

答案 1 :(得分:-1)

试试这个

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

它可能对你有所帮助。