AJAX表单提交使用PHP [英] ajax form submission with php

查看：96
本文介绍了AJAX表单提交使用PHP的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有麻烦的电子邮件发送我确信这是因为PHP的，但这里是JS AJAX also..it显示了表单字段不正确填写我的错误消息，然后它表明我进度条提交一次，但我得到submission..any帮助后，我的错误信息将AP preciated。

HTML 

 ＆LT;形式方法=邮报行动=feedback.phpID =联系形式＆GT;
            ＆LT;字段集类=第一＆GT;


            ＆LT; D​​IV ID =响应＆GT;＆LT; / DIV＆GT;


            ＆LT; D​​IV ID =name_input＆GT;

            ＆LT;输入ID =名的名称=名称占位符=名称级=所需的类型=文本最大长度=128/＆GT;

            ＆LT; / DIV＆GT;



            ＆LT; D​​IV ID =email_input＆GT;

            ＆LT;输入ID =电子邮件NAME =名称占位符=电子邮件类=所需的类型=文本最大长度=128/＆GT;

            ＆LT; / DIV＆GT;



            ＆LT; D​​IV ID =budget_input＆GT;
            ＆LT;标签=预算＆GT;预算＆LT; /标签＆gt;
            ＆LT;选择一个id =mydropdown＆GT;
            ＆LT;期权价值=无​​选择=＆GT; - 选择一个 - ＆LT; /选项＆GT;
            ＆LT;期权价值=firstchoice＆GT; $ 0  -  $ 1,000 LT; /选项＆GT;
            ＆LT;期权价值=secondchoice＆GT; $ 1,000  -  $ 2,000 LT; /选项＆GT;
            ＆LT;期权价值=thirdchoice＆GT; $ 3000+＆LT; /选项＆GT;
            ＆LT; /选择＆GT;
            ＆LT; / DIV＆GT;



            ＆LT; D​​IV ID =按钮＆GT;

            ＆LT;输入类型=提交级=按钮NAME =提交值=/＆GT;
            ＆LT; / DIV＆GT;


            ＆LT; /字段集＆GT;


        ＆LT; /形式GT;

更新：

 ＆LT; PHP

$名=修剪（函数stripslashes（用htmlspecialchars（$ _ POST ['名称']）））;
$电子邮件=修剪（函数stripslashes（用htmlspecialchars（$ _ POST [电子邮件]）））;
$ mydropdown =修剪（函数stripslashes（用htmlspecialchars（$ _ POST ['mydropdown']）））;
$收件人=blake.harrison1@cox.net;
$ humancheck = $ _ POST ['humancheck'];
$蜜罐= $ _ POST ['蜜'];



    如果（$蜜罐=='的http：//'和;＆安培;空（$ humancheck））{

    //验证数据并返回成功或错误信息
    $ ERROR_MESSAGE ='';
    $ reg_exp =/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,4}$/ ;

    如果（！preg_match（$ reg_exp，$电子邮件））{

                $ ERROR_MESSAGE =＆LT; P＆gt;一种有效的电子邮件地址是必需的＆LT; / P＆gt;中。
    }
    如果（空（$名称））{

                $ ERROR_MESSAGE =＆LT; P＆GT;请提供您的姓名和LT; / P＆gt;中;
    }

    如果（空（$ mydropdown））{

                $ ERROR_MESSAGE =＆LT; P＆gt;请从列表中选择一个项目＆lt; / P＆gt;中;
    }

    如果（！空（$ ERROR_MESSAGE））{
                $返回['错误'] =真;
                $返回['味精'] =＆LT; H3＆GT;！哎呀请求成功，但是你的表单无法正确填写＆LT; / H3＆gt;中。$ ERROR_MESSAGE;
                回声json_en code（$返程）;
                出口（）;
        } 其他 {

        //发送到电子邮件


        $ Emailsubject的='前联系表;
        $站长='blake.harrison1@cox.net';

 $身体=
 ＆LT; BR＆GT;＆LT; HR＆GT;＆LT; BR＆GT;
 ＆LT;强＆GT;名称：＆LT; /杨卫国＆GT; $名称和LT; BR＆GT;
 ＆LT; BR＆GT;
 ＆LT;强＆GT;电子邮件：LT; /杨卫国＆GT; $电子邮件＆LT; BR＆GT;
 ＆LT; BR＆GT;
 ＆LT;强＆GT;预算：其中; / STRONG＆GT; $ mydropdown＆LT; BR＆GT;
 ＆LT; BR＆GT;
 ;

        $标题=从：$电子邮件\ r \ N的;
        $标题=内容类型：text / html的\ r \ N。


        //发送电子邮件并退回到用户
        如果（电子邮件（$站长，$ Emailsubject的，$机构，$头））{

            $返回['错误'] = FALSE;
            $返回['味精'] =＆LT; P＆GT;消息发送成功感谢您的关注$名字。＆LT; / P＆gt;中;
            回声json_en code（$返程）;
        }
    }
 } 其他 {

$返回['错误'] =真;
$返回['味精'] =＆LT; H3＆GT;！哎呀有一个与你提交的问题，请重试＆LT; / H3＆gt;中;
回声json_en code（$返程）;
 }

