Question

我想验证表单，然后使用$ .ajax发送值。但它显示未定义的索引： is_ajax 。为什么它没有得到form_data？为什么会发生？应该做些什么改变？这是我的剧本

function validateForm()
{

     var oldPassword = document.forms["dsettings"]["oldPassword"].value;
     var newPassword = document.forms["dsettings"]["newPassword"].value;
     var retypePassword = document.forms["dsettings"]["retypePassword"].value;


        if (document.forms["dsettings"]["oldPassword"].value == null || oldPassword == "") {
        alert("Enter old password");
        return false;
    }

    else if (document.forms["dsettings"]["newPassword"].value == null || newPassword == "") {
        alert("Enter new password");
        return false;
    }

    else if (document.forms["dsettings"]["retypePassword"].value == null || retypePassword == "") {
        alert("Retype new password");
        return false;
    }

    else if ( newPassword != retypePassword) {
        alert("Retype new password correctly");
        return false;
    }

    else
        {
            var action = $("#dsettings").attr('action');
            var form_data = {
                    oldPassword: $('#oldPassword').val(),
                    newPassword: $('#newPassword').val(),

                    is_ajax: 1
                                };

            $.ajax({
                type: "POST",
                url: action,
                data: form_data,
                success: function(response)
                {
                    if(response == "success")
                            $("#message").html('<p class="success">Successfully changed password!</p>');

                    else if(response == "wrong_old_password")
                        {   
                            $("#message").html('<p class="error">Wrong old password!type again!</p>');
                        }       
                    else
                        {   
                            $("#message").html('<div class="error">update error.Try again! !</div>');
                        }   
                }
            });

        }

}

我的HTML代码

<button type="submit" id="submit" name="submit"  onclick="return validateForm()" class="form-submit" >submit</button>

和php代码

<?php $is_ajax = $_REQUEST['is_ajax'];
// some codes ?>

Answer 1

由于这似乎是你的第一篇文章并且非常难看，你需要清理它（这也不完美！）

提供尽可能多的数据e。克

<强> HTML

<form action="fakeurl.com" method="post" name="dsettings" id="dsettings" >
   <ul>
       <li>Old Password: <input type="password" name="oldPassword" /></li>
       <li>New Password: <input type="password" name="newPassword" /></li>
       <li>Retype New Password: <input type="password" name="retypePassword" /></li>
       <li><input type="submit" name="submit" value="Change Password" /></li>
       <li><div id="message"/></li>
    </ul>
</form>

<强>的Javascript

$(document).ready(function(){
    $('#dsettings').on('submit',function(event){
        changePassword(this)
        event.preventDefault();
    });
});
function validateChangePassword(frm){
    var oldPassword=frm["oldPassword"].value
    var newPassword=frm["newPassword"].value
    var retypePassword =frm["retypePassword"].value;

    if (oldPassword.trim()=="") {
        $('#message').html("<p class='error'>Enter old password</p>");
        return false;
    }
    else if (newPassword.trim()=='') {
        $('#message').html("<p class='error'>Enter new password</p>");
        return false;
    }
    else if (retypePassword.trim() == "") {
        $('#message').html("<p class='error'>Retype new password</p>");
        return false;
    }
    else if ( newPassword != retypePassword) {
        $('#message').html("<p class='error'>Retype new password correctly</p>");
        return false;
    }
    else
        return true;
}   


function changePassword(frm){
  if(validateChangePassword(frm)){
    var url = $(frm).attr('action');
    var data = {
            oldPassword: $(frm).find('input[name="oldPassword"]').val(),
            newPassword: $(frm).find('input[name="newPassword"]').val(),
            retypePassword: $(frm).find('input[name="retypePassword"]').val(),
            is_ajax: 1
           };
    ajaxPost(url,data);
  }
  return false;
}

function ajaxPost(post_url,post_data){
    $.ajax({
        type: "POST",
        url: post_url,
        data: post_data,
        success: function(response)
        {
            if(response == "success")
                    $("#message")
                    .html('<p class="success">Successfully changed password!</p>');
            else if(response == "wrong_old_password")
                {   
                    $("#message")
                    .html('<p class="error">Wrong old password!type again!</p>');
                }       
            else
                {   
                    $("#message")
                    .html('<div class="error">update error.Try again! !</div>');
                }   
        }
    });
}

DEMO

可能出现的问题

避免使用自定义js和jquery mix 我怀疑你为元素提供了任何id，例如$（＆＃39;＃oldPassword＆＃39;）。val（）
表格validation有一个很好的插件，使用一个

Answer 2

尝试使用参数：

更改函数调用的代码

function validateForm(e) { e.preventDefault();

在这里：

<button type="submit" id="submit" name="submit" onclick="validateForm(this); return false;" class="form-submit" >submit</button>

Answer 3

在 validateForm 函数调用之前包含jquery-1.4.3.min.js文件。

<input type="button" name="submit" value="Change Password" onclick="validateForm()" />

Answer 4

根据你在评论中给出的答案，几乎可以肯定的是：

您没有阻止默认提交行为，因此正在进行默认提交行为
您的代码中某处出现错误导致validateForm()功能失败，$.ajax永不运行

要解决此问题：

将您的按钮更改为type="button"。
打开JS控制台（通常可以通过按F12并单击控制台选项卡来执行此操作）
查看控制台中是否有任何错误。

一旦弄清楚错误是什么，你应该：

停止使用onclick处理程序并且不引人注意地设置事件
使用preventDefault()来阻止默认提交事件

$(function () {
    $("#submit").click(function (e) {
        e.preventDefault();
        validateForm();
    });
});

为什么$ .ajax没有获取数据？

4 个答案: