Reputation:

Ajax URL with variable form location

I'm sure the title will get my scoulded by the SO naz. . moderators. But I wasn't sure what to name it.

I have a form that I have saved in it's own php file. I include this form on the bottom of each page on the website. This is the form file.

This should be the minimum needed code to show my issue.

<?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 -->

My problem is that since this form could be being accessed from any page, I don't know what to put in the AJAX url section.

My DESIRED BEHAVIOR: I would like for the php errors array to be passed to the ajax so it can be displayed in a modal error box.

Upvotes: 4

Answers (3)

CharlesEF

Reputation: 628

Where are the 'name' attributes? All I see is 'id' and $_POST submits the name and value. Did this code ever work? What am I missing?

EDIT: Place this line of code right above your <form>: <h4 id="errors" class="error"><?php if(isset($errors) && count($errors)) echo($errors);?></h4>. Add a class called 'error' and style it the way you want. You might want to add a <br> tag to the end of each error message. Or use the explode command instead of adding the <br> tag and the echo command.

Upvotes: 0

Zerquix18

Reputation: 769

Try with this...

<?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 -->

Upvotes: 1

Geoherna

Reputation: 3534

not sure if i'm missing something, but you would literally just put the path of the file as the url. So if the name of the form php file is myForm.php, the ajax url would be myForm.php

Upvotes: 1

Ajax URL with variable form location

Answers (3)

Related Questions