无法使用 ajax 提交我的联系表

Question

我正尝试在我的托管域上提交此表单，我可以理解为什么我的 php 代码不起作用。我已将 jquery 和我的脚本代码正确地包含在我的 html.php 页面中。我没有任何 javascripts 错误，仍然没有提交表单，无法弄清楚。

Php代码

    $name = filter_var($_POST['q1'], FILTER_SANITIZE_STRING);
    $email = filter_var($_POST['q2'], FILTER_SANITIZE_EMAIL);
    $priority=filter_var($_POST['q3'], FILTER_SANITIZE_EMAIL);
    $message = filter_var($_POST['q4'], FILTER_SANITIZE_STRING);
    $buget = filter_var($_POST['q5'], FILTER_SANITIZE_EMAIL);



    $sent = email($to,$email,$name,$buget,$message);
    if ($sent) {
        echo 'Message sent!';
    } else {
        echo 'Message couldn\'t sent!';
    }
}
else {
    echo 'All Fields are required';
}
return;
}

/**
* email function
*
* @return bool | void
**/
function email($to,$email,$name,$buget,$message){
  $header = array();
  $header[] = "MIME-Version: 1.0";
  $header[] = "From: {$from_name}<{$from_mail}>";
  /* Set message content type HTML*/
  $header[] = "Content-type:text/html; charset=iso-8859-1";
  $header[] = "Content-Transfer-Encoding: 7bit";
  if( mail($to, $buget, $message, implode("\r\n", $header)) ) return true; 
}

?>

Html形式

<html>
   <form id="myform" class="fs-form fs-form-full" action="" method='post' autocomplete="off">
            <ol class="fs-fields">
                <li>
                    <label class="fs-field-label fs-anim-upper" for="q1">What's your name? </label>
                    <input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="A name" required/>
                </li>
                <li>
                    <label class="fs-field-label fs-anim-upper" for="q2" data-info="We won't send you spam, we promise...">What's your email address?</label>
                    <input class="fs-anim-lower" id="q2" name="q2" type="email" placeholder="name@email.com" required/>
                </li>
                <li data-input-trigger>
                    <label class="fs-field-label fs-anim-upper" for="q3" data-info="This will help us know what kind of service you need">What's your priority for your new website?</label>
                    <div class="fs-radio-group fs-radio-custom clearfix fs-anim-lower">
                        <span><input id="q3b" name="q3" type="radio" value="conversion"/>     <label for="q3b" class="radio-conversion">Sell things</label></span>
                        <span><input id="q3c" name="q3" type="radio" value="social"/><label for="q3c" class="radio-social">Become famous</label></span>
                        <span><input id="q3a" name="q3" type="radio" value="mobile"/><label for="q3a" class="radio-mobile">Mobile market</label></span>
                    </div>
                </li>
                <li data-input-trigger>
                    <label class="fs-field-label fs-anim-upper" data-info="We'll make sure to use it all over">Choose a color for your website.</label>
                    <select class="cs-select cs-skin-boxes fs-anim-lower">
                        <option value="" disabled selected>Pick a color</option>
                        <option value="#588c75" data-class="color-588c75">#588c75</option>
                        <option value="#b0c47f" data-class="color-b0c47f">#b0c47f</option>
                        <option value="#f3e395" data-class="color-f3e395">#f3e395</option>
                        <option value="#f3ae73" data-class="color-f3ae73">#f3ae73</option>
                        <option value="#da645a" data-class="color-da645a">#da645a</option>
                        <option value="#79a38f" data-class="color-79a38f">#79a38f</option>
                        <option value="#c1d099" data-class="color-c1d099">#c1d099</option>
                        <option value="#f5eaaa" data-class="color-f5eaaa">#f5eaaa</option>
                        <option value="#f5be8f" data-class="color-f5be8f">#f5be8f</option>
                        <option value="#e1837b" data-class="color-e1837b">#e1837b</option>
                        <option value="#9bbaab" data-class="color-9bbaab">#9bbaab</option>
                        <option value="#d1dcb2" data-class="color-d1dcb2">#d1dcb2</option>
                        <option value="#f9eec0" data-class="color-f9eec0">#f9eec0</option>
                        <option value="#f7cda9" data-class="color-f7cda9">#f7cda9</option>
                        <option value="#e8a19b" data-class="color-e8a19b">#e8a19b</option>
                        <option value="#bdd1c8" data-class="color-bdd1c8">#bdd1c8</option>
                        <option value="#e1e7cd" data-class="color-e1e7cd">#e1e7cd</option>
                        <option value="#faf4d4" data-class="color-faf4d4">#faf4d4</option>
                        <option value="#fbdfc9" data-class="color-fbdfc9">#fbdfc9</option>
                        <option value="#f1c1bd" data-class="color-f1c1bd">#f1c1bd</option>
                    </select>
                </li>
                <li>
                    <label class="fs-field-label fs-anim-upper" for="q4">Describe how you imagine your new website</label>
                    <textarea class="fs-anim-lower" id="q4" name="q4" placeholder="Describe here"></textarea>
                </li>
                <li>
                    <label class="fs-field-label fs-anim-upper" for="q5">What's your budget?</label>
                    <input class="fs-mark fs-anim-lower" id="q5" name="q5" type="number" placeholder="1000" step="100" min="100"/>
                </li>
            </ol><!-- /fs-fields -->
            <button class="fs-submit" type="submit">Send answers</button>
        </form><!-- /fs-form -->

Javascript代码

$(document).ready(function() {
var form = $('#form'); // contact form
var submit = $('#submit');  // submit button


// form submit event
form.on('submit', function(e) {
    e.preventDefault(); // prevent default form submit
    // sending ajax request through jQuery
    $.ajax({
        url: '', // form action url
        type: 'POST', // form submit method get/post
        dataType: 'html', // request type html/json/xml
        data: form.serialize(), // serialize form data 
        beforeSend: function() {

            submit.html('Sending....'); // change submit button text
        },
        success: function(data) {

            form.trigger('reset'); // reset form
            submit.html('Send Email'); // reset submit button text
        },
        error: function(e) {
            console.log(e)
        }
    });
});
});

Answer 1

提供提交按钮 ID

<input type="submit" class="fs-submit" type="submit" id="form-submit">Send answers</button>

在Javascript

$(document).ready(function(){
   $('$form-submit').click(function(){
    //your ajax code with form field value
   });
});

Answer 2

首先，您的表单 ID 是 myform，要使用 ajax 提交表单，您可以简单地获取一个按钮，然后单击它，您可以像这样使用 ajax：

html

<button class="fs-submit" id="submit">Send answers</button>

脚本

$(document).ready(function() {
var form = $('#myform'); // contact form id
// form submit event
 $('#submit').on('click', function(e) {
   //your ajax call here
});
});

无法使用 ajax 提交我的联系表

Unable to submit my contact form with ajax

javascript

php

ajax