请解决我的AJAX脚本中的联系表格问题

新别

我正在尝试实现一些AJAX脚本,通过该脚本我的“联系我们”表单无需刷新页面即可提交

我已经尝试了很多,因为我不知道我的AJAX代码中的错误在哪里。

这是我的index.php文件

<div id="response_result">
</div>

<form class="contact-form" method="POST" action="" onsubmit="return foo();" name="form" id="form_id">
            <input type="text" name="contact_name" id="contact_name_id" />
            <input type="text" name="contact_email" id="contact_email_id" />
            <input type="text" id="contact_phone_id" name="contact_phone" />
            <input type="text" id="contact_company_name_id" name="contact_company_name"/>
            <input type="text" name="contact_subject" id="contact_subject_id"/> 
            <textarea name="contact_message" id="contact_message_id"></textarea>
            <input type="submit" name="contact_submit" value="Submit Message" id="contact_submit_id" /> 
</form>

这是我针对该文件的PHP代码

<?php
if(isset($_POST['contact_submit']))
{
    $contact_name = $_POST['contact_name'];
    $contact_email = $_POST['contact_email'];
    $contact_phone = $_POST['contact_phone'];

    $contact_company_name = $_POST['contact_company_name'];

    $contact_subject = $_POST['contact_subject'];
    $contact_message = $_POST['contact_message'];

    if ((strlen($contact_message) < 5) OR (strlen($contact_message) > 500))
    {
        ?>
        <script>
        alert('Your Message Should contains Characters between 5 to 500 ..... !!');
        </script>
        <?php
        return false;
    }

    else if(($contact_name == "") OR ($contact_email == "") OR ($contact_phone == "") OR ($contact_company_name == "") OR ($contact_subject == "") OR ($contact_message == ""))
    {
        ?>
        <script>
        alert('Please Supply Each Field .... !!');
        </script>
        <?php
    }

    else if($Object->save_contact_us_form_data($contact_name, $contact_email,$contact_phone, $contact_company_name, $contact_subject, $contact_message, $contact_date))
    {
        ?>
        <script>
        alert('Data Submitted Successfully .... !!\nWe will get Back You Soon .... !!');
        </script>
        <?php
        return true;
    }

    else
    {
        ?>
        <script>
        alert('An Error Occured While Submitting Data .... !!');
        </script>
        <?php
        return false;
    }
}
?>

我的PHP代码运行完美。

这是我的AJAX代码(无效)

<script>
   function foo()
   {
      var contact_name1 = document.getElementById( "contact_name_id" ).value;
      var contact_email1 = document.getElementById( "contact_email_id" ).value;
      var contact_phone1 = document.getElementById( "contact_phone_id" ).value;
      var contact_company_name1 = document.getElementById( "contact_company_name_id" ).value;
      var contact_subject1 = document.getElementById( "contact_subject_id" ).value;
      var contact_message1 = document.getElementById( "contact_message_id" ).value;
      $.ajax({
         type: 'post',
         url: 'Contact_Us.php',
         data: {
            contact_name:contact_name1,
            contact_email:contact_email1,
            contact_phone:contact_phone1,
            contact_company_name:contact_company_name1,
            contact_subject:contact_subject1,
            contact_message:contact_message1
         },
         success: function (response) {
            document.getElementById( "response_result" ).innerHTML = response;
         }
      });
   }
</script>
塔米利汗

使用AJAX提交表单时,请确保使用取消默认的表单提交逻辑preventDefault因此,您的代码应更改为:

<form class="contact-form" method="POST" action="" name="form" id="form_id">
            <input type="text" name="contact_name" id="contact_name_id" />
            <input type="text" name="contact_email" id="contact_email_id" />
            <input type="text" id="contact_phone_id" name="contact_phone" />
            <input type="text" id="contact_company_name_id" name="contact_company_name"/>
            <input type="text" name="contact_subject" id="contact_subject_id"/> 
            <textarea name="contact_message" id="contact_message_id"></textarea>
            <input type="submit" name="contact_submit" value="Submit Message" id="contact_submit_id" /> 
