具有可变表单位置的Ajax URL

时间:2015-08-23 01:09:05

标签: javascript php jquery ajax forms

我确信这个头衔会被SO纳兹所玷污。 。主持人。但我不知道该命名它。

我有一个表单,我已经保存在它自己的php文件中。我将此表单包含在网站每页的底部。这是表单文件。

这应该是显示我的问题所需的最少代码。

<?php
error_reporting(E_ALL);
//Declare variables, strip html, and php tags and then assign value from POST
if(isset($_POST['submit'])){

  $name  = strip_tags($_POST['name']);
  $phone = strip_tags($_POST['phone']);
  $email = strip_tags($_POST['email']);

  $errors = array();

//Validate input
  //Name
  if(!empty($name)) {
     //Check to see that $name only contains valid characters
     if(!preg_match("/^[a-zA-Z'-]+$/", $name)) { $errors[] = "Names may only contain letters and spaces."; } 
  }else{
     $errors[] = "Name field must be filled out.";
  }
  //End Name

  //Phone
  if(!empty($phone)) {

  }else{
     $errors[] = "Phone field must be filled out.";
  }
  //End Phone

  //Email
  if(!empty($email)) {
     if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { $errors[] = "Invalid email format."; }
  }else{
     $errors[] = "Email field must be filled out.";
  }
  //End Email       

    echo json_encode($errors);

}
 ?>

<!-- Action Form -->
<section id="sectActionForm">
<div class="row">

    <div class="col1 col-md-6">
        <img class="noPad" src="/images/banners/karateka.jpg">
    </div>

    <div id="col2" class="col-md-6 col-xs-12">

            <form id="actionForm" class="" role="form" action="index.php" method="POST">
                <h3>Get your FREE class today!</h3>

                <input id="name" class="form-control" type="text" placeholder="Name" /><br/>

                <input id="phone" class="form-control" type="text" placeholder="Phone" /><br/>

                <input id="email" class="form-control" type="text" placeholder="Email" />

                <input class="btn btn-lg btn-block" type="submit" value="Send" />
            </form>

    </div>

</div>
</section>

<script type="text/javascript">
$(document).ready(function(){
    $.ajax({
        type: "POST",
        url: "action.include.php",
        dataType: "json",
        success: function(data){
            alert(data);
        }
    })
});
</script>

<!-- END Action Form -->

我的问题是,由于可以从任何页面访问此表单,我不知道在AJAX网址部分放置什么。

我希望的行为:我希望将php errors数组传递给ajax,以便它可以显示在模态错误框中。

3 个答案:

答案 0 :(得分:1)

不确定我是否遗漏了某些内容,但您确实只是将文件的路径作为网址。因此,如果表单php文件的名称是myForm.php,则ajax url将是myForm.php

答案 1 :(得分:1)

试试这个...

<?php
error_reporting(E_ALL);
//Declare variables, strip html, and php tags and then assign value from POST
if(isset($_POST['submit'])){

  $name  = strip_tags($_POST['name']);
  $phone = strip_tags($_POST['phone']);
  $email = strip_tags($_POST['email']);

  $errors = array();

//Validate input
  //Name
  if(!empty($name)) {
     //Check to see that $name only contains valid characters
     if(!preg_match("/^[a-zA-Z'-]+$/", $name)) { $errors[] = "Names may only contain letters and spaces."; } 
  }else{
     $errors[] = "Name field must be filled out.";
  }
  //End Name

  //Phone
  if(!empty($phone)) {

  }else{
     $errors[] = "Phone field must be filled out.";
  }
  //End Phone

  //Email
  if(!empty($email)) {
     if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { $errors[] = "Invalid email format."; }
  }else{
     $errors[] = "Email field must be filled out.";
  }
  //End Email       

    exit(json_encode($errors)); // exit so it doesn't send the form below

}
 ?>

<!-- Action Form -->
<section id="sectActionForm">
<div class="row">

    <div class="col1 col-md-6">
        <img class="noPad" src="/images/banners/karateka.jpg">
    </div>

    <div id="col2" class="col-md-6 col-xs-12">

            <form id="actionForm" class="" role="form" action="index.php" method="POST">
                <h3>Get your FREE class today!</h3>

                <input id="name" class="form-control" type="text" placeholder="Name" /><br/>

                <input id="phone" class="form-control" type="text" placeholder="Phone" /><br/>

                <input id="email" class="form-control" type="text" placeholder="Email" />

                <input class="btn btn-lg btn-block" type="submit" value="Send" />
            </form>

    </div>

</div>
</section>

<script type="text/javascript">
$("#actionForm").on('submit', function(event){
    event.preventDefault(); // so it doesnt reload the page
    $.ajax({
        type: "POST",
        url: "<?php echo $_SERVER['PHP_SELF'] ?>",
        dataType: "json",
        success: function(data){
            alert(data);
        }
    });
});
</script>

<!-- END Action Form -->

答案 2 :(得分:0)

&#39;姓名在哪里?属性?我所看到的只是&#39; id&#39;和$ _POST提交名称和值。这段代码有用吗?我错过了什么?

修改 将此行代码放在<form><h4 id="errors" class="error"><?php if(isset($errors) && count($errors)) echo($errors);?></h4>正上方。添加一个名为&#39;错误&#39;并按照您想要的方式设计风格。您可能希望在每条错误消息的末尾添加<br>标记。或者使用explode命令而不是添加<br>标记和echo命令。