Why won't this script load?

Question

I have a contact us form:

<form id="contactus" name="contactus" action="html_form_send1.php" method="post">
  <label for="name">Name:</label><br />
  <input type="text" id="name" name="name" maxlength="50" size="59" autofocus required/><br /><br />

  <label for="email">E-Mail Address:</label><br />
  <input type="email" id="email" name="email" maxlength="50" size="59" required/><br /><br />

  <label for="question">Question:</label><br />
  <textarea id="question" name="question" maxlength="1000" cols="50" rows="6" required></textarea><br /><br />

  <input class="c1_scButton" type="submit" id="submit" name="submit" value="Send" />
</form>

I want it to call my mail PHP script using this AJAX code:

var msg = "";
name = $("#name").val();
email = $("#email").val();
question = $("#question").val();

//validation phase

function isValidEmailAddress(emailAddress) {
  var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([az]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
  return pattern.test(emailAddress);
};

function validate(e) {
  if (name == "") {
    msg = " valid name";
  }

  if (!isValidEmailAddress(email)) {
    msg = msg + " valid email address";
  }

  if (question == "") {
    msg = msg + " valid question or comment";
  }
}

// on submit, Validate then post to PHP mailer script
$(function() {
  $("#contactus").on('submit', function(e) {
    e.preventDefault();
    validate(e);
    if msg != "" {
      e.preventDefault();
      $("#alert").html "Please enter a" + msg;
    } else {
      $.post('/html_form_send1.php', $(this).serialize(), function(data) {
        $('#alert').css(color: "black")
        $('#alert').html("<h2>Thank you for contacting us!</h2>")
          .append("<p>We will be in touch soon.</p>");
      }).error(function() {
        $('#alert').css(color: "red")
        $('#alert').html("<h2>Something went wrong. Your Question was not submitted. /n</h2>").append("<p>Please try again later or email us at <a href=href="
          mailto: support@ allegroaffiliates.com ? Subject = Contact Us Form " target="
          _top ">support@allegroaffiliates.com.</a> </p>");
      });
    };
  });
});

The script is called at the bottom of the HTML page after another script, but it isn't loading. I suspect that it is due to a code error but I can't find the error. Can anybody give me an idea why it wont load?

Side note: I do know that HTML5 will validate the script, but I have the validation in place for when HTML5 is not available.

Thank you for your help.

Answer 1

A few troubleshooting suggestions:

(1) When specifying the ajax processor file, either this $.post('html_form_send1.php' or this $.post('./html_form_send1.php' but not this $.post('/html_form_send1.php'

(2) Instead of using the shortcut code $.post(), use the full form of the method until you are pretty good at it:

var varvalue = $('#first_name').val();
var nutherval = $('#last_name').val();
$.ajax({
    type: 'post',
     url: 'your_secondary_file.php',
    data: 'varname=' +varvalue+ '&lname=' +nutherval,
    success: function(d){
        if (d.length) alert(d);
    }
});

(3) Disable validation routine until the rest is working, then work on that when you know everything else is working correctly

(4) Change your ajax processor file html_form_send1.php to just echo back a response to make sure you've got the AJAX working. Then, once you get the response, change it to echo back the variable you are sending. Then build it into the final desired product. But initially, something dead simple, like this:

your_secondary_file.php:

<?php
    $first_name = $_POST['varname'];
    $last_name = $_POST['lname'];
    echo 'Received: ' .$first_name .' '. $last_name;
    die();

(5) Instead of using .serialize(), initially just grab one or two field values manually and get that working first. Note that .serialize() produces JSON data, while the simpler method is straight posted values, as in sample code in this answer. Get it working first, then optimize.

(6) Note that the dataType: parameter in the AJAX code block is for code coming back from the PHP side, not for code going to the PHP side. Also note that the default value is html, so if you aren't sending back a JSON object then just leave that param out.

(7) In my AJAX and PHP code samples above, note the correlation between the javascript variable name, how it is referenced in the AJAX code block, and how it is received on the PHP side. I was very deliberate in the names I chose to allow you to follow the var name => var value pairing all the way through.

For example, the input field with ID first_name is stored in a variable called varvalue (dumb name but intentional). That data is transmitted in the AJAX code block as a variable named varname, and received on the PHP side as $_POST['varname'], and finally stored in PHP as $first_name

---

Review some simple AJAX examples - copy them to your system and play with them a bit.