Help with frontend ajax form submission on same page

[hellomoto]

I have a single-page website with a contact form:

        <div id="wrap_form">
          <form id="inquire" action="" class="uk-form">
            <div class="uk-grid uk-grid-collapse">
              <input type="text" id="i_name" name="name" class="uk-width" placeholder="Your Name" maxlength="250" required />
              <input type="text" id="i_phone" name="phone" class="uk-width" placeholder="###-###-####" pattern="^[2-9]\d{2}-\d{3}-\d{4}$" required />
              <input type="text" id="i_email" name="email" class="uk-width" placeholder="Email" pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" maxlength="250" />
              <input type="text" id="i_zipcode" name="zipcode" class="uk-width" placeholder="Zip Code" pattern="\d{5}-?(\d{4})?" />
              <select name="scope" id="i_scope" class="uk-width" multiple required>
                <option value="" disabled>Representing...</option>
                <option value="residential">Residence</option>
                <option value="commercial">Business</option>
              </select>
              <textarea name="message" id="i_message" class="uk-width" placeholder="Message" rows="4" required></textarea>
              <input type="submit" name="submit" id="submit" class="uk-button uk-width" value="Send" />
              <!--button type="submit" name="submit" id="submit" class="uk-button uk-width">Send <i class="fa fa-send"></i></button-->
            </div>
          </form>
        </div>

Above is from contact.php template partial included in my _main.php output, which includes this script in the body closing:

$(function() {
    $('.error').hide();
    $("#inquire").submit(function(e) {
      e.preventDefault();
      // validate and process form here
      $('.error').hide();
  	  //var name = $("input[name='name']").val();
  	  var name = $("input#i_name").val();
  		if (name == "") {
        $("label#name_error").show();
        $("input[name='name']").focus();
        return false;
      }
  		//var phone = $("input[name='phone']").val();
  		var phone = $("input#i_phone").val();
  		if (phone == "") {
        $("label#phone_error").show();
        $("input[name='phone']").focus();
        //return false;
      }
  		//var email = $("input[name='email']").val();
  		var email = $("input#i_email").val();
  		//var zipcode = $("input[name='zipcode']").val();
  		var zipcode = $("input#i_zipcode").val();
  		//var scope = $("select[name='scope']").val();
  		var scope = $("select#i_scope").val();
  		if (scope == "") {
        $("label#scope_error").show();
        $("select[name='scope']").focus();
        //return false;
      }
  		//var message = $("textarea[name='message']").val();
  		var message = $("textarea#i_message").val();
  		if (phone == "") {
        $("label#message_error").show();
        $("textarea[name='message']").focus();
        //return false;
      }

      var dataString = 'name=' + name + '&phone=' + phone + '&email=' + email + 'zipcode=' + zipcode + 'scope=' + scope + 'message=' + message;

      //alert (dataString); return false;
      $.ajax({
        type: "POST",
        url: "./inquiries/",
        data: dataString,
        success: function() {
          $('#wrap_form').html("<div id='inquired'></div>");
          $('#inquired').html("<h3>Inquiry submitted!</h3>")
          .append("<p>Thanks, " + name + "! We will be in touch soon.</p>")
          .hide()
          .fadeIn(1500, function() {
            $('#inquired p').append(" <i class='fa fa-check' style='color:green'></i>");
          });
        }
      });
      //return false;

    });
  });

I tried submitting directly to a php file in templates which is forbidden so I saw that this worked for someone and no longer get an error; the form seems to submit from the frontend, however nothing results from it in the admin.

Here's my inquiries.php template file:

<?php

$mailTo = $pages->get('/contact/')->contact_email;

// sanitize form values or create empty
$data = array(
    'name' => $sanitizer->text($input->post->name),
    'phone' => $sanitizer->text($input->post->phone),
    'email' => $sanitizer->email($input->post->email),
    'zipcode' => $sanitizer->text($input->post->zipcode),
    'scope' => $sanitizer->text($input->post->scope),
    'message' => $sanitizer->textarea($input->post->message),
);

$error = '';

if($input->post->submit) {
  $up = $pages->get('/inquiries/');
  $up->title .= "+";
  $up->save();

  $msg = "Name: $data[name]\n" .
         "Phone: $data[phone]\n" .
         "Email: $data[email]\n" .
         "Zip Code: $data[zipcode]\n" .
         "Job Type: $data[scope]\n" .
         "Message: $data[message]";

  $p = new Page();
  $p->title = date('Y/m/d H:i:s');
  $p->parent = $pages->get('/inquiries/');
  $p->template = 'inquiry';
  $p->message = $msg;
  $p->save();

}

I added the inquiries title appendage bit just for testing, but it just doesn't happen. How can I make this work/better test? 

[hellomoto]

bump

[adrian]

1 hour ago, hellomoto said:

bump

Give us chance

We will need some more info.

1. Is ./inquiries/ really pointing to a PW page that has the inquiries.php template assigned to it?
2. Is that page definitely being loaded?
3. If that page is being loaded, what do you get when you dump $_POST?

 

[hellomoto]

Hi Adrian, I know sorry I'm just eager to overcome this and get it online. Yes to your first Q, I don't know about the others. It doesn't appear to be loading as I just added this 

  $up = $pages->get('/inquiries/');
  $up->title .= "-";
  $up->save();

before if($input->post->submit) {} so no matter what when I send the form Inquiries page in the admin should become "Inquiries-" and it did not. 

[hellomoto]

I also tried $up = $pages->get('name=inquiries,include=hidden');

[hellomoto]

bump bump bump it up

[tpr]

Here are a few things you could check:

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

Do you fire a submit event right on start? Is this by purpose? If not, it should be rather

$("#inquire").on('submit', function(e) {

Maybe you should change it to full url instead:

$.ajax({
        type: "POST",
        url: "./inquiries/",

Here you might save the page first, set msg and save again:

$p->save();
$p->message = $msg;
$p->save();

 

[dragan]

What are you doing with the $error var?

$error = '';

if($input->post->submit) {

try adding an else statement at the bottom of your PHP.

Also, in your 

$.ajax

call you only have a success scenario, but none for failure... which is not a good idea.