表单提交Javascript PHP无效,请帮忙吗?

时间:2013-09-12 10:06:01

标签: javascript php jquery forms

我很难让我的表单上班。

任何人都可以看看这个并告诉我为什么在现场环境中尝试时没有任何反应?我设法使用表单标签中的“action”提交表单,同时放弃javascript,PHP返回错误和成功,具体取决于我是否填写了所有字段并且电子邮件已成功收到。

但是我想使用javascript方法,以便我可以阻止页面重新加载并使用警报消息,因为此表单将在打包的移动应用程序中使用。

非常感谢任何帮助。

    <form  method="post" name="form1" id="form1">
      <label for="textfield">Text Field:</label>
      <input name="FirstName" type="text" id="FirstName">
      <label for="textfield2">Text Field:</label>
      <input name="LastName" type="text"  id="LastName">
      <label for="textfield3">Text Field:</label>
      <input name="Email" t ype="text"id="Email">
      <label for="textfield4">Text Field:</label>
      <input name="MessageText" type="text"  id="MessageText">

    <input type="button" onclick="submit()" value="submit contact"/>
   </form>

    <script>
    $(document).ready(function(){
      event.preventDefault();
      $("form").submit(function(){
        $.post('http://************/requestform.php', {



        FirstName: $('#FirstName_input').val(),
        LastName: $('#LastName_input').val(),
        Email: $('#Email_input').val(),
        MessageText: $('#MessageText_input').val()



        }, function (html) {

            var response=html;


             if (response=="success") {
               alert("Message sent!"); 
            } else {


               alert("Sorry please fill all fields!"); 
            return false;
        }
       });

      });
    });

和PHP部分

    <?php


     $FirstName=$_POST["FirstName"];
     $LastName=$_POST["LastName"];
     $Email=$_POST["Email"];
     $MessageText=$_POST["MessageText"];
     $Headers = "From:" . $Email;


     if(
     $FirstName=="" ||
     $LastName=="" ||
     $Email=="" ||
     $MessageText==""
     ) {
         echo "Error";
     } else {
         mail("*******@gmail.com","mobile app message",$MessageText, $Headers);
         echo "success";
     }
 ?>

2 个答案:

答案 0 :(得分:2)

请勿使用$_GET来访问变量。

使用$_POST

所以改变:

$FirstName=$_GET["FirstName"];
$LastName=$_GET["LastName"];
$Email=$_GET["Email"];

为:

$FirstName=$_POST["FirstName"];
$LastName=$_POST["LastName"];
$Email=$_POST["Email"];

<强>更新

变化:

    FirstName: $('#FirstName_input').val(),
    LastName: $('#LastName_input').val(),
    Email: $('#Email_input').val(),
    MessageText: $('#MessageText_input').val()

要:

    FirstName: $('#FirstName').val(),
    LastName: $('#LastName').val(),
    Email: $('#Email').val(),
    MessageText: $('#MessageText').val()

为什么要将_input添加到输入ID?

更新2

编辑HTML:

<input type="button" onclick="submit()" value="submit contact"/>

<input type="button" onclick="sendForm()" value="submit contact"/>

使用Javascript:

function sendForm() {
    $.post('http://************/requestform.php', {

    FirstName: $('#FirstName').val(),
    LastName: $('#LastName').val(),
    Email: $('#Email').val(),
    MessageText: $('#MessageText').val()

    }, function (html) {
         var response=html;

         if (response=="success") {
           alert("Message sent!"); 
         } else {
           alert("Sorry please fill all fields!");
         }
   });

}

同时查看更改
$("form").submit(function(){
$("form1").submit(function(){
因为表单ID为#form1

答案 1 :(得分:0)

当用户点击按钮时,您必须进行ajax调用。为此,请为您的按钮指定一个单击处理程序。

试试这个:

<form  method="post" name="form1" id="form1">
    <label for="textfield">Text Field:</label>
    <input name="FirstName" type="text" id="FirstName">
    <label for="textfield2">Text Field:</label>
    <input name="LastName" type="text"  id="LastName">
    <label for="textfield3">Text Field:</label>
    <input name="Email" type="text"id="Email">
    <label for="textfield4">Text Field:</label>
    <input name="MessageText" type="text"  id="MessageText">

    <input type="button" id="submitContactBtn" value="submit contact"/>
</form>

<script type="text/javascript">

    $(document).ready(function(){

        // we will perform an AJAX call when user clicks the button
        $('#submitContactBtn').click(function(){

            $.post('http://************/requestform.php', {

            FirstName: $('#FirstName').val(),
            LastName: $('#LastName').val(),
            Email: $('#Email').val(),
            MessageText: $('#MessageText').val()        

            }, function(response){

                var result = responce.replace(/\s/g, ''); // clear all whitespaces, just in case

                if( result == 'success' ){
                    alert("Message sent!"); 
                } else {
                    alert("Sorry please fill all fields!"); 
                }

            });     

        });

    });

</script>

请注意,我已在您的按钮中添加了ID:

<input type="button" id="submitContactBtn" value="submit contact"/>