？＆GT;



$（文件）。就绪（函数（）{

$（'形式#response）隐藏（）。

$（'＃提交）。点击（函数（五）{

    // prevent形式的默认操作，直到
    //错误检查已经执行了
    即preventDefault（）;

    //抢表单字段值
    VAR有效='';
    需要=变种'是必需的。';
    变种名称= $（'＃NAME表）VAL（）。
    变种的电子邮件= $（'形式#email）VAL（）。
    。VAR mydropdown = $（'形式#mydropdown）VAL（）;
    VAR蜜罐= $（'形式#honeypot）VAL（）。
    。VAR humancheck = $（'形式#humancheck）VAL（）;


    //执行错误检查
    如果（名称==''|| name.length＆其中; = 2）{
        有效='＆LT; P＆GT;您的姓名+需要+'＆LT; / P＆GT;';
    }

    如果（！email.match（/ ^（[A-Z0-9 ._-] + @ [A-Z0-9 ._-] + \。[AZ] {2,4} $）/ I））{
        有效+ ='＆LT; P＆GT;您的email'+需要+'＆LT; / P＆GT;';
    }

    如果（mydropdown ==''）{
        有效+ ='＆其中p为H.;从所述列表中的项目+所需+'; / P＆GT;＆所述';

    }

    如果（蜜罐=HTTP：//！）{
        有效+ ='＆其中p为H.;反垃圾邮件插件不允许＆所述; / P＆GT;';
    }

    如果（humancheck！=''）{
        有效+ ='＆其中; P＆gt;一种人类用户'+所需+'＆所述; / P＆GT;';
    }


    //让用户知道是否有误差修改与窗体
    如果（有效！=''）{

        $（'形式#response'）。removeClass移除（）。addClass（错误）
            html的（'＆LT;强＆gt;请更正以下错误＆LT; / STRONG＆GT;'+有效）.fadeIn（'快'）;
    }
    //让用户知道有事情发生在幕后
    //序列化表单数据，发送给我们的AJAX功能
    其他 {

        $（'形式#response）removeClass移除（）addClass（'处理'）HTML（处理...）淡入（慢）。。

        VAR FORMDATA = $（'表'）序列化（）。
        submitForm（FORMDATA）;
    }

}）;
}）;


功能submitForm（FORMDATA）{

$阿贾克斯（{
    键入：POST，
    网址：send.php，
    数据：FORMDATA，
    数据类型：JSON，
    缓存：假的，
    超时：12000，
    成功：功能（数据）{

        。$（'形式#response）removeClass移除（）addClass（（data.error ===真）错误：成功）
                    html的（data.msg）.fadeIn（'快'）;

        如果（$（'形式#response）。hasClass（'成功'））{

            的setTimeout（$（'形式#response）淡出（'快'）。，12000）;
        }

    }，
    错误：函数（XMLHtt prequest，textStatus，errorThrown）{

        $（'形式#response'）。removeClass移除（）。addClass（错误）
                    html的（'＆LT; P＆GT;有一个＆LT;强＆GT;+ errorThrown +
                          '＆LT; / STRONG＆GT;错误原因与＆lt;强＆GT; + textStatus +
                          '＆LT; / STRONG＆GT; 。条件＆LT; / P＆GT;'）淡入（快）;
    }，
    完成：功能（XMLHtt prequest，状态）{

        $（'表'）[0] .reset段（）;
    }
}）;
};

而不是$就

解决方案

可以尝试$。员额

  $职位（URL。{argument_name：值，...}，功能（数据）{

//回调函数..

}，JSON}

I am having trouble getting the email to send which I am sure it is because of the php but here is the js ajax also..it shows my error messages for form fields that are not filled out correctly and then it shows my processing bar once submitted but I get my error message after submission..any help would be appreciated.

html

<form method="post" action="feedback.php" id="contactform">
            <fieldset class="first">


            <div id="response"></div>  


            <div id="name_input">

            <input id="name" name="name" placeholder="Name" class="required" type="text" maxlength="128" />

            </div>



            <div id="email_input">

            <input id="email" name="name" placeholder="Email"  class="required" type="text"  maxlength="128" />

            </div>



            <div id="budget_input">
            <label for="budget">Budget</label>
            <select id="mydropdown">
            <option value="none" selected=""> -- choose one --</option>
            <option value="firstchoice">$0 - $1,000</option>
            <option value="secondchoice">$1,000 - $2,000</option>
            <option value="thirdchoice">$3,000 +</option>
            </select>
            </div>



            <div id="button">

            <input type="submit" class="button" name="Submit" value="" />
            </div>


            </fieldset>


        </form>

Updated:

<?php 

$name = trim(stripslashes(htmlspecialchars($_POST['name'])));           
$email = trim(stripslashes(htmlspecialchars($_POST['email'])));
$mydropdown = trim(stripslashes(htmlspecialchars($_POST['mydropdown'])));  
$recipient = "blake.harrison1@cox.net";  
$humancheck = $_POST['humancheck'];
$honeypot = $_POST['honeypot'];



    if ($honeypot == 'http://' && empty($humancheck)) { 

    //Validate data and return success or error message
    $error_message = '';    
    $reg_exp = "/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,4}$/";

    if (!preg_match($reg_exp, $email)) {

                $error_message .= "<p>A valid email address is required.</p>";             
    }
    if (empty($name)) {

                $error_message .= "<p>Please provide your name.</p>";              
    }

    if (empty($mydropdown)) {

                $error_message .= "<p>Please select an item from the list.</p>";
    }               

    if (!empty($error_message)) {
                $return['error'] = true;
                $return['msg'] = "<h3>Oops! The request was successful but your form is not filled out correctly.</h3>".$error_message;                 
                echo json_encode($return);
                exit();
        } else {

        //send to  an email


        $emailSubject = 'Top Contact Form';
        $webMaster = 'blake.harrison1@cox.net';

 $body="
 <br><hr><br>
 <strong>Name:</stong> $name <br>
 <br>
 <strong>Email:</stong> $email <br>
 <br>
 <strong>Budget:</strong> $mydropdown <br>
 <br>
 ";      

        $headers = "From: $email\r\n";
        $headers .= "Content-type: text/html\r\n";


        //send email and return to user
        if(mail($webMaster, $emailSubject, $body, $headers)) {

            $return['error'] = false;
            $return['msg'] = "<p>Message sent successfully. Thank you for your interest " .$name .".</p>"; 
            echo json_encode($return);
        }
    }   
 } else {

$return['error'] = true;
$return['msg'] = "<h3>Oops! There was a problem with your submission. Please try again.</h3>";  
echo json_encode($return);
 }

?> 



$(document).ready(function() {

$('form #response').hide();

$('#submit').click(function(e) {

    // prevent forms default action until
    // error check has been performed
    e.preventDefault();

    // grab form field values
    var valid = '';
    var required = ' is required.';
    var name = $('form #name').val();
    var email = $('form #email').val();
    var mydropdown = $('form #mydropdown').val();
    var honeypot = $('form #honeypot').val();
    var humancheck = $('form #humancheck').val();


    // perform error checking
    if (name == '' || name.length <= 2) {
        valid = '<p>Your name' + required +'</p>';  
    }

    if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
        valid += '<p>Your email' + required +'</p>';                                                  
    }

    if (mydropdown == '') {
        valid += '<p>An item from the list' + required +'</p>';

    }

    if (honeypot != 'http://') {
        valid += '<p>Spambots are not allowed.</p>';    
    }

    if (humancheck != '') {
        valid += '<p>A human user' + required + '</p>'; 
    }


    // let the user know if there are erros with the form
    if (valid != '') {

        $('form #response').removeClass().addClass('error')
            .html('<strong>Please correct the errors below.</strong>' +valid).fadeIn('fast');           
    }
    // let the user know something is happening behind the scenes
    // serialize the form data and send to our ajax function
    else {

        $('form #response').removeClass().addClass('processing').html('Processing...').fadeIn('slow');                                      

        var formData = $('form').serialize();
        submitForm(formData);           
    }           

});
});


function submitForm(formData) {

$.ajax({    
    type: 'POST',
    url: 'send.php',        
    data: formData,
    dataType: 'json',
    cache: false,
    timeout: 12000,
    success: function(data) {           

        $('form #response').removeClass().addClass((data.error === true) ? 'error' : 'success')
                    .html(data.msg).fadeIn('fast'); 

        if ($('form #response').hasClass('success')) {

            setTimeout("$('form #response').fadeOut('fast')", 12000);
        }

    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {

        $('form #response').removeClass().addClass('error')
                    .html('<p>There was an<strong> ' + errorThrown +
                          '</strong> error due to a<strong> ' + textStatus +
                          '</strong> condition.</p>').fadeIn('fast');           
    },              
    complete: function(XMLHttpRequest, status) {            

        $('form')[0].reset();
    }
}); 
};

解决方案

can you try $.post instead of $.ajax

$.post(url, {argument_name: value, ...} , function(data){

// callback function..

}, 'json'}

这篇关于AJAX表单提交使用PHP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