Question

我创建了一个表单并尝试使用jquery ajax插入数据。但是，当我单击提交按钮时，我调用了一个jquery按钮事件，而不是我的表单正在刷新..

HTML表格

<form id="pcpform" name="pcpform" method="post" action="" >
          <table width="389" border="0">
            <tr>
              <td>Contact Number :</td>
              <td><input type="text" name="pcpmnum" id="pcpmnum" class="text" /></td>
            </tr>
            <tr>
              <td>First Name :</td>
              <td><input type="text" name="pcpfname" id="pcpfname" class="text" /></td>
            </tr>
            <tr>
              <td>Middle Name :</td>
              <td><input type="text" name="pcpmname" class="text" /></td>
            </tr>
            <tr>
              <td>Last Name :</td>
              <td><input type="text" name="pcplname" class="text" /></td>
            </tr>
            <tr>
              <td>Email :</td>
              <td><input type="text" name="pcpemail" class="text" id="pcpemail" /></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td><input type="submit" name="pcpsubmit" id="pcpsubmit" value="Submit"  />
                <input type="reset" name="Cancel" id="clear" value="Clear" /></td>
            </tr>
          </table>
        </form>

Jquery按钮单击偶数

$('#pcpsubmit').click(function(){
alert("HIiiiiii 1");
var pcpmnum = $("#pcpmnum").val();

var pcpfname = $('input[name="pcpfname"]').val();
var pcpmname = $('input[name="pcpmname"]').val();
var pcplname = $('input[name="pcplname"]').val();
var pcpemail = $('input[name="pcpemail"]').val();
    alert("HIiiiiii 2");
if(pcpmnum === "" | pcpmnum === null)
    { 
        $('#childpcpmsg').html('Please enter contact number.');
        //alert("Please Enter Mobile Number");
        return false;
    }
if(pcpfname === "" | pcpfname === null)
    { 
        $('#childpcpmsg').html('Please enter First Name.');
        //alert("Please Enter Mobile Number");
        return false;
    }
if(pcplname === "" | pcplname === null)
    { 
        $('#childpcpmsg').html('Please enter Last Name.');
        //alert("Please Enter Mobile Number");
        return false;
    }
if(pcpemail === "" | pcpemail === null)
    { 
        $('#childpcpmsg').html('Please enter Email.');
        //alert("Please Enter Mobile Number");
        return false;
    }
alert("HIiii 3");
$.post("addpcp.php", {cntctnumber: pcpmnum, firstname: pcpfname, middlename: pcpmname, lastname: pcplname, email: pcpemail}, function(data){
        alert("Success");
        });
});

我的问题首先是没有调用函数，我的表单很新鲜。其次，在修改代码之前我遇到了问题，我的数据没有发送到相关文件。

Answer 1

您的代码中存在一些问题，您没有使用正确的id，没有使用$(document).ready()，没有使用preventDefault()等。我已经为您修复了代码，这里是一个工作演示http://jsfiddle.net/m9psk/（Ajax在这里不能正常工作，因为这里不存在addpcp.php，但它正在发送请求）

这是JS

$(document).ready(function(){
$('#pcpform').submit(function(e){
    e.preventDefault();
    alert("HIiiiiii 1");
    var pcpmnum = $("#pcpmnum").val();

    var pcpfname = $('input[name="pcpfname"]').val();
    var pcpmname = $('input[name="pcpmname"]').val();
    var pcplname = $('input[name="pcplname"]').val();
    var pcpemail = $('input[name="pcpemail"]').val();
        alert("HIiiiiii 2");
    if(pcpmnum === "" | pcpmnum === null)
        { 
            $('#childpcpmsg').html('Please enter contact number.');
            //alert("Please Enter Mobile Number");
            return false;
        }
    if(pcpfname === "" | pcpfname === null)
        { 
            $('#childpcpmsg').html('Please enter First Name.');
            //alert("Please Enter Mobile Number");
            return false;
        }
    if(pcplname === "" | pcplname === null)
        { 
            $('#childpcpmsg').html('Please enter Last Name.');
            //alert("Please Enter Mobile Number");
            return false;
        }
    if(pcpemail === "" | pcpemail === null)
        { 
            $('#childpcpmsg').html('Please enter Email.');
            //alert("Please Enter Mobile Number");
            return false;
        }
    alert("HIiii 3");
    $.post("addpcp.php", {cntctnumber: pcpmnum, firstname: pcpfname, middlename: pcpmname, lastname: pcplname, email: pcpemail}, function(data){
            alert("Success");
            });
});
});

我在Markup中添加了一个div来显示消息

<div id="childpcpmsg"></div>
<form id="pcpform" name="pcpform" method="post" action="" >
          <table width="389" border="0">
            <tr>
              <td>Contact Number :</td>
              <td><input type="text" name="pcpmnum" id="pcpmnum" class="text" /></td>
            </tr>
            <tr>
              <td>First Name :</td>
              <td><input type="text" name="pcpfname" id="pcpfname" class="text" /></td>
            </tr>
            <tr>
              <td>Middle Name :</td>
              <td><input type="text" name="pcpmname" class="text" /></td>
            </tr>
            <tr>
              <td>Last Name :</td>
              <td><input type="text" name="pcplname" class="text" /></td>
            </tr>
            <tr>
              <td>Email :</td>
              <td><input type="text" name="pcpemail" class="text" id="pcpemail" /></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td><input type="submit" name="pcpsubmit" id="pcpsubmit" value="Submit"  />
                <input type="reset" name="Cancel" id="clear" value="Clear" /></td>
            </tr>
          </table>
        </form>

Answer 2

首先，您要绑定到提交而不是单击

所以代替：

$('#pcpsubmit').click(function(){

使用：

$('#pcpform').submit(function(){

对于需要添加的刷新：

return false;

到结束前的函数的最后一行}所以：

$.post("addpcp.php", {cntctnumber: pcpmnum, firstname: pcpfname, middlename: pcpmname, lastname: pcplname, email: pcpemail}, function(data){
    alert("Success");
    });
    return false;
});

Answer 3

关于第一期，请查看.submit() function

$('#pcpform').submit(function(){ [...] }

表格在AJAX中令人耳目一新

3 个答案: