No response returned from PHP after AJAX call

Question

I'm having an issue with AJAX. I have jQuery library including AJAX, this is in my index.php file. I have a form with a few fields but I'm just testing against one so I've trimmed most of the code:

    <form onsubmit="submitForm('#regForm'); return false;" id='regForm'>

              <div class="top-row">
                <div class="field-wrap">
                  <label>
                    First Name<span class="req">*</span>
                  </label>
                  <input type="text" required autocomplete="off" name='firstName'/>
                </div>

              <button type="submit" class="button button-block"/>Get Started</button> 
    </form>

Now, that's all well and good. The function that I'm calling "submitForm" is as follows:

      function submitForm(formId){
 var formData = $(formId).serialize();

 $.ajax({
    url: 'newReg.php',
    type: 'POST',
    data: formData,
    success:function(response){
       alert(response);
   }
 });
}

Which I thought also looks fine, after continuously going over it, although I suspect this is where the fault lies because the PHP script it's running (newReg.php) is actually really short because I was just trying to test it out:

<?php 
  $response = $_POST['firstName']; 
  echo $response;
?> 

As I've said above I think the fault lies in the submitForm function, but I have no idea what I've done wrong. Is anybody able to point me in the right direction for this?

Answer 1

This could potentially be a client side issue:

note that

$.(formId).serialize();

has a . between $ and (formId)

Answer 2

var formData = $.(formId).serialize();

This has an extra . between $ and (

Have you checked your browser console for errors?