0

我有一个默认情况下使用 php uri_request 提交的表单。现在我试图添加一个 ajax 调用来提交表单，但它仍然使用 php 提交提交表单的 ajax 调用是：

$(document).ready(function() {
    $("#contactform").submit(function(e) {
        e.preventDefault();
    });
    $.ajax({
        cache: false,
        type: 'POST',
        data: ("#contactform").serialize(),
        url: 'formfiles/submit.php',
        // for ajax the submit.php is on a             
        success: function() {
            // separate page 
            $('#contactform').fadeOut(200).submit();
            $('#success').delay(200).fadeIn(200);
        }
    });
    return false;

});

和 html 表单属性是：

<form action="#n" class="active" method="post" name="contactform" id="contactform">

还有

 e.preventDefault

在 ajax 调用开始时不起作用，但没有 ajax 它可以工作（只有阻止默认！）

代码有什么问题？为什么它不起作用？

提前感谢您的帮助

编辑 这里是 html {在一个包含文件中（洞网站是一个 php 动态结构）}

<form action="#n" class="active" method="post" name="contactform" id="contactform">

<div class="column">
    <div class="obb" style="<?php echo $color[11];?>">
                    All fields are mandatory
                    </div>
      <div >
<label style="<?php echo $color[0]; ?>"> Name:</label>
    <input class="con_campo required" name="name" value="" id="name" type="text" />

        </div>
        <div >
          <label style=""><?php echo $color[8]; ?>&nbsp;</label>                                                    

  </div>
<div class="fieldcontent prod" id="pr">
                   <label style="">&nbsp;<?php echo $color[2]; ?></label>
<select name="prod" value="" id="products" class="selectx required">
  <option  value=""> -- Select -- </option>
  <option value="1"> ITA</option>
 <option value="2">DE</option>
 <option value="3"> FR</option>
 <option value="4">EN</option>

  </select>

                </div>
            <div class="fieldcontent prod" id="in">
                <label style="<?php echo $color[4]; ?>"> Address:</label>
<input name="address" value="" id="address" class="required" type="text"     />

                        </div>
                         <div class="fieldcontent prod" id="ci">
                        <label style="<?php echo $color[6]; ?>"> City:</label>
   <input name="city" value="" id="city" class="con_campo required" type="text" />

                       </div>
                        <div class="fieldcontent info help" id="me" >
                          <label style="<?php echo $color[10]; ?>">Message:</label>
<textarea id="message" name="message" value="" class="cs_comment required" ></textarea>

                        </div>
                        <div id="code" style="margin-bottom:25px;">
     <label style="<?php echo $color[11]; ?>; width:340px;"></label> 
<input type="text" name="code" class="chapta" size="10" maxlength="7" id="code"/>

                        </div>
            </div>
<div class="column" >
                 <div class="obb">&nbsp;</div>
<div class="fieldcontent prod" id="co">
    <label style="<?php echo $color[1]; ?>">Surname:</label>
<input name="surname" value="" id="surname" class=" required" type="text"/>

            </div>
            <div >
<label style="<?php echo $color[9]; ?>">Email: </label>
<input name="email" value="" id="email" class=" required email" type="text" />

</div>
 <div class="fieldcontent help prod" id="do">
<label style="<?php echo $color[3]; ?>">Domain:</label>
            <span style="font-size:20px; margin-left:30px;"> http://</span>
<input name="domain"  id="domain" class=" required" type="text" value="" />

            </div>
                        <div class="fieldcontent prod" id="re">
    <label style="<?php echo $color[5]; ?>">Region:</label>
   <input name="region" value="" id="region" class=" required" type="text" />

                        </div>
               <div class="fieldcontent prod" id="pa">
<label style="<?php echo $color[7]; ?>" >State:</label>
<input name="state" value="" id="state" class="con_campo required" type="text" />

                        </div>
                    </div>

                  <div>
        <div class="bottom">

<input type="submit" id="submitButton" name="submit" value="submit" />
                        &nbsp;<br /><br /><br />&nbsp;

        </div>
                </form>
 </div></div>

<script> 
$(document).ready(function() {
$("#contactform").submit(function(e){
    $.ajax({
        cache: false,
        type: 'POST',
        data: $("#contactform").serialize(),
        url : 'formfiles/submit.php',   // for ajax the submit.php is on a             
        success: function() {            // separate page 
            $('#contactform').fadeOut(200).submit();
            $('#success').delay(200).fadeIn(200);
        }
    }); 
  });
 });

4

2 回答 2

0

您在行中的 ajax 调用中有错误data: ("#contactform").serialize()。它应该是 data: $("#contactform").serialize()

尝试这个 ：

$(document).ready(function() {
    $("#contactform").submit(function(e){
        $.ajax({
            cache: false,
            type: 'POST',
            data: $("#contactform").serialize(),
            url : 'formfiles/submit.php',   // for ajax the submit.php is on a             
            success: function() {            // separate page 
                $('#contactform').fadeOut(200).submit();
                $('#success').delay(200).fadeIn(200);
            },
            error: function(error_response){
               console.log(error_response);
            }
        }); 
    });
});

更新 ：

我发现您的代码存在一些问题。

  1. 是否加载了所需的 jQuery 库？我在您粘贴的 html 中没有看到。希望您已将其包含在标题中。
  2. 添加一个e.preventDefault ();以防止表单的默认操作，因为输入类型是submit. 如果您不输入该表单，则默认方法将提交该表单。

  3. 我没有看到script标签关闭。您应该关闭script标签，否则它将不起作用。请参阅下面的更新代码：

    <script type="text/javascript">
   $(document).ready(function() {
    $("#contactform").submit(function(e){
        e.preventDefault();
        $.ajax({
            cache: false,
            type: 'POST',
            data: $("#contactform").serialize(),
            url : 'formfiles/submit.php',   // for ajax the submit.php is on a             
            success: function() {            // separate page 
                $('#contactform').fadeOut(200).submit();
                $('#success').delay(200).fadeIn(200);
            }
        }); 
    });
   });
</script>

新更新

在这里，您的 ajax 调用不返回任何数据。所以服务器不会知道调用是否成功，它会一直转到成功函数。所以你必须检查响应是否成功。从 PHP 页面返回一些字符串，success以显示验证或表单提交及其处理是否成功，否则返回错误。同样在成功回调时，您再次提交表单，因此这将继续作为一个永无止境的循环。

请进行以下更改：

<script type="text/javascript">
   $(document).ready(function() {
    $("#contactform").submit(function(e){
        e.preventDefault();
        $.ajax({
            cache: false,
            type: 'POST',
            data: $("#contactform").serialize(),
            url : 'formfiles/submit.php',   // for ajax the submit.php is on a             
            success: function(response) {            // separate page 
                if (response == 'success') {
                  //write what you want to do on success
                    $('#success').delay(200).fadeIn(200);
                } else {
                  //show error
                }
            }
        }); 
    });
   });
</script>

希望这可以帮助

于 2013-03-25T17:32:47.983 回答
0

您可以重组代码以解决问题，如下所示。你不需要return false;，因为e.preventDefault();它会照顾好它。

$(document).ready(function () {

    $("#contactform").submit(function (e) {

        e.preventDefault();

        $.ajax({
            cache: false,
            type: 'POST',
            data: $("#contactform").serialize(), //note that $ mark is added
            url: 'formfiles/submit.php', // for ajax the submit.php is on a             
            success: function () { // separate page 
                $('#contactform').fadeOut(200).submit();
                $('#success').delay(200).fadeIn(200);
            }
        });

    });


});
于 2013-03-25T17:31:49.063 回答