What am I missing on my JQM Form?

Question

Im trying to send the info to my email from an app, but i am getting a non-responsive click when I submit. Any help would be awesome. I did look for answers, but I could not find the right solution.

HTML AND JQUERY MOBILE 1.4.3

<div data-role="page" id="step7">
    <div data-role="header">

        <div class="logo"> </div>

        <div data-role="navbar" data-position="fixed">
            <div class="ui-nodisc-icon">
                <ul>
                    <li><a href="#step5" data-transition="slide" data-icon="arrow-l" >Back</a></li>
                </ul>
            </div>
        </div>

    </div>


    <div data-role="content">
        <div class="text">
            <h2>What's next?</h2>
            <h3>Let's recap</h3>

            <li> Hospice is about care</li>
            <li> Hopsice is about comfort</li>
            <li> Hospice has many misconceptions</li>
            <li> Hospice is about family </li>

            <h3>If you have more questions, ask your health care provider to have someone come and talk to you.</h3>
        </div>

        <div data-role="content">
            <div class="text">
                <h1>Please take our survey</h1>
            </div>

            <div class="contact-thankyou" style="display: none;">
                Thank you.  Your message has been sent.  We will get back to you as soon as we can.
            </div>
            <div class="contact-form">
                <div data-role="fieldcontain" class="text-field">
                    <label for="name">Your Name:</label>
                    <input type="text" name="firstname" value="" placeholder="" id="firstname" />
                </div>
                <div data-role="fieldcontain" class="text-field">
                    <label for="age">Age:</label>
                    <input type="text" name="surname" value="" placeholder="" id="surname" />
                </div>
                <div data-role="fieldcontain" class="text-field">
                    <label for="gender">Gender:</label>
                    <input type="text" name="gender" value="" placeholder="" id="surname" />
                </div>
                <div data-role="fieldcontain" class="text-field">
                    <label for="email">Email Address:</label>
                    <input type="email" name="email" value="" placeholder="" id="email"  />
                </div>
                <div data-role="fieldcontain" class="text-field">
                    <label for="mobilephone">Phone Number:</label>
                    <input type="number" name="mobilephone" value="" placeholder="" id="mobilephone" />
                </div>
                <div data-role="fieldcontain" class="text-field">
                    <label for="way">Where are you?</label>
                    <select name="state" id="state">
                        <option value="" data-placeholder="true">Please select your state</option>
                        <option value="HOME">Home</option>
                        <option value="ILF">Independent Living Facility</option>
                        <option value="ALF">Assited Living Facility</option>
                        <option value="LTF">Long Term Care Facility</option>
                        <option value="OF">A Doctors Office</option>
                        <option value="HH">With a Home Health Provider</option>
                        <option value="OO">Other</option>
                    </select>
                </div>
                <div data-role="fieldcontain" class="text-field">
                    <label for="rate">Rate this App</label>
                    <select name="state" id="state">
                        <option value="" data-placeholder="true">Please select your state</option>
                        <option value="one">1- Bad </option>
                        <option value="two">2- Not Good </option>
                        <option value="three">3 - Average</option>
                        <option value="four">4 - Good</option>
                        <option value="five">5 - Great</option>
                        <</select>
                    </div>
                    <div data-role="fieldcontain" class="text-field">
                        <label for="message">Message*:</label>
                        <textarea name="message" id="message" placeholder="" class="required"></textarea>
                    </div>
                    <div class="send"><a href="javascript:;" data-role="button" data-iconpos="right" id="send-feedback">send the survey</a></div>
                </div><!-- //.contact-form -->
            </div><!-- /content -->

        </div><!-- /page -->



        <div data-role="footer" data-position="fixed">
            <div data-role="navbar"><br>
                <div class="ui-nodisc-icon">
                    <ul>
                        <li><a href="#home" data-icon="home" >Home</a></li>
                        <li><a href=# data-icon="mail">Contact Us</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

contactus.js ---> Javascript

$('#send-feedback').live("click", function() {
    var url = 'api/send.php';
    var error = 0;
    var $contactpage = $(this).closest('.content-thankyou');
    var $contactform = $(this).closest('.contact-form');
    $('.required', $contactform).each(function (i) {
        if ($(this).val() === '') {
            error++;
        }
    }); // each
    if (error > 0) {
            alert('Please fill in all the mandatory fields. Mandatory fields are marked with an asterisk *.');
    } else {
        var name = $contactform.find('input[name="name"]').val();
        var age = $contactform.find('input[name="age"]').val();
        var gender = $contactform.find('input[name="gender"]').val();
        var way = $contactform.find('select[name="way"]').val();
        var mobilephone = $contactform.find('input[name="mobilephone"]').val();
        var email = $contactform.find('input[name="email"]').val();
        var rate = $contactform.find('input[name="rate"]').val();
        var message = $contactform.find('textarea[name="message"]').val();  

        //submit the form
        $.ajax({
            type: "GET",
            url: url,
            data: {firstname:firstname, surname:surname, state: state, mobilephone: mobilephone, email: email, message: message},
            success: function (data) {
                if (data == 'success') {
                    // show thank you
                    $contactpage.find('.contact-thankyou').show();
                    $contactpage.find('.contact-form').hide();
                }  else {
                    alert('Unable to send your message. Please try again.');
                }
            }
        }); //$.ajax

    }
    return false;
});

Send.php ---> PHP

<?php
header('content-type: application/json; charset=utf-8');

if (isset($_GET["firstname"])) {
    $firstname = strip_tags($_GET['firstname']);
    $surname = strip_tags($_GET['surname']);
    $email = strip_tags($_GET['email']);
    $mobilephone = strip_tags($_GET['mobilephone']);
    $state = strip_tags($_GET['state']);
    $message = strip_tags($_GET['message']);
    $header = "From: ". $firstname . " <" . $email . ">rn"; 

    $ip = $_SERVER['REMOTE_ADDR'];
    $httpref = $_SERVER['HTTP_REFERER'];
    $httpagent = $_SERVER['HTTP_USER_AGENT'];
    $today = date("F j, Y, g:i a");    

    $recipient = 'jkublank@cimahospice.COM';
    $subject = 'Contact Form';
    $mailbody = "
First Name: $firstname
Last Name: $surname
Email: $email
Mobile Phone: $mobilephone
State: $state
Message: $message

IP: $ip
Browser info: $httpagent
Referral: $httpref
Sent: $today
";
    $result = 'success';

    if (mail($recipient, $subject, $mailbody, $header)) {
        echo json_encode($result);
    }
}
?>

Answer 1

first thing to notice. Why don't you use form element and submit button?, and you should submit form via POST method, no GET.

You have here example for PHP and GET

http://www.w3schools.com/php/php_ajax_php.asp

and here JQUERY + PHP + POST

http://blog.teamtreehouse.com/beginners-guide-to-ajax-development-with-php