facebox上的Ajax

时间:2018-03-24 09:32:40

标签: ajax facebox

我有一个来自facebox模式(http://defunkt.io/facebox/),它有一个ID,我在调用表单的选择器/ ID时遇到问题。

以下是代码

=== index.php ===

<!DOCTYPE html>
<html>
      <head>
            <script src="jquery.js" type="text/javascript"></script>
            <link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
            <script src="/facebox/facebox.js" type="text/javascript"></script>
            $(document).ready(function() {
                  $('a[rel*=facebox]').facebox({
                        loadingImage : 'loading.gif',
                        closeImage   : 'closelabel.png'
                  });
                  $('#myform').submit(function(event) {
                        $.ajax({
                              type  : 'POST',
                              url   : 'process.php';
                              data  : {'name' : $('input[name=name]').val(),'email' : $('input[name=email]').val()},
                              success:function() {
                                   alert('success!');
                              },
                        });
                        event.preventDefault();
                  });
            }); 
      </head>
      <body>
            <a href="showform.php" rel="facebox">Show Form</a>
      </body>
</html>

==== showform.php ====

<form action="process.php" id="myform" method="post" accept-charset="utf-8">
<input type="text" name="name" placeholder="Your Name" >
<input type="email" name="email" placeholder="Your Email" >
</form>

非常感谢任何帮助! 感谢

1 个答案:

答案 0 :(得分:0)

您尝试调用位于另一个页面中的ID,您的脚本只能与加载到页面中的DOM进行交互,您需要将您的内容移至index.php,它也应该是{{ 1}},而不是url:'process.php',,还有一件事,你没有提交,这是一个有效的例子

&#13;
&#13;
url   : 'process.php';
&#13;
$('#myform').submit(function(event) {
        console.log("form submited")
                        $.ajax({
                              type  : 'POST',
                              url   : 'process.php',
                              data  : {'name' : $('input[name=name]').val(),
                                       'email' : $('input[name=email]').val()
                                       },
                              success:function() {
                                   alert('success!');
                              },
                        });
                        event.preventDefault();
                  });
&#13;
&#13;
&#13;