时间戳

首页 > 解决方案 > 如何使用 Javascript 停止页面刷新

javascript - 如何使用 Javascript 停止页面刷新

问题描述

我尝试了多种方法来停止页面，但不幸的是，它不起作用，我有一种 Wordpress 插件的前端形式，我可能会尝试但代码不起作用插件形式代码

echo '<div id="submit_car_form">';
echo '<form id="cd_car" name="cd_car" class="cd_car" method="post" action="'.$_SERVER['PHP_SELF'].'" enctype="multipart/form-data" >';

        echo '<input type="hidden" name="author_id" value="'. get_current_user_id().' " />';

        echo '<p><label for="title">Title</label><br />';
        echo '<input type="text" id="title" value="" size="60" name="title" />';
        echo '</p>';

       ..........................
       i Have multiple inputs
       ..........................

        echo '<p align="left"><input type="submit" tabindex="6" id="submit_car" name="submit_car" /></p>';
        wp_nonce_field( "car-frontend-post" );
        echo '</form>';
        echo '</div>';

用于停止刷新表单提交的 Javascript 代码

jQuery(document).ready(function($) {
    $('#submit_car').on('submit', function(event){
    // $('#cd_car').on('submit', function(e){
    // $('#cd_car').submit(function(e){
    // $('#submit_car').click(function(e){
        e.preventDefault();
        var message = document.getElementById("file").value;
        var title = document.forms["cd_car"]["title"].value;
        if (title == ""){
            alert("Title cannot be empty");
            return false;
        }
        else {
        $.ajax({
            type: 'POST', 
            dataType: 'JSON',
            data: new FormData($('#car_data')[0]),
            contentType: false,
            cache: false,
            processData: false,
            success: function(data){
                console.log(data);
                alert('Your Form Submited');
            },
            error: function(data){
                console.log(data);
                alert('something wrong');
            }
        });
        return false;
      }
  });
});

标签： javascriptphpjqueryhtmlwordpress

解决方案

您的表单的 id 为cd_car, not submit_car! 因此，在您更改选择器之前，您的 JS 处理程序不会以它为目标。

此外，如评论中所述，您的处理程序中的事件对象被调用event，但在您的代码中，您使用e.preventDefault()的是event.preventDefault()

推荐阅读