</form>

<script>
   $("#form_id").on("submit", function(e)   {
        e.preventDefault();
      var contact_name1 = document.getElementById( "contact_name_id" ).value;
      var contact_email1 = document.getElementById( "contact_email_id" ).value;
      var contact_phone1 = document.getElementById( "contact_phone_id" ).value;
      var contact_company_name1 = document.getElementById( "contact_company_name_id" ).value;
      var contact_subject1 = document.getElementById( "contact_subject_id" ).value;
      var contact_message1 = document.getElementById( "contact_message_id" ).value;
      $.ajax({
         type: 'post',
         url: 'Contact_Us.php',
         dataType: 'json',
         data: {
            contact_name:contact_name1,
            contact_email:contact_email1,
            contact_phone:contact_phone1,
            contact_company_name:contact_company_name1,
            contact_subject:contact_subject1,
            contact_message:contact_message1,
            contact_submit:"Submitted"
         },
         success: function (response) {
            document.getElementById( "response_result" ).innerHTML = response;
         }
      });
   });
</script>

我已添加dataType以JSON作为结果。因此,让您PHP发送JSON。注意: Javascript警报不适用于AJAX)。因此,您的PHP代码为:

<?php

$err = [];

if(isset($_POST['contact_submit']))
{
    $contact_name = $_POST['contact_name'];
    $contact_email = $_POST['contact_email'];
    $contact_phone = $_POST['contact_phone'];

    $contact_company_name = $_POST['contact_company_name'];

    $contact_subject = $_POST['contact_subject'];
    $contact_message = $_POST['contact_message'];

    if ((strlen($contact_message) < 5) OR (strlen($contact_message) > 500))
    {
        $err[] = 'Your Message Should contains Characters between 5 to 500 ..... !!';
    }

    else if(($contact_name == "") OR ($contact_email == "") OR ($contact_phone == "") OR ($contact_company_name == "") OR ($contact_subject == "") OR ($contact_message == ""))
    {
        $err[] = "Please Supply Each Field .... !!";
    }

    else if($Object->save_contact_us_form_data($contact_name, $contact_email,$contact_phone, $contact_company_name, $contact_subject, $contact_message, $contact_date))
    {
        $err[] = 'Data Submitted Successfully .... !!\nWe will get Back You Soon .... !!';
    }

    else
    {
        $err[] = 'An Error Occured While Submitting Data .... !!';
    }

    echo json_encode($err);
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

请帮我解决包装破损的问题

请帮我解决循环问题

我的脚本有问题。请帮忙

请协助解决Google表格ImportXML函数的XPath问题

如何解决“ MIME类型不匹配错误”,该问题阻止了我的Google Apps脚本中AJAX请求的资源?

联系表格验证问题

联系表格宽度问题

请帮我解决python中带有“and”的if语句中的问题

Haskell 中的错误。请指导我如何解决这个问题

请解决这个问题

简单的shell脚本问题。请给我建议

Google表格:色标条件格式适用于C列,但不适用于B列。请帮我解决这个问题吗?

引导模式联系表格问题

PHP联系表格的配置问题

HTML / PHP联系表格问题

请找到此问题的解决方案。(在PL SQL中)--------

Kable 在 R 中强制我的表格高于我的文本,我该如何解决这个问题?

如何解决awk脚本中的问题?

请找到此查询的解决方案我该如何解决这个问题

联系表格7不在我的wordpress网站中吗?但是在空白页上工作,我的代码有些问题

请帮助我解决 Flutter 中的依赖问题。说构建失败是因为与 Apple Watch 相关,但我没有使用 Apple Watch

当我将图像插入到我的表中时。我的图像超出了列。表格的宽度超过了部分。我该如何解决这个问题

在联系表格中捕获异常

联系表格中的PHP错误?

当我从Wordpress发送AJAX联系表格时,电子邮件数据为空

联系表格 7 提交按钮的问题

联系表格电子邮件字段问题

我的联系表有问题

我无法构建我的项目。我不知道如何解决这个问题。请帮